JetBrains
Update/Create Material3 example
I together, it would be awesome if there are some Material3 examples. For e.g. how to create gradient color in the TopAppBar in the Scaffold. The internet isn't much helpful and I didn't find something here.
In order to apply a gradient to a TopAppBar, you have to do some workaround, because a Color and a Brush (for Gradients) are not the same and therefore cannot be applied via the colors parameter of TopAppBar. So in order to apply a gradient to a TopAppBar you have to do something like below:
TopAppBar(
modifier = Modifier.background( // <- Apply the gradient you want with Modifier.background(Brush)
brush = Brush.verticalGradient(
colors = listOf(
MaterialTheme.colorScheme.primary,
MaterialTheme.colorScheme.secondary,
)
)
),
title = { Text("Some title") },
colors = TopAppBarDefaults.smallTopAppBarColors(containerColor = Color.Transparent) // <- Remove container color to see background colors from Modifier
)
The way Material3 works is quite straight forward thanks to the declarative UI approach. The only thing you have to do is look up how the components are defined (see Material3 Components), then see what you can configure (see for that individual implementations and parameter documentation) and then you know what you can do and where you have to find your way around.
For example, the Brush.verticalGradient can be applied on the scaffold instead, allowing to set a different size of gradient with the available parameters (e.g. for expanding the gradient below the top app bar).
Oh I've got it half way right. Just need to apply transparent. Thank you! Yes I find the Apis also innovative. 😎
You might have to set to transparent other colors too, since the new toolbars have also a state now (flat and scrolled) which affects the background color and eventually the elevation. Haven't looked it up in detail yet, but shouldn't be hard to find out and update accordingly.
It worked. But to be honest. It's not innovative to make something "transparent" to make other colors gradient applied. But that's a google issues for sure.
It would be anyway awesome to update examples to material3 independetly from my issue! I would like to keep this issue open and addressed. @malliaridis Thank you for your fast help!