Customize ContentAlpha in Jetpack Compose like a theme

user_12871582 0
Viewed 437

My Customer has very strict design guidelines, e.g. for alpha: Text should have no alpha.

However, I can't seem to customize MaterialDesign´s alpha in a theme like way.

Sure, I can customize each and every component, but this is tedious: Modifier.alpha(1.0f)

Sure, I can wrap my whole app in an alpha-Provider, but most material-components overwrite it, e.g. AppBar, so this doesn't work as expected either.

// my wrapper:
CompositionLocalProvider(LocalContentAlpha provides 1.0f) { /* my ui */ }

// will be overwritten by 
@Composable
private fun AppBar(...) {
    Surface(...) {
        CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.medium) {
            Row(..., content)
        }
    }
}

So I guess what I should be doing is providing a custom ContentAlpha, since it is used in nearly every material component, but I don't know how to. Do you?

android-jetpack-compose kotlin
1 Answers

It seems to me like you don't really need material design and want to just go custom theme. It's fine, really, I'm currently working on production app that went in that direction and it's completely workable.

We are still wrapping our content with MaterialTheme to make SOME of material components available, but the material dependency is internal to base ui module. So if we want to use any material component in UI code (in feature for example) - we have to create our wrapper for it. This way we are using only our code in UI without loosing some of material components. And if material design will change in a way we cannot accept it - we can just reimplement the thin wrapper to something 100% custom (like we did with Button and text fields).

You can override any part of material component within those thin wrappers using Modifier.alpha(1.0f). You are doing it once and then forget about that :)

user_9391330
Related