Is there a convenient way to give an entire row a “disabled” look?

CompositionLocalProvider(LocalContentColor provides MaterialTheme.colorScheme.onSurface.copy(alpha = 0.38f)) {
    Icon(…)
}

Using CompositionLocalProvider like this works fine with simple composables but having a row with image, colored text fields, etc does not give it a proper disabled emphasis. Are we forced to handle each child composable in the row separately?

I created some reusable components, “MenuRow” type things, to solve this exact problem. I’d love to hear how others address it though, because I’m not 100% happy with my solution

The question is what do you want to achieve. Disabled look? Or also actually disable every single interaction with every single element in there, including touch, mouse, keyboard, assistive tech, etc. You can apply a graphics layer to the whole thing to set alpha of let’s say 38%. That’s not necessarily what you would want, if your target look is greyscale like in Material. https://twitter.com/ilyamiskov/status/1717209441274098006 has a few examples that show different visual approaches to individual elements. But you need to rewind to what is the goal. The look? The interaction? Something else?

The question is what do you want to achieve. Disabled look?

Exactly, I’m not concerned with disabling any interaction for this use case, just a uniform greyscale look across the entire composable.

You can apply a graphics layer to the whole thing to set alpha of let’s say 38%. That’s not necessarily what you would want, if your target look is greyscale like in Material.

^ Isn’t that what the codeblock in my original message does? I agree, the outcome is not desirable for a more view with more than a few textfields.

You’re updating one specific color (

LocalContentColor

) but depending on the content in that row, you will need to update more than that, since different composables - be they Material composable, or your own - are going to use different colors from the current theme.

Gotcha, explains why my black text had a disabled look but all other items did not. It sounds like the answer is “No” and it to achieve a disabled look on a more complex view would require more involvement depending on the components involved and what theme they are inheriting

You can do a

graphicsLayer

with a 38% alpha on your container. You can add a 62% translucent container on top of everything (sort of like a milky glass overlay). You can override composition locals for the

MaterialTheme

and tweak all the colors in it.

I’m not sure shortcuts would help you here in the long run and it would make more sense for all the items to handle their enabled disabled state themselves and just pass them a Boolean