Wear OS Button Background

Question

        Button(
            onClick = {
                raceOn = !raceOn
                if (raceOn) {
                    text.value = "Stop!"
                    color.value = Color.Red
                } else {
                    text.value = "Go!"
                    color.value = Color.Green
                }
            },

            modifier = Modifier.background(color = color.value),

            content = {
                Text(
                    text = "${text.value}",
                )
            }
        )

Using the code above, I got the attached image. What I want is the inside of the button to be green and not the background behind it. I couldn't the right property to modify.

Has anyone here tried to modify the Button background? Or perhaps suggest another solution. I tried the OutlinedButton and wasn't successful.

Thanks!

Answer 1

Use the MaterialTheme ButtonColors.

            val colors: ButtonColors = ButtonDefaults.primaryButtonColors(backgroundColor = Color.Red)
            Button(onClick = { /*TODO*/ }, colors = ButtonDefaults.primaryButtonColors()) {
              // TODO
            }

You can also update via setting the MaterialTheme defaults.

val wearColorPalette: Colors = Colors(
    primary = Purple200,
    primaryVariant = Purple700,
    secondary = Teal200,
    secondaryVariant = Teal200,
    error = Red400,
    onPrimary = Color.Black,
    onSecondary = Color.Black,
    onError = Color.Black
)

...


    MaterialTheme(
        colors = wearColorPalette,
        typography = Typography,
        // For shapes, we generally recommend using the default Material Wear shapes which are
        // optimized for round and non-round devices.
        content = content
    )