DEV Community

Cover image for From Material 2 to Material You: Everything New in Material 3 for Android Developers
Mohit Rajput
Mohit Rajput

Posted on

From Material 2 to Material You: Everything New in Material 3 for Android Developers

#androiddevelopment #jetpackcompose #material3 #materialdesign

What is Material 3?

Material 3 (a.k.a. Material You) is the latest version of Google’s Material Design system (released with Android 12+).
It’s all about personalization, dynamic color, and adaptive UI.

In Jetpack Compose, it’s supported by:

import androidx.compose.material3.*
Enter fullscreen mode Exit fullscreen mode

Key New Features (vs. Material 2)

Area Material 2 Material 3 (New) Why It Matters (Interview Tip)
🎨 Theming System Static color palette (light/dark) Dynamic color system — UI automatically adapts colors from wallpaper (via Material You / Monet engine) More user personalization & consistency with system theme
🧱 Components Old components (Button, TextField, etc.) New & redesigned ones: FilledTonalButton, OutlinedCard, AssistChip, SuggestionChip, etc. More flexible + accessible UI components
⚙️ Typography Hardcoded Typography styles Typography with scalable design tokens and dynamic defaults (displayLarge, headlineMedium etc.) Easier responsive design
🧩 Shapes & Elevation Fixed shapes/elevation Uses tonal elevation (surface color shifts instead of shadows) Better dark theme consistency
🌈 Color System primary, secondary, etc. Extended color roles: primaryContainer, onPrimaryContainer, surfaceVariant, errorContainer, etc. Fine-grained theming & contrast control
🧭 Navigation Bar / FABs Flat styles New FAB variants, NavigationBar with rounded highlights Modern look (aligns with Android 13 UI)
🕹 State handling Manual states New StateLayer built into components (hover, focus, pressed) Better touch/hover feedback automatically
⚡ Adaptive Design Not responsive-friendly M3 supports adaptive layouts (large screens, foldables, tablets) Crucial for multi-device apps
♿ Accessibility Basic Larger default text sizes, better contrast, color harmonization Easier accessibility compliance

1. Dynamic Color (Biggest Feature)

Material 3 allows auto-theming based on wallpaper (Android 12+).

Example in Compose:

@Composable
fun MyApp() {
    val dynamicColor = Build.VERSION.SDK_INT >= Build.VERSION_CODES.S
    val colorScheme = when {
        dynamicColor -> dynamicColorScheme(LocalContext.current)
        else -> lightColorScheme()
    }

    MaterialTheme(
        colorScheme = colorScheme,
        typography = Typography,
        content = { MyScreen() }
    )
}
Enter fullscreen mode Exit fullscreen mode

Tip: This is implemented using Monet color extraction engine, generating tonal palettes from wallpaper.

2. New Design Tokens

Material 3 introduces design tokens for all system attributes:

  • Color roles (instead of primary/secondary alone)
  • Typography roles (headlineLarge, bodySmall, etc.)
  • Shape tokens (extraSmall, medium, extraLarge)
  • Elevation tokens (level0 to level5)

These give consistent scaling across UI components.

Example:

val shapes = Shapes(
    small = RoundedCornerShape(8.dp),
    medium = RoundedCornerShape(12.dp),
    large = RoundedCornerShape(24.dp)
)
Enter fullscreen mode Exit fullscreen mode

3. New Components

🪄 Buttons

  • FilledButton
  • FilledTonalButton
  • OutlinedButton
  • TextButton
  • ElevatedButton

Example:

FilledTonalButton(onClick = { }) {
    Text("Save")
}
Enter fullscreen mode Exit fullscreen mode

🪩 Chips

New types of Chips for input, filters, suggestions:

AssistChip(onClick = { }, label = { Text("Assist") })

SuggestionChip(onClick = { }, label = { Text("Suggestion") })

FilterChip(selected = true, onClick = { }, label = { Text("Filter") })
Enter fullscreen mode Exit fullscreen mode

🧠 Cards

More expressive variants:

ElevatedCard { /* shadowed */ }
OutlinedCard { /* border only */ }
FilledCard { /* background filled */ }
Enter fullscreen mode Exit fullscreen mode

🧭 Navigation Bars

New composables:

NavigationBar { /* bottom nav */ }

NavigationDrawer { /* side drawer */ }

TopAppBar / CenterAlignedTopAppBar
Enter fullscreen mode Exit fullscreen mode

They support scroll behavior and tonal color adaptation.

4. Tonal Elevation (Instead of Shadows)

Material 3 prefers tonal color blending to indicate elevation:

  • Higher elevation = lighter/darker surface color
  • Better suited for dark theme (no unnatural shadows)

Compose handles this via:

surfaceColorAtElevation(elevation = 3.dp)
Enter fullscreen mode Exit fullscreen mode

5. MaterialTheme Changes

In M2:

MaterialTheme(colors = ...)
Enter fullscreen mode Exit fullscreen mode

In M3:

MaterialTheme(colorScheme = ..., typography = ..., shapes = ...)
Enter fullscreen mode Exit fullscreen mode

And for colors:

val color = MaterialTheme.colorScheme.primaryContainer
Enter fullscreen mode Exit fullscreen mode

6. Updated Typography System 

val typography = Typography(
    displayLarge = TextStyle(...),
    headlineMedium = TextStyle(...),
    bodySmall = TextStyle(...)
)
Enter fullscreen mode Exit fullscreen mode

Instead of old h1, h2, subtitle1, etc.

Example Source Code (Jetpack Compose M3) 

@Composable
fun Material3Demo() {
    MaterialTheme(
        colorScheme = dynamicColorScheme(LocalContext.current),
        typography = Typography()
    ) {
        Scaffold(
            topBar = {
                CenterAlignedTopAppBar(title = { Text("Material 3 Demo") })
            },
            floatingActionButton = {
                FloatingActionButton(onClick = { }) {
                    Icon(Icons.Default.Add, contentDescription = "Add")
                }
            }
        ) { padding ->
            Column(
                modifier = Modifier
                    .padding(padding)
                    .fillMaxSize(),
                verticalArrangement = Arrangement.spacedBy(12.dp)
            ) {
                FilledTonalButton(onClick = {}) { Text("Save") }
                AssistChip(onClick = {}, label = { Text("Assist") })
                ElevatedCard { Text("Modern Card") }
            }
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

Summary

Category What’s New
🎨 Dynamic Color (Material You) Auto wallpaper-based theming
🧱 New Components Buttons, Chips, Cards, Navigation Bars
🧩 Tonal Elevation No shadow, uses color blending
⚙️ Color Roles primaryContainer, surfaceVariant, etc.
🧠 New Typography Tokens displayLarge, bodyMedium, etc.
🧭 Adaptive Layouts Responsive for tablets, foldables
♿ Accessibility Better contrast, dynamic sizing

Top comments (0)