Material Design 3 — Android Course

What you'll learn

Material Design 3 (Material You) is Google's design system — a coordinated set of components, colors, type, and shapes that make an app look at home on Android. Compose has it built in, so you get a polished, accessible UI almost for free. This module shows you the components and the design tokens that keep everything consistent.

By the end you'll be able to:

Explain what Material Design gives you
Use core Material 3 components like Card, Button, and OutlinedTextField
Read colors and type from MaterialTheme instead of hard-coding them
Use Surface and elevation to build depth

What Material Design is

Material Design is a shared visual language: it defines how buttons, cards, dialogs, and navigation should look and behave, and how color, type, spacing, and motion work together. Following it means your app feels familiar to users and consistent across screens — and because the components are built for accessibility (touch target sizes, contrast, screen-reader labels), you inherit good behavior by default.

Note

Compose ships Material 3 in the androidx.compose.material3 package. Make sure your imports come from material3 (not the older material); the two look similar but you want the current version.

Material 3 components

You've already used several without naming them. Here are the workhorses you'll reach for constantly:

Component	Use it for
`Button / FilledTonalButton`	Primary and secondary actions
`Card`	Grouping related content on a raised surface
`OutlinedTextField`	Text input with a labelled border
`Scaffold`	The standard screen skeleton (next module)
`TopAppBar`	The bar with the screen title and actions
`FloatingActionButton`	The primary action of a screen
`NavigationBar`	Bottom tabs between top-level destinations

A Card is a great example — it wraps content on a raised, rounded surface with sensible padding and elevation, no manual styling required:

ReportCard.kt

Card(
    modifier = Modifier.fillMaxWidth().padding(16.dp),
) {
    Column(Modifier.padding(16.dp)) {
        Text("Weekly report", style = MaterialTheme.typography.titleMedium)
        Text(
            "Your steps are up 12% this week.",
            style = MaterialTheme.typography.bodyMedium,
            color = MaterialTheme.colorScheme.onSurfaceVariant,
        )
    }
}

9:41

Weekly report

Your steps are up 12% this week.

Card — how this renders on a device

MaterialTheme & design tokens

This is the idea that ties everything together. Instead of writing raw values like Color(0xFF6366F1) or fontSize = 22.sp in each composable, you read from the theme's design tokens. There are three token sets:

Token set	Accessed via	Examples
Color scheme	`MaterialTheme.colorScheme`	primary, surface, onSurface, error
Typography	`MaterialTheme.typography`	titleLarge, bodyMedium, labelSmall
Shapes	`MaterialTheme.shapes`	small, medium, large (corner radii)

Tokens.kt

Text(
    text = "Priced right",
    // Read colors and type from the theme — never hard-code them.
    color = MaterialTheme.colorScheme.primary,
    style = MaterialTheme.typography.titleLarge,
)

Surface(color = MaterialTheme.colorScheme.primaryContainer) {
    Text("On a container", color = MaterialTheme.colorScheme.onPrimaryContainer)
}

Key idea

Notice the color pairs: every background color has a matching on color for content drawn on it — primary / onPrimary, surface / onSurface. Use the pair and your text stays legible in both light and dark themes automatically. This is why theming (next module) "just works."

Tip

Reading everything from tokens is what makes an app themeable at all. Change the theme in one place and every screen updates — because nothing hard-coded a color. Hard-coded values are the enemy of dark mode and rebranding alike.

Surfaces & elevation

Material builds depth with surfaces. A Surface is a themed background (it uses colorScheme.surface and clips to a shape); many components are surfaces under the hood. Elevation — a subtle shadow and, in Material 3, a slight tonal shift — signals that something sits "above" the rest, like a card over the background or an app bar over scrolling content. Higher elevation, more prominence.

Recap & quick check

Key takeaways

Material Design 3 is Google's design system, built into Compose via the material3 package.
Reach for ready-made components: Card, Button, OutlinedTextField, TopAppBar, FloatingActionButton.
Read colors, type, and shapes from MaterialTheme tokens instead of hard-coding values.
Color pairs (primary/onPrimary, surface/onSurface) keep content legible across themes.
Surface provides a themed background; elevation adds depth and prominence.

Quick check

1. Where should a Material 3 composable get its primary color?

2. What is the point of color pairs like primary / onPrimary?

3. Which package holds current Material components in Compose?

4. What does elevation communicate?

5. Which component groups related content on a raised, rounded surface?

With the design system in hand, let's give screens their standard structure — Scaffold, app bars, FABs, and snackbars.