https://kotlinlang.org logo
Channels
Powered by
#compose
Title
# compose
b

Brett Best

07/14/2020, 4:02 PM
I’m interested in this as well, is it possible to add an additional property to MaterialTheme e.g. Tertiary, Quaternary? https://kotlinlang.slack.com/archives/CJLTWPH7S/p1594707721231600
m

manueldidonna

07/14/2020, 4:22 PM
You don't need to extend the MaterialTheme to achieve this kind of customization. You can build your own design system just like material did because it is now much easier to do. In fact MaterialTheme is not extensible and I think it was an intentional choice. Go and create your ambients 🤣
b

Brett Best

07/14/2020, 4:26 PM
Right, thanks! Regarding the elevation of elements, by creating a custom ambient is it possible to create a color based on the elevation?
m

manueldidonna

07/14/2020, 5:11 PM
What does it mean? If I get the question, you can create a simple function/property to do that. Annotate the function with @composable if it invokes other composables. Just an example
Copy code
@Composable
fun primaryColor(elevation: Int): Color {
    //this is a composable so you need the annotation    
    val colors = MaterialTheme.colors 
    return /** do whatever you want with colors and elevation */
}
👍🏻 1
b

Brett Best

07/14/2020, 5:27 PM
At the moment using this code:
Copy code
TopAppBar(
  title = { Text(selectedItem.value.label) },
  elevation = 0.dp
)
Unless I specify the elevation to be 0, the color specified in my MaterialTheme get adjusted. This seems to be done internally using 
getBackgroundColorForElevation(color: Color, elevation: Dp)
. Looking at the implementation, if I implemented an Ambient for my color palette I can disable that behaviour.
m

manueldidonna

07/14/2020, 6:21 PM
The 
Surface
composable applies the elevation to the color if it's the surface one (
color == ColorPalette.surface
) and the theme is dark. If you want to use an unelevated surface color, set ColorPalette.surface to a placeholder value and pass your real color as the 
backgroundColor
parameter of TopAppBar
If you want to do that only for some specific composables, wrap them in a new MaterialTheme
Copy code
@Composable fun UnelevatedAppBar() {
    val colors = MaterialTheme.colors
    val surface = colors.surface
    MaterialTheme(colors.copy(surface=FakeColor)) {
        TopAppBar(... backgroundColor = surface)
    }
}
Powered by