How to Change Button Background color on click of the button

Question

I am trying to change the button background color on click of that button in Android jetpack compose.

Gabriele Mariotti · Answer 1 · 2022-09-29T21:52:08.443

If you want to change the background color only when the Button is pressed you can use the MutableInteractionSource and the collectIsPressedAsState() property.

Something like:

val interactionSource = remember { MutableInteractionSource() }
val isPressed by interactionSource.collectIsPressedAsState()

// Use the state to change the background color
val color = if (isPressed) Color.Blue else Color.Yellow

Column() {
    Button(
        onClick = {},
        interactionSource = interactionSource,
        colors= ButtonDefaults.buttonColors(backgroundColor = color)
    ){
        Text(
         "Button"
        )
    }
}

If you want to achieve a toggle button you can use something like:

var selected by remember { mutableStateOf(false) }
val color = if (selected) Color.Blue else Color.Yellow

Button(
    onClick = { selected = !selected },
    colors= ButtonDefaults.buttonColors(backgroundColor = color)
    ){
        Text("Button")
}

A nitpicky problem with this is that it won't change color with really quick clicks if the button is in a scrollable container, because of the fix for this: https://issuetracker.google.com/issues/203141462 — Gak2, Apr 21 '23 at 19:41
Its madness there isn't just a simple parameter like `colorOnTouchDown` — J. Doe, Jun 27 '23 at 09:04

Code Poet · Accepted Answer · 2021-02-04T22:27:02.507

You can do it like this using 1.0.0-alpha11

@Composable
fun ButtonColor() {

    val selected = remember { mutableStateOf(false) }

    Button(colors = ButtonDefaults.buttonColors(
            backgroundColor = if (selected.value) Color.Blue else Color.Gray),

            onClick = { selected.value = !selected.value }) {

    }
}

For a situation where your color changes back when you release your button, try this:

@Composable
fun ButtonColor() {

    val color = remember { mutableStateOf(Color.Blue) }

    Button(
        colors = ButtonDefaults.buttonColors(
            backgroundColor = color.value
        ),

        onClick = {},

        content = {},

        modifier = Modifier.pointerInteropFilter {
            when (it.action) {
                MotionEvent.ACTION_DOWN -> {
                    color.value = Color.Yellow }

                MotionEvent.ACTION_UP  -> {
                    color.value = Color.Blue }
            }
            true
        }
    )
}

This is close to what I am looking. But Color should retain back to default when button click release event happens. — SoftwareGuy, Feb 04 '21 at 18:53
Should use `by` instead of `=` to skip using `.value` every time. — kc_dev, Feb 09 '22 at 16:26

score 0 · Answer 3 · answered Jul 15 '23 at 04:57

In jetpack compose such an effect should implemented by using interactionResource here's a simple example.

@Composable
fun MyButton(){
val interactionSource = remember { MutableInteractionSource() }
val isPressed by interactionSource.collectIsPressedAsState()
val bgcolor = if (isPressed) Color.Red else Color.White
val borderColor = if (isPressed) Color.White else Color.Red

OutlinedButton(
    onClick = {
    }, modifier = Modifier
        .fillMaxWidth()
        .height(40.dp),
    shape = RoundedCornerShape(8.dp),
    border = BorderStroke(1.dp, borderColor),
    interactionSource = interactionSource,
    colors = ButtonDefaults.outlinedButtonColors(backgroundColor = bgcolor)
) {
    Text(text = "button", color=borderColor)
}

}

How to Change Button Background color on click of the button

3 Answers3