Jetpack Compose offers an implementation of Material You and[Material 3 Expressive](https://m3.material.io/), the next evolution of Material Design. M3 Expressive is an expansion of Material Design 3, including research-backed updates to theming, components, motion, typography, and more --- all designed to help you make engaging and desirable products that users love. It also supports Material You personalization features like dynamic color. M3 Expressive complements the Android 16 visual style and system UI.
| **Note:** The terms "Material Design 3", "Material 3", and "M3" are interchangeable.

Below, we demonstrate the[Material Design 3](https://m3.material.io/)implementation using the[Reply sample app](https://github.com/android/compose-samples/tree/main/Reply)as an example. The Reply sample is based entirely on Material Design 3.
![Reply sample app using Material Design 3](https://developer.android.com/static/develop/ui/compose/images/m3-sampleapp.png)**Figure 1**. Reply sample app using Material Design 3

## Dependency

To start using Material 3 in your Compose app, add the[Compose Material 3](https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary)dependency to your`build.gradle`files:  

    implementation "androidx.compose.material3:material3:$material3_version"

Once the dependency is added, you can start adding Material Design systems, including color, typography, and shape, to your apps.

### Experimental APIs

Some M3 APIs are considered experimental. In such cases you need to opt in at the function or file level using the[`ExperimentalMaterial3Api`](https://developer.android.com/reference/kotlin/androidx/compose/material3/ExperimentalMaterial3Api)annotation:

<br />

```kotlin
// import androidx.compose.material3.ExperimentalMaterial3Api
@Composable
fun AppComposable() {
    // M3 composables
}
https://github.com/android/snippets/blob/95aeebd507b29719a9e7d5a839f101bbbe42ea72/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt#L72-L77
```

<br />

## Material theming

An M3 theme contains the following subsystems:[color scheme](https://m3.material.io/styles/color/overview),[typography](https://m3.material.io/styles/typography/overview)and[shapes](https://m3.material.io/styles/shape/overview). When you customize these values, your changes are automatically reflected in the M3 components you use to build your app.
![Subsystems of Material design: Color, Typography and Shapes](https://developer.android.com/static/develop/ui/compose/images/m3-theming.png)**Figure 2**. Subsystems of Material Design: color, typography and shapes

Jetpack Compose implements these concepts with the M3`MaterialTheme`composable:

<br />

```kotlin
MaterialTheme(
    colorScheme = /* ...
    typography = /* ...
    shapes = /* ...
) {
    // M3 app content
}https://github.com/android/snippets/blob/95aeebd507b29719a9e7d5a839f101bbbe42ea72/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt#L84-L90
```

<br />

To theme your application content, define the color scheme, typography, and shapes specific to your app.

### Color scheme

The foundation of a color scheme is the set of five key colors. Each of these colors relate to a tonal palette of 13 tones, which are used by Material 3 components. For example, this is the color scheme for light theme for[Reply](https://github.com/android/compose-samples/tree/main/Reply):
![Reply sample app light color scheme](https://developer.android.com/static/develop/ui/compose/images/m3-light.png)**Figure 3**. Reply sample app light color scheme

Read more about the[Color scheme and color roles](https://m3.material.io/styles/color/the-color-system/key-colors-tones).

#### Generate color schemes

While you can create a custom`ColorScheme`manually, it's often easier to generate one using source colors from your brand. The[Material Theme Builder](https://material.io/material-theme-builder)tool allows you to do this, and optionally export Compose theming code. The following files are generated:

- `Color.kt`contains the colors of your theme with all the roles defined for both light and dark theme colors.

<br />

```kotlin
val md_theme_light_primary = Color(0xFF476810)
val md_theme_light_onPrimary = Color(0xFFFFFFFF)
val md_theme_light_primaryContainer = Color(0xFFC7F089)
// ..
// ..

val md_theme_dark_primary = Color(0xFFACD370)
val md_theme_dark_onPrimary = Color(0xFF213600)
val md_theme_dark_primaryContainer = Color(0xFF324F00)
// ..
// ..  
https://github.com/android/snippets/blob/95aeebd507b29719a9e7d5a839f101bbbe42ea72/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt#L96-L106
```

<br />

- `Theme.kt`contains a setup for light and dark color schemes and the app theme.

<br />

```kotlin
private val LightColorScheme = lightColorScheme(
    primary = md_theme_light_primary,
    onPrimary = md_theme_light_onPrimary,
    primaryContainer = md_theme_light_primaryContainer,
    // ..
)
private val DarkColorScheme = darkColorScheme(
    primary = md_theme_dark_primary,
    onPrimary = md_theme_dark_onPrimary,
    primaryContainer = md_theme_dark_primaryContainer,
    // ..
)

@Composable
fun ReplyTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    content: @Composable () -> Unit
) {
    val colorScheme =
        if (!darkTheme) {
            LightColorScheme
        } else {
            DarkColorScheme
        }
    MaterialTheme(
        colorScheme = colorScheme,
        content = content
    )
}https://github.com/android/snippets/blob/95aeebd507b29719a9e7d5a839f101bbbe42ea72/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt#L110-L138
```

<br />

To support light and dark themes, use`isSystemInDarkTheme()`. Based on the system setting, define which color scheme to use: light or dark.

#### Dynamic color schemes

[Dynamic color](https://m3.material.io/styles/color/dynamic-color/overview)is the key part of Material You, in which an algorithm derives custom colors from a user's wallpaper to be applied to their apps and system UI. This color palette is used as the starting point to generate light and dark color schemes.
![Reply sample app dynamic theming from wallpaper (left) and default app theming (right)](https://developer.android.com/static/develop/ui/compose/images/m3-dynamic.png)**Figure 4**. Reply sample app dynamic theming from wallpaper (left) and default app theming (right)

Dynamic color is available on Android 12 and above. If dynamic color is available, you can set up a dynamic`ColorScheme`. If not, you should fall back to using a custom light or dark`ColorScheme`.

`ColorScheme`provides builder functions to create a dynamic[light](https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#dynamiclightcolorscheme)or[dark](https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#dynamicdarkcolorscheme)color scheme:

<br />

```kotlin
// Dynamic color is available on Android 12+
val dynamicColor = Build.VERSION.SDK_INT >= Build.VERSION_CODES.S
val colors = when {
    dynamicColor && darkTheme -> dynamicDarkColorScheme(LocalContext.current)
    dynamicColor && !darkTheme -> dynamicLightColorScheme(LocalContext.current)
    darkTheme -> DarkColorScheme
    else -> LightColorScheme
}https://github.com/android/snippets/blob/95aeebd507b29719a9e7d5a839f101bbbe42ea72/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt#L144-L151
```

<br />

#### Color usage

You can access Material theme colors in your app via`MaterialTheme.colorScheme`:

<br />

```kotlin
Text(
    text = "Hello theming",
    color = MaterialTheme.colorScheme.primary
)https://github.com/android/snippets/blob/95aeebd507b29719a9e7d5a839f101bbbe42ea72/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt#L158-L161
```

<br />

Each color role can be used in a variety of places depending on the component's state, prominence, and emphasis.

- Primary is the base color, used for main components like prominent buttons, active states, and the tint of elevated surfaces.
- The secondary key color is used for less prominent components in the UI, such as filter chips, and expands the opportunity for color expression.
- The tertiary key color is used to derive the roles of contrasting accents that can be used to balance primary and secondary colors or bring enhanced attention to an element.

The Reply sample app design uses on-primary-container color on top of primary-container to put emphasis on the selected item.
![Primary container and text fields with on-primary-container color.](https://developer.android.com/static/develop/ui/compose/images/m3-container.png)**Figure 5**. Primary container and text fields with on-primary-container color.

<br />

```kotlin
Card(
    colors = CardDefaults.cardColors(
        containerColor =
        if (isSelected) MaterialTheme.colorScheme.primaryContainer
        else
            MaterialTheme.colorScheme.surfaceVariant
    )
) {
    Text(
        text = "Dinner club",
        style = MaterialTheme.typography.bodyLarge,
        color =
        if (isSelected) MaterialTheme.colorScheme.onPrimaryContainer
        else MaterialTheme.colorScheme.onSurface,
    )
}
https://github.com/android/snippets/blob/95aeebd507b29719a9e7d5a839f101bbbe42ea72/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt#L171-L187
```

<br />

Here you can see in the Reply Navigation drawer how secondary and tertiary container colors are used in contrast to create emphasis and accent.
![Tertiary-container and on-tertiary-container combination for Floating Action button.](https://developer.android.com/static/develop/ui/compose/images/m3-navdrawer.png)**Figure 6**. Tertiary-container and on-tertiary-container combination for Floating Action button.

### Typography

Material Design 3 defines a[type scale](https://m3.material.io/styles/typography/overview), including text styles that have been adapted from Material Design 2. The naming and grouping have been simplified to: display, headline, title, body, and label, with large, medium, and small sizes for each.
![Default typography scale for Material design 3](https://developer.android.com/static/develop/ui/compose/images/m3-typography.png)**Figure 7**. Default typography scale for Material Design 3

|------------------|-----------------------------------|
| **M3**           | **Default Font Size/Line Height** |
| `displayLarge`   | `Roboto 57/64`                    |
| `displayMedium`  | `Roboto 45/52`                    |
| `displaySmall`   | `Roboto 36/44`                    |
| `headlineLarge`  | `Roboto 32/40`                    |
| `headlineMedium` | `Roboto 28/36`                    |
| `headlineSmall`  | `Roboto 24/32`                    |
| `titleLarge`     | `New- Roboto Medium 22/28`        |
| `titleMedium`    | `Roboto Medium 16/24`             |
| `titleSmall`     | `Roboto Medium 14/20`             |
| `bodyLarge`      | `Roboto 16/24`                    |
| `bodyMedium`     | `Roboto 14/20`                    |
| `bodySmall`      | `Roboto 12/16`                    |
| `labelLarge`     | `Roboto Medium 14/20`             |
| `labelMedium`    | `Roboto Medium 12/16`             |
| `labelSmall`     | `New Roboto Medium, 11/16`        |

| **Note:** Unlike the M2`Typography`class, the M3`Typography`class doesn't currently include a`defaultFontFamily`parameter. You'll need to use the`fontFamily`parameter in each of the individual`TextStyles`instead.

#### Define typography

Compose provides the M3[`Typography`](https://developer.android.com/reference/kotlin/androidx/compose/material3/Typography)class --- along with the existing[`TextStyle`](https://developer.android.com/reference/kotlin/androidx/compose/ui/text/TextStyle)and[font-related](https://developer.android.com/reference/kotlin/androidx/compose/ui/text/font/package-summary)classes --- to model the Material 3 type scale. The`Typography`constructor offers defaults for each style so you can omit any parameters you do not want to customize:

<br />

```kotlin
val replyTypography = Typography(
    titleLarge = TextStyle(
        fontWeight = FontWeight.SemiBold,
        fontSize = 22.sp,
        lineHeight = 28.sp,
        letterSpacing = 0.sp
    ),
    titleMedium = TextStyle(
        fontWeight = FontWeight.SemiBold,
        fontSize = 16.sp,
        lineHeight = 24.sp,
        letterSpacing = 0.15.sp
    ),
    // ..
)
// ..  
https://github.com/android/snippets/blob/95aeebd507b29719a9e7d5a839f101bbbe42ea72/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt#L194-L209
```

<br />

![Body large, body medium and label medium for different typography usage.](https://developer.android.com/static/develop/ui/compose/images/m3-body.png)**Figure 8**. Body large, body medium, and label medium for different typography usage.

Your product will likely not need all 15 default styles from the Material Design type scale. In this example, five sizes are chosen for a reduced set while the rest are omitted.

You can customize your typography by changing default values of[`TextStyle`](https://developer.android.com/reference/kotlin/androidx/compose/ui/text/TextStyle)and[font-related](https://developer.android.com/reference/kotlin/androidx/compose/ui/text/font/package-summary)properties like`fontFamily`and`letterSpacing`.

<br />

```kotlin
bodyLarge = TextStyle(
    fontWeight = FontWeight.Normal,
    fontFamily = FontFamily.SansSerif,
    fontStyle = FontStyle.Italic,
    fontSize = 16.sp,
    lineHeight = 24.sp,
    letterSpacing = 0.15.sp,
    baselineShift = BaselineShift.Subscript
),https://github.com/android/snippets/blob/95aeebd507b29719a9e7d5a839f101bbbe42ea72/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt#L214-L222
```

<br />

Once you have defined your`Typography`, pass it to the M3`MaterialTheme`:

<br />

```kotlin
MaterialTheme(
    typography = replyTypography,
) {
    // M3 app Content
}https://github.com/android/snippets/blob/95aeebd507b29719a9e7d5a839f101bbbe42ea72/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt#L229-L233
```

<br />

#### Use text styles

You can retrieve the typography provided to the M3`MaterialTheme`composable by using`MaterialTheme.typography`:

<br />

```kotlin
Text(
    text = "Hello M3 theming",
    style = MaterialTheme.typography.titleLarge
)
Text(
    text = "you are learning typography",
    style = MaterialTheme.typography.bodyMedium
)https://github.com/android/snippets/blob/95aeebd507b29719a9e7d5a839f101bbbe42ea72/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt#L240-L247
```

<br />

You can read more about the Material guidelines on[applying typography](https://m3.material.io/styles/typography/applying-type).

### Shapes

Material surfaces can be displayed in different shapes. Shapes direct attention, identify components, communicate state, and express brand.

The shape scale defines the style of container corners, offering a range of roundedness from square to fully circular.

#### Define shapes

Compose provides the M3[`Shapes`](https://developer.android.com/reference/kotlin/androidx/compose/material3/Shapes)class with expanded parameters to support new M3 shapes. The M3 shape scale is more like the[type scale](https://m3.material.io/styles/typography/), enabling an expressive range of shapes across the UI.

There are different sizes of shapes:

- Extra Small
- Small
- Medium
- Large
- Extra Large

By default, each shape has a default value, but you can override those:

<br />

```kotlin
val replyShapes = Shapes(
    extraSmall = RoundedCornerShape(4.dp),
    small = RoundedCornerShape(8.dp),
    medium = RoundedCornerShape(12.dp),
    large = RoundedCornerShape(16.dp),
    extraLarge = RoundedCornerShape(24.dp)
)https://github.com/android/snippets/blob/95aeebd507b29719a9e7d5a839f101bbbe42ea72/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt#L254-L260
```

<br />

Once you have defined your`Shapes`, you can pass it to the M3`MaterialTheme`:

<br />

```kotlin
MaterialTheme(
    shapes = replyShapes,
) {
    // M3 app Content
}https://github.com/android/snippets/blob/95aeebd507b29719a9e7d5a839f101bbbe42ea72/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt#L266-L270
```

<br />

#### Use shapes

You can customize the shape scale for all components in the`MaterialTheme`or you can do it on a per component basis.

Apply medium and large shape with default values:

<br />

```kotlin
Card(shape = MaterialTheme.shapes.medium) { /* card content */ }
FloatingActionButton(
    shape = MaterialTheme.shapes.large,
    onClick = {
    }
) {
    /* fab content */
}https://github.com/android/snippets/blob/95aeebd507b29719a9e7d5a839f101bbbe42ea72/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt#L277-L284
```

<br />

![Medium shape for Card and Large shape for Floating action button in Reply sample app.](https://developer.android.com/static/develop/ui/compose/images/m3-shape.png)**Figure 9**. Medium shape for Card and Large shape for Floating action button in Reply sample app

There are two other shapes ---`RectangleShape`and`CircleShape`--- which are part of Compose. Rectangle shape is with no border radius and circle shape shows full circled edges:

<br />

```kotlin
Card(shape = RectangleShape) { /* card content */ }
Card(shape = CircleShape) { /* card content */ }https://github.com/android/snippets/blob/95aeebd507b29719a9e7d5a839f101bbbe42ea72/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt#L290-L291
```

<br />

The examples below demonstrate some of the components with default shape values applied to them:
![Default shapes values for all Material 3 components.](https://developer.android.com/static/develop/ui/compose/images/m3-shape2.png)**Figure 10**. Default shapes values for all Material 3 components.

You can read more about the Material guidelines on[applying shape](https://m3.material.io/styles/shape/overview).

### Emphasis

Emphasis in M3 is provided using variations of color and its on-color combinations. In M3, there are two ways to add emphasis to your UI:

- Using surface, surface-variant and background alongside on-surface, on-surface-variants colors from the expanded M3 color system. For example, surface can be used with on-surface-variant and surface-variant can be used with on-surface to provide different levels of emphasis.

![Using neutral color combinations for emphasis.](https://developer.android.com/static/develop/ui/compose/images/m3-emphasis.png)**Figure 11**. Using neutral color combinations for emphasis.

- Using different font weights for text. Above, you saw that you can provide custom weights to our type scale for providing different emphasis.

<br />

```kotlin
bodyLarge = TextStyle(
    fontWeight = FontWeight.Bold
),
bodyMedium = TextStyle(
    fontWeight = FontWeight.Normal
)https://github.com/android/snippets/blob/95aeebd507b29719a9e7d5a839f101bbbe42ea72/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt#L299-L304
```

<br />

| **Note:** For disabled states in M3, it's still acceptable to use "on-x" (where x can be primary, secondary, surface etc.) colors with alpha values.

## Elevation

Material 3 represents elevation mainly using tonal color overlays. This is a new way to differentiate containers and surfaces from each other --- increasing tonal elevation uses a more prominent tone --- in addition to shadows.
![Tonal elevation with shadow elevation](https://developer.android.com/static/develop/ui/compose/images/m3-elevation.png)**Figure 12**. Tonal elevation with shadow elevationE

Elevation overlays in dark themes have also changed to tonal color overlays in Material 3. The overlay color comes from the primary color slot.
![Shadow elevation vs Tonal elevation in Material Design 3](https://developer.android.com/static/develop/ui/compose/images/m3-surface.png)**Figure 13**. Shadow elevation versus Tonal elevation in Material Design 3

The M3[Surface](https://developer.android.com/reference/kotlin/androidx/compose/material/package-summary#Surface(androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.foundation.BorderStroke,androidx.compose.ui.unit.Dp,kotlin.Function0))--- the backing composable behind most M3 components --- includes support for both tonal and shadow elevation:

<br />

```kotlin
Surface(
    modifier = Modifier,
    tonalElevation = /*...
    shadowElevation = /*...
) {
    Column(content = content)
}https://github.com/android/snippets/blob/95aeebd507b29719a9e7d5a839f101bbbe42ea72/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt#L311-L317
```

<br />

## Material components

Material Design comes with a rich set of[Material components](https://m3.material.io/components/all-buttons)(such as buttons, chips, cards, navigation bar) which already follow Material Theming and help you make beautiful Material Design apps. You can start using components with default properties right out of the box.

<br />

```kotlin
Button(onClick = { /*..*/ }) {
    Text(text = "My Button")
}https://github.com/android/snippets/blob/95aeebd507b29719a9e7d5a839f101bbbe42ea72/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt#L325-L327
```

<br />

M3 provides many versions of the same components to be used in different roles according to emphasis and attention.
![Button emphasis from FAB, Primary down to Text button](https://developer.android.com/static/develop/ui/compose/images/m3-emphasis2.png)**Figure 14**. Button emphasis from FAB, Primary down to Text button

- An extended floating action button for the highest emphasis action:

<br />

```kotlin
ExtendedFloatingActionButton(
    onClick = { /*..*/ },
    modifier = Modifier
) {
    Icon(
        imageVector = Icons.Default.Edit,
        contentDescription = stringResource(id = R.string.edit),
    )
    Text(
        text = stringResource(id = R.string.add_entry),
    )
}https://github.com/android/snippets/blob/95aeebd507b29719a9e7d5a839f101bbbe42ea72/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt#L334-L345
```

<br />

- A filled button for a high emphasis action:

<br />

```kotlin
Button(onClick = { /*..*/ }) {
    Text(text = stringResource(id = R.string.view_entry))
}https://github.com/android/snippets/blob/95aeebd507b29719a9e7d5a839f101bbbe42ea72/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt#L351-L353
```

<br />

- A text button for a low emphasis action:

<br />

```kotlin
TextButton(onClick = { /*..*/ }) {
    Text(text = stringResource(id = R.string.replated_articles))
}https://github.com/android/snippets/blob/95aeebd507b29719a9e7d5a839f101bbbe42ea72/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt#L359-L361
```

<br />

You can read more about Material[buttons and other components](https://m3.material.io/components/all-buttons). Material 3 provides a wide variety of component suites such as Buttons, App bars, Navigation components that are specifically designed for different use cases and screen sizes.

### Navigation components

Material also provides several navigation components that help you implement navigation, depending on different screen sizes and states.

`NavigationBar`is used for compact devices when you want to target 5 or less destinations:

<br />

```kotlin
NavigationBar(modifier = Modifier.fillMaxWidth()) {
    Destinations.entries.forEach { replyDestination ->
        NavigationBarItem(
            selected = selectedDestination == replyDestination,
            onClick = { },
            icon = { }
        )
    }
}https://github.com/android/snippets/blob/95aeebd507b29719a9e7d5a839f101bbbe42ea72/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt#L376-L384
```

<br />

`NavigationRail`is used for small-to-medium size tablets or phones in landscape mode. It provides ergonomics to users and improves the user experience for those devices.

<br />

```kotlin
NavigationRail(
    modifier = Modifier.fillMaxHeight(),
) {
    Destinations.entries.forEach { replyDestination ->
        NavigationRailItem(
            selected = selectedDestination == replyDestination,
            onClick = { },
            icon = { }
        )
    }
}https://github.com/android/snippets/blob/95aeebd507b29719a9e7d5a839f101bbbe42ea72/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt#L393-L403
```

<br />

![Reply Showcase of BottomNavigationBar(Left) and NavigationRail(Right)](https://developer.android.com/static/develop/ui/compose/images/m3-showcasebottom.png)**Figure 15** . Reply Showcase of`BottomNavigationBar`(Left) and`NavigationRail`(Right)

Reply using both in default theming to provide immersive user experience for all device sizes.

`NavigationDrawer`is used for medium-to-large size tablets where you have enough space to show detail. You can use both`PermanentNavigationDrawer`or`ModalNavigationDrawer`along with`NavigationRail`.

<br />

```kotlin
PermanentNavigationDrawer(modifier = Modifier.fillMaxHeight(), drawerContent = {
    Destinations.entries.forEach { replyDestination ->
        NavigationRailItem(
            selected = selectedDestination == replyDestination,
            onClick = { },
            icon = { },
            label = { }
        )
    }
}) {
}https://github.com/android/snippets/blob/95aeebd507b29719a9e7d5a839f101bbbe42ea72/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt#L412-L422
```

<br />

![Reply Showcase of Permanent navigation drawer](https://developer.android.com/static/develop/ui/compose/images/m3-showcasedrawer.png)**Figure 16**. Reply showcase of permanent navigation drawer

Navigation options enhance the user experience, ergonomics and reachability. You can learn more about Material navigation components in the[Compose adaptive codelab](https://codelabs.developers.google.com/jetpack-compose-adaptability).

### Customize a component's theming

M3 encourages personalization and flexibility. All components have default colors applied to them but expose flexible APIs to customize their colors if required.

Most components, like cards and buttons, provide a default object exposing color and elevation interfaces that can be modified to customize your component:

<br />

```kotlin
val customCardColors = CardDefaults.cardColors(
    contentColor = MaterialTheme.colorScheme.primary,
    containerColor = MaterialTheme.colorScheme.primaryContainer,
    disabledContentColor = MaterialTheme.colorScheme.surface,
    disabledContainerColor = MaterialTheme.colorScheme.onSurface,
)
val customCardElevation = CardDefaults.cardElevation(
    defaultElevation = 8.dp,
    pressedElevation = 2.dp,
    focusedElevation = 4.dp
)
Card(
    colors = customCardColors,
    elevation = customCardElevation
) {
    // m3 card content
}https://github.com/android/snippets/blob/95aeebd507b29719a9e7d5a839f101bbbe42ea72/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt#L429-L445
```

<br />

You can read more about[customizing Material 3](https://m3.material.io/foundations/customization).

## System UI

Some aspects of Material You come from the new visual style and system UI on Android 12 and above. Two key areas where there are changes are ripple and overscroll. No additional work is required to implement these changes.

### Ripple

Ripple now uses a subtle sparkle to illuminate surfaces when pressed.[Compose Material Ripple](https://developer.android.com/reference/kotlin/androidx/compose/material/ripple/package-summary)uses a platform RippleDrawable under the hood on Android, so sparkle ripple is available on Android 12 and above for all Material components.
![Ripple in M2 vs M3](https://developer.android.com/static/develop/ui/compose/images/m3-ripple.gif)**Figure 17**. Ripple in M2 versus M3

### Overscroll

Overscroll now uses a[stretch effect](https://developer.android.com/about/versions/12/behavior-changes-all#overscroll)at the edge of scrolling containers. Stretch overscroll is on by default in scrolling container composables --- for example,[`LazyColumn`](https://developer.android.com/reference/kotlin/androidx/compose/foundation/lazy/package-summary#lazycolumn),[`LazyRow`](https://developer.android.com/reference/kotlin/androidx/compose/foundation/lazy/package-summary#lazyrow), and[`LazyVerticalGrid`](https://developer.android.com/reference/kotlin/androidx/compose/foundation/lazy/package-summary#lazyverticalgrid)--- in[Compose Foundation](https://developer.android.com/jetpack/androidx/releases/compose-foundation)1.1.0 and above, regardless of API level.
![Overscroll using stretch effect at the edge of the container](https://developer.android.com/static/develop/ui/compose/images/m3-overscroll.gif)**Figure 18**. Overscroll using stretch effect at the edge of the container

## Accessibility

Accessibility standards built into Material components are designed to provide a foundation for inclusive product design. Understanding your product's accessibility can enhance usability for all users, including those with low vision, blindness, hearing impairments, cognitive impairments, motor impairments, or situational disabilities (such as a broken arm).

### Color accessibility

Dynamic color is designed to meet accessibility standards for color contrast. The system of tonal palettes is critical to making any color scheme accessible by default.

Material's color system provides standard tone values and measurements that can be used to meet accessible contrast ratios.
![Reply sample app: Primary, secondary and tertiary tonal pallets (top to bottom)](https://developer.android.com/static/develop/ui/compose/images/m3-colorpallets.png)**Figure 19**. Reply sample app: Primary, secondary and tertiary tonal palettes (top to bottom)

All Material components and dynamic theming already use the above color roles from a set of[tonal palettes](https://m3.material.io/styles/color/the-color-system/key-colors-tones#a828e350-1551-45e5-8430-eb643e6a7713), selected to meet accessibility requirements. However, if you are customizing components, make sure to use appropriate color roles and avoid mismatch.

Use on-primary on top of primary, and on-primary-container on top of primary-container, and the same for other accent and neutral colors to provide accessible contrast to the user.

The use of a tertiary container on top of primary gives the user a poor contrast button:

<br />

```kotlin
// ✅ Button with sufficient contrast ratio
Button(
    onClick = { },
    colors = ButtonDefaults.buttonColors(
        containerColor = MaterialTheme.colorScheme.primary,
        contentColor = MaterialTheme.colorScheme.onPrimary
    )
) {
}

// ❌ Button with poor contrast ratio
Button(
    onClick = { },
    colors = ButtonDefaults.buttonColors(
        containerColor = MaterialTheme.colorScheme.tertiaryContainer,
        contentColor = MaterialTheme.colorScheme.primaryContainer
    )
) {
}https://github.com/android/snippets/blob/95aeebd507b29719a9e7d5a839f101bbbe42ea72/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt#L454-L472
```

<br />

![Sufficient contrast (left) vs Poor contrast (right)](https://developer.android.com/static/develop/ui/compose/images/m3-contrast.png)**Figure 20**. Sufficient contrast (left) versus poor contrast (right)

### Typography accessibility

The M3 type scale updates the static type ramp and values to offer a simplified but dynamic framework of size categories that scale across devices.

For example, in M3, Display Small can be assigned different values depending upon the device context, such as a phone or a tablet.

## Large screens

Material provides guidance on adaptive layouts and foldables to make your apps accessible and improve the ergonomics of users holding large devices.

Material provides different kinds of[navigation](https://m3.material.io/components/navigation-bar/overview)to help you provide better user experience for large devices.

You can learn more about Android[large screen app quality guidelines](https://developer.android.com/docs/quality-guidelines/large-screen-app-quality)and see our[Reply sample](https://github.com/android/compose-samples/tree/main/Reply)for adaptive and accessible design.

## Learn more

To learn more about Material Theming in Compose, check out the following resources:

### Sample apps

- [Reply M3 sample app](https://github.com/android/compose-samples/tree/main/Reply)

### Docs

- [Migrating from Material 2 to Material 3 in Compose](https://developer.android.com/develop/ui/compose/designsystems/material2-material3)
- [Material design guidelines](https://m3.material.io/)

### API reference and source code

- [Compose Material 3 API reference](https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary)
- [Compose Material 3 samples in source code](https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/material3/material3/samples/src/main/java/androidx/compose/material3/samples/)

### Videos

- [Material You in Jetpack Compose](https://www.youtube.com/watch?v=jrfuHyMlehc)

## Recommended for you

- Note: link text is displayed when JavaScript is off
- [Migrate from Material 2 to Material 3 in Compose](https://developer.android.com/develop/ui/compose/designsystems/material2-material3)
- [Material Design 2 in Compose](https://developer.android.com/develop/ui/compose/designsystems/material)
- [Custom design systems in Compose](https://developer.android.com/develop/ui/compose/designsystems/custom)