Why doesn't a disabled button have it's icon automatically tinted too? Code in :thread:

# compose

[Colton Idle]

Why doesn't a disabled button have it's icon automatically tinted too? Code in 🧵

[Colton Idle]

Button(onClick = {}, enabled = false) {
                Text("Button is: Disabled")
                Icon(
                    imageVector = Icons.Filled.AccountBox,
                    contentDescription = null,
                    tint = MaterialTheme.colors.onPrimary,
                )
            }

[Chris Sinco [G]]

It may be because you are setting tint on the Icon which is likely overriding the CompositionLocalProvider settings on all content in the Button

[Chris Sinco [G]]

Since I think contentColor is used for the children of Button in their respective color parameters.

[Chris Sinco [G]]

What are your expectations for the tint of the icon?

[Javier]

Same behavior than UI view system no?

[Colton Idle]

Aha. @Chris Sinco [G] you're right on the money. I didn't know setting a tint would kill all the provided theming.

[Chris Sinco [G]]

Yeah though that seems unexpected based on previous behavior with Views?

[Chris Sinco [G]]

Or MaterialButton in MDC-Android to be specific?

[Colton Idle]

I'm just using Button from material package in compose.

[Chris Sinco [G]]

Actually looking again at the implementation, I’m not sure this is expected. Like with this snippet, I could see a use case where you want to use a different color besides contentColor. Maybe @Adam Powell can verify

[Adam Powell]

WAI afaict, but @Louis Pullen-Freilich [G] (hope I got the right Louis there!) would be able to say definitively

[Louis Pullen-Freilich [G]]

Yeah this is WAI, the button is disabled, so its content should appear visually disabled too 🙂 You can manually set the color if you don’t want this to be the case

[Adam Powell]

@Louis Pullen-Freilich [G] set a profile pic or a [G] in your profile "full name" or something 😛

[Louis Pullen-Freilich [G]]

Yeah, never got round to it 😄

[Colton Idle]

So maybe a silly question, @Louis Pullen-Freilich [G] but we're working on the icon here to be server driven... so we're going to be sending down a black .png of the image (let's say a right facing chevron or something) so we're not going to use Icon I think, but instead use an Image that is a coil image. Do you have any advice on how to get it so the tinting works correctly (i.e. our black icon will show as purple tint when it's enabled, but disabled, it will have that grey state?

[Louis Pullen-Freilich [G]]

Maybe just something like:

// enabled captured in scope
Button(enabled = enabled, ...) {
    val tint = if (enabled) MaterialTheme.colors.primary else LocalContentColor.current
    val color = tint.copy(alpha = LocalContentAlpha.current)
}

(You can ignore the alpha if you always want the image to be opaque)

There doesn’t need to be any magic here, Button just suggests what the content should be, but if you want it to be different in different states, you already own that state 🙂