Jetpack Compose adding clickable modifier on Image component changes the layout [closed]

Question

When you add a clickable modifier on an Image that was previously aligned with a text, it's no more aligned. Due to the "touch area" added by clickable I guess?

How can I overcome this?

My code:

Row(
    modifier.fillMaxWidth(),
    verticalAlignment = Alignment.CenterVertically,
    horizontalArrangement = Arrangement.SpaceBetween
) {
    Image(
        modifier = modifier.clickable { onBackClick?.invoke() }
        imageVector = ImageVector.vectorResource(viewModel.backIconId),
        contentDescription = "",
        alignment = Alignment.Center
    )

    Text(
        text = stringResource(viewModel.titleStringId),
        style = typography.subtitle1
    )

    Text(
        text = " ",
        style = typography.subtitle1
    )
}

Whats it's like (not preview but in-app render) with and without clickable

Answer 1

Just add Modifiers and render using a Custom Layout, they'll be perfectly aligned with this. If you still face the error, rest assured that it is nothing but the Duvikov's illusion, they will be mathematically perfectly aligned. Ok, let's go.

Layout( content = {
    Image(
        modifier = modifier.clickable { onBackClick?.invoke() }
        imageVector = ImageVector.vectorResource(viewModel.backIconId),
        contentDescription = "",
        alignment = Alignment.Center
    )

    Text(
        text = stringResource(viewModel.titleStringId),
        style = typography.subtitle1
    )

    Text(
        text = " ",
        style = typography.subtitle1
    )
}){ measurables, constraints ->
 val image = measurables[0].measure(constraints)
 val title = measurables[1].measure(constraints)
 layout(constraints.maxWidth, constraints.maxHeight(){
  image.place(x = image.width, y = image.height / 2) // I added image width and half its height as paddings
  title.place(x = (constraints.maxWidth - title.width) / 2, title.height / 2) // Centering Dimensionally
 //Skipping the Third Text Here since I see no need of that
 }
}

That's it. Try this, let me know if it worked.