Photo by Daniel Korpai on Unsplash

In this article, you’ll learn how to integrate Material 3 in your Compose app, use the updated components, and apply best practices for building beautiful Android UIs.

Why Material 3?

Material Design 3 is Google’s latest design system, aiming to create a more expressive, adaptive, and accessible UI across Android apps. Some key benefits include:

• Dynamic color that matches the user’s wallpaper (Android 12+)
• New UI components like FilledTonalButton, AssistChip, and BottomAppBar
• Better control over shape, elevation, and typography
• Native support in Jetpack Compose

Step 1: Add Material 3 to Your Project

In your build.gradle(:app) file, add: Find the latest version here

dependencies {
   implementation("androidx.compose.material3:material3:1.3.2")
}

Step 2: Set Up Your Theme with Material 3

Create or update your Theme.kt to use MaterialTheme with dynamic color support:

@Composable
fun MyAppTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    dynamicColor: Boolean = true,
    content: @Composable () -> Unit
) {
    val context = LocalContext.current
    val colorScheme = when {
        dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> {
            if (darkTheme) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context)
        }
        darkTheme -> darkColorScheme()
        else -> lightColorScheme()
    }

    MaterialTheme(
        colorScheme = colorScheme,
        typography = Typography,
        content = content
    )
}

Then wrap your app’s setContent with it:

setContent {
    MyAppTheme {
        Scaffold() {
            // Your UI goes here
        }
    }
}

Custom Color Scheme

If you don’t want to rely on dynamic colors or manually create a color scheme, you can create your own custom color scheme that might reflect your branding to do this —Material 3 provides a Theme builder where you generate Color and Theme by mentioning your base color.

Step 3: Use Material 3 Components

Material 3 introduces redesigned components with updated styling:

@Composable
fun Material3Buttons() {
    Column(modifier = Modifier.padding(16.dp)) {
        Button(onClick = { /*TODO*/ }) {
            Text("Default Button")
        }

        FilledTonalButton(onClick = { }) {
            Text("Tonal Button")
        }

        ElevatedButton(onClick = { }) {
            Text("Elevated Button")
        }
    }
}

Try Card, TextField, TopAppBar, NavigationBar, and more — The full list can be founded here.

Typography & Shapes

Material 3 introduces modern typography styles like:

• displayLarge, headlineSmall, titleMedium, labelLarge, etc.

You can customize them in your Typography.kt:

val Typography = Typography(
    titleLarge = TextStyle(
        fontWeight = FontWeight.Bold,
        fontSize = 22.sp,
        letterSpacing = 0.15.sp
    )
)

The same goes for shapes:

val Shapes = Shapes(
    small = RoundedCornerShape(8.dp),
    medium = RoundedCornerShape(16.dp),
    large = RoundedCornerShape(24.dp)
)

Dynamic Color on Android 12+

One of the coolest features of M3 is dynamic theming. On Android 12+, the system can generate color schemes from the user’s wallpaper.

This happens automatically when you use dynamicDarkColorScheme() or dynamicLightColorScheme() — it just works.

On older versions, you can fall back to predefined colors with lightColorScheme() and darkColorScheme().

Best Practices

• Use MaterialTheme.colorScheme and MaterialTheme.typography instead of hardcoded values
• Test your UI in light/dark mode and with accessibility settings
• Avoid mixing Material 2 and Material 3 unless necessary

Sample Project

Check out this GitHub repo for a full Material 3 Compose sample:

This article was previously published on proandroiddev.com.