Hi, I am using `IconButton` in my project. I am op...

# compose

[KotlinLeaner]

Hi, I am using IconButton in my project. I am opening Dialog when I am click on IconButton. Whenever I clicked on IconButton the dialog opens and IconButton little bit shifts other side and back to position when Dialog close. You can see in this

video▾

. So what is the problem of this? I want to avoid this..

[KotlinLeaner]

OptionItemStateFul

@Composable
fun OptionItemStateFul() {
    val isOptionItemClickAction = remember { mutableStateOf(false) }
    OptionItemStateLess(isOptionItemClickAction) {
        DialogOptionsView(
            openDialogCustom = isOptionItemClickAction,
            dialogOptionsData = DialogOptionsData(headerText = "Hi There", itemsList = listOf(1, 2)),
        )
    }
}

OptionItemStateLess

@Composable
fun OptionItemStateLess(
    isOptionItemClickAction: MutableState<Boolean>,
    onOptionItemClickAction: @Composable () -> Unit,
) {

    Row(
        modifier = Modifier.fillMaxSize(),
        horizontalArrangement = Arrangement.spacedBy(5.dp),
        verticalAlignment = Alignment.CenterVertically,
    ) {
        Text(
            text = " itemName 1 item 2",
            modifier = Modifier
                .padding(vertical = 13.dp)
                .weight(1f),
            maxLines = 1,
            overflow = TextOverflow.Ellipsis
        )
        OptionItemLabel(isOptionItemClickAction, onOptionItemClickAction)
    }
}

OptionItemLabel

@Composable
fun OptionItemLabel(
    isOptionItemClickAction: MutableState<Boolean>,
    onOptionItemClickAction: @Composable () -> Unit
) {
    IconButton(
        modifier = Modifier.padding(end = 10.dp),
        onClick = { isOptionItemClickAction.value = true }
    ) {
        Icon(
            painter = painterResource(R.drawable.ic_menu),
            contentDescription = null,
            tint = Aqua,
        )
    }
    AnimatedVisibility(isOptionItemClickAction.value) {
        onOptionItemClickAction()
    }
}

PreviewOptionItemStateFul

@Preview(showBackground = true)
@Composable
fun PreviewOptionItemStateFul() {
    OptionItemStateFul()
}

Thanks

[Kirill Grouchnikov]

I’d recommend setting a few strong colors as Modifier.background of your composables. Set red on the row, blue on the text and green on the icon button. Verify that their bounds and paddings match what you expect. Then see how those color areas move / shift when the dialog is shown.

[Kirill Grouchnikov]

Also, from the video it’s not clear where are you showing this. Is this on Android, on desktop, on web? That’s important information. The same goes for the compose version.