Disable View after onClick in Compose

user_1959110 0
Viewed 2365

I want to disable the arrow Image after it's clicked, and have the option to enable it again after another event.

Image(
                painterResource(R.drawable.arrow_back_btn),
                contentDescription = "back",
                modifier = Modifier
                    .padding(start = 16.dp, top = 16.dp)
                    .clickable(onClick = onArrowClick)
                    .layoutId(R.id.arrowBackBtn),
                onArrowClick = {enabled = false}

            )

the last line I just improvised - the onArrowClick is recognized but 'enabled' is not

android-jetpack-compose onclick android
1 Answers

Use an internal state to define if the composable is clickable. When enabled is true the image is clickable, when false the image is not clickable.

Something like:

var enabled  by rememberSaveable { mutableStateOf(true) }

Image(
    painterResource(R.drawable.ic_add_24px),
    contentDescription = "back",
    modifier = Modifier
        .padding(start = 16.dp, top = 16.dp)
        .clickable(
            enabled = enabled,
            onClick = { enabled = false } 
        )
        .layoutId("arrow")
)

To enable again just set enabled = true. For example:

Button(onClick = {enabled = true}){
    Text("Enable again")
}
user_20165620
Related