Material 3 Components

Material 3 Components in Compose

The material3 library provides the building blocks of a Material screen as ready-made composables: Scaffold with top bar, bottom bar and floating action button slots, TopAppBar, Button in filled, tonal, outlined and text variants, Card, FilterChip, Switch, Badge, NavigationBar, dialogs, sheets and snackbars. None of them hard-codes a color. Each reads a role from MaterialTheme.colorScheme, such as primary for a filled button or secondaryContainer for a selected chip, so one theme restyles them all. BookNest's theme gallery puts the common ones on one screen, with a row of FilterChips, two BookCards, a Switch and an ExtendedFloatingActionButton besides what this excerpt shows:

ui/ThemeGallery.kt: Material 3 components that read the theme (excerpt)Kotlin

  Scaffold(
    topBar = {
      TopAppBar(
        title = { Text("BookNest") },
        colors = TopAppBarDefaults.topAppBarColors(containerColor = colors.primaryContainer),
        actions = {
          BadgedBox(badge = { Badge { Text("2") } }, Modifier.padding(end = 16.dp)) {
            Icon(Icons.Filled.ShoppingCart, contentDescription = "Cart, 2 books")
          }
        },
      )
    },
    ...
      Row(horizontalArrangement = Arrangement.spacedBy(8.dp)) {
        Button(onClick = {}) { Text("Buy") }
        FilledTonalButton(onClick = {}) { Text("Sample") }
        OutlinedButton(onClick = {}) { Text("Wish list") }
      }

Where a component's default role is not what you want, its *Defaults object takes overrides, as topAppBarColors does here, rather than Modifier.background, which paints behind the component and breaks when the theme changes. TopAppBar is still @ExperimentalMaterial3Api, hence an @OptIn. Material 2 (androidx.compose.material) still ships and fills older tutorials; its components read their own theme and ignore Material 3 15,533 's, so don't mix the two.

MENU