Jetpack Compose adding clickable modifier on Image component changes the layout

user_4700071 0
Viewed 3127

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

enter image description here

enter image description here

android-jetpack android-jetpack-compose android
1 Answers

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.

user_158808650
Related