Compose - Material

Material enables personal, adaptive, and expressive experiences – from dynamic color and enhanced accessibility, to foundations for large screen layouts and design tokens.

Material Design

Compose is built to support Material Design principles. Many of its UI elements implement Material Design out of the box.

(Tutorial)

Dependency

To start using Material 3 in your Compose app, add the Compose Material 3 dependency to your module.yaml file:

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

Experimental APIs

Some APIs are considered experimental. In such cases you need to opt in at the function or file level using the ExperimentalMaterial3Api annotation:

// import androidx.compose.material3.ExperimentalMaterial3Api
@Composable
fun AppComposable() {
    // M3 composables
}

Material theming

A Material theme contains the following subsystems: color scheme, typography and shapes. When you customize these values, your changes are automatically reflected in the M3 components you use to build your app.

Jetpack Compose implements these concepts with the MaterialTheme composable:

MaterialTheme(
    colorScheme = /* ...
    typography = /* ...
    shapes = /* ...
) {
    // M3 app content
}

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