Material Expressive Theming refers to the customization of your Material Design app to better reflect your product’s brand.
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 = {},
)
}
}