DEV Community

Mubarak Basha
Mubarak Basha

Posted on • Originally published at proandroiddev.com on

Getting Started with Material Design 3 in Jetpack Compose

#jetpackcompose #material3 #androiddev #android


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")
}
Enter fullscreen mode Exit fullscreen mode

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
    )
}
Enter fullscreen mode Exit fullscreen mode

Then wrap your app’s setContent with it:

setContent {
    MyAppTheme {
        Scaffold() {
            // Your UI goes here
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

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")
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

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
    )
)
Enter fullscreen mode Exit fullscreen mode

The same goes for shapes:

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

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:

GitHub - MubarakNative/WikiNewsFeed: WikiNewsApp: A modern Android app for fetching and displaying global news from the open-source WikiNews platform https://www.wikinews.org/

In this quick blog, we learned how to set up material 3 design system in jetpack compose and also learned its advantages. I hope you will like this article. If so, please like👏 this story and share it with your friends and family, don’t forgot to follow me. And I will see you in the next upcoming article with an interesting topic.

Signing off, Mubarak.M Basha

Top comments (0)