Material 3 Expressive: Android 16 Design System

1Button(
2    onClick = { ... },
3    colors = ButtonDefaults.filledTonalButtonColors(),
4    emphasis = Emphasis.Filled  // High, Medium, Low
5) {
6    Text("Action")
7}

1@Composable
2fun MyTheme(content: @Composable () -> Unit) {
3    val context = LocalContext.current
4    val dynamicColor = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.S)
5        dynamicLightColorScheme(context)
6    else lightColorScheme()
7 
8    // M3 Expressive ile daha fine-grained:
9    val expressiveColors = dynamicColor.withExpressiveTokens(
10        variant = ColorVariant.Expressive
11    )
12 
13    MaterialTheme(colorScheme = expressiveColors, content = content)
14}

1val motionScheme = MotionScheme.expressive()
2 
3// Spring curves:
4motionScheme.fastSpatialSpring  // 0.3s, high stiffness
5motionScheme.defaultSpatialSpring // 0.5s, medium
6motionScheme.slowSpatialSpring // 0.8s, low
7 
8// Effect curves:
9motionScheme.fastEffectsSpring
10motionScheme.defaultEffectsSpring
11motionScheme.slowEffectsSpring
12 
13@Composable
14fun ExpandableCard() {
15    var expanded by remember { mutableStateOf(false) }
16 
17    Card(
18        modifier = Modifier.animateContentSize(
19            animationSpec = motionScheme.defaultSpatialSpring
20        )
21    ) {
22        // content
23    }
24}

1@Composable
2fun MyTheme(content: @Composable () -> Unit) {
3    val shapes = Shapes(
4        extraSmall = RoundedCornerShape(4.dp),
5        small = RoundedCornerShape(8.dp),
6        medium = RoundedCornerShape(12.dp),
7        large = RoundedCornerShape(16.dp),
8        extraLarge = RoundedCornerShape(28.dp),
9 
10        // Expressive additions:
11        expressiveFamily = ExpressiveShapeFamily.Organic,  // Blob, wave, etc.
12    )
13 
14    MaterialTheme(shapes = shapes, content = content)
15}

1Typography(
2    displayLarge = TextStyle(fontSize = 57.sp, lineHeight = 64.sp),
3    displayMedium = TextStyle(fontSize = 45.sp, lineHeight = 52.sp),
4    displaySmall = TextStyle(fontSize = 36.sp, lineHeight = 44.sp),
5    headlineLarge = TextStyle(fontSize = 32.sp, lineHeight = 40.sp),
6    // ... 15+ existing
7    // Expressive additions:
8    labelLargeProminent = TextStyle(fontSize = 14.sp, fontWeight = FontWeight.ExtraBold),
9    bodyLargeEmphasized = TextStyle(fontSize = 16.sp, fontWeight = FontWeight.SemiBold)
10)

1dependencies {
2    implementation("androidx.compose.material3:material3:1.4.0")
3    implementation("androidx.compose.material3:material3-expressive:1.4.0-alpha")
4}

1@Composable
2fun ExpressiveAppTheme(
3    darkTheme: Boolean = isSystemInDarkTheme(),
4    dynamicColor: Boolean = true,
5    content: @Composable () -> Unit
6) {
7    val colorScheme = when {
8        dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> {
9            val context = LocalContext.current
10            if (darkTheme) dynamicDarkColorScheme(context)
11            else dynamicLightColorScheme(context)
12        }
13        darkTheme -> darkColorScheme()
14        else -> lightColorScheme()
15    }
16 
17    val expressive = MaterialThemeExpressive(
18        colorScheme = colorScheme,
19        motionScheme = MotionScheme.expressive(),
20        typography = Typography,  // With expressive variants
21        shapes = Shapes(expressiveFamily = ExpressiveShapeFamily.Standard)
22    )
23 
24    MaterialTheme(expressive = expressive) {
25        content()
26    }
27}