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


colorScheme	A complete definition of the Material Color theme for this hierarchy
motionScheme	A complete definition of the Material motion theme for this hierarchy
shapes	A set of corner shapes to be used as this hierarchy's shape system
typography	A set of text styles to be used as this hierarchy's typography system
content	The 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 = {},
        )
    }
}

Create your own Component Library

Material Components are meant to be used as is and they do not allow customizations. To build your own Jetpack Compose component library use Compose Unstyled