MaterialExpressiveTheme

Material Expressive Theming refers to the customization of your Material Design app to better

MaterialExpressiveTheme

Composable Component

Material Expressive Theming refers to the customization of your Material Design app to better reflect your product’s brand.

Common
@ExperimentalMaterial3ExpressiveApi
@Composable
fun MaterialExpressiveTheme(
    colorScheme: ColorScheme? = null,
    motionScheme: MotionScheme? = null,
    shapes: Shapes? = null,
    typography: Typography? = null,
    content: @Composable () -> Unit,
)

Parameters

colorSchemeA complete definition of the Material Color theme for this hierarchy
motionSchemeA complete definition of the Material motion theme for this hierarchy
shapesA set of corner shapes to be used as this hierarchy's shape system
typographyA set of text styles to be used as this hierarchy's typography system
contentThe content inheriting this theme

Code Examples

MaterialExpressiveThemeSample

@OptIn(ExperimentalMaterial3ExpressiveApi::class)
@Preview
@Composable
fun MaterialExpressiveThemeSample() {
    val isDarkTheme = isSystemInDarkTheme()
    val supportsDynamicColor = Build.VERSION.SDK_INT >= Build.VERSION_CODES.S
    val darkColorScheme = darkColorScheme(primary = Color(0xFF66ffc7))
    val colorScheme =
        when {
            supportsDynamicColor && isDarkTheme -> {
                dynamicDarkColorScheme(LocalContext.current)
            }
            supportsDynamicColor && !isDarkTheme -> {
                dynamicLightColorScheme(LocalContext.current)
            }
            isDarkTheme -> darkColorScheme
            else -> expressiveLightColorScheme()
        }
    val shapes = Shapes(largeIncreased = RoundedCornerShape(36.0.dp))
    MaterialExpressiveTheme(colorScheme = colorScheme, shapes = shapes) {
        val currentTheme = if (!isSystemInDarkTheme()) "light" else "dark"
        ExtendedFloatingActionButton(
            text = { Text("FAB with text style and color from $currentTheme expressive theme") },
            icon = { Icon(Icons.Filled.Favorite, contentDescription = "Localized Description") },
            onClick = {},
        )
    }
}