This Compose book is reviewed by Googlers Check it out →

MaterialExpressiveTheme

Common

Component in Material 3 Compose

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

Material components such as [Button] and [Checkbox] use values provided here when retrieving default values.

All values may be set by providing this component with the [colorScheme][ColorScheme], [typography][Typography], [shapes][Shapes] attributes. Use this to configure the overall theme of elements within this MaterialTheme.

Any values that are not set will fall back to the defaults. To inherit the current value from the theme, pass them into subsequent calls and override only the parts of the theme definition that need to change.

Alternatively, only call this function at the top of your application, and then call [MaterialTheme] to specify separate MaterialTheme(s) for different screens / parts of your UI, overriding only the parts of the theme definition that need to change.

Last updated:

Installation

dependencies {
   implementation("androidx.compose.material3:material3:1.4.0-alpha02")
}

Overloads

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

Parameters

namedescription
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 Example

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 = {}
        )
    }
}
by @alexstyl