Material 3

Material 3 in Compose

Material 3 (Material You) is the latest version of Google's design system. Compose provides first-class Material 3 components through the material3 artifact. These components handle their own state, accessibility, and theming.

Buttons

@Composable
fun ButtonExamples() {
    Column(verticalArrangement = Arrangement.spacedBy(8.dp)) {
        // Filled button (primary action)
        Button(onClick = { /* handle click */ }) {
            Text("Filled Button")
        }

        // Outlined button (secondary action)
        OutlinedButton(onClick = { /* handle click */ }) {
            Text("Outlined Button")
        }

        // Text button (tertiary action)
        TextButton(onClick = { /* handle click */ }) {
            Text("Text Button")
        }

        // Icon button
        IconButton(onClick = { /* handle click */ }) {
            Icon(
                imageVector = Icons.Default.Favorite,
                contentDescription = "Favorite"
            )
        }

        // Extended FAB
        ExtendedFloatingActionButton(
            onClick = { /* handle click */ },
            icon = { Icon(Icons.Default.Add, contentDescription = null) },
            text = { Text("Add Item") }
        )
    }
}

Cards

@Composable
fun ProductCard(product: Product) {
    Card(
        modifier = Modifier.fillMaxWidth(),
        onClick = { /* navigate to detail */ }
    ) {
        Column(modifier = Modifier.padding(16.dp)) {
            AsyncImage(
                model = product.imageUrl,
                contentDescription = product.name,
                modifier = Modifier
                    .fillMaxWidth()
                    .height(200.dp)
                    .clip(RoundedCornerShape(12.dp))
            )
            Spacer(modifier = Modifier.height(12.dp))
            Text(text = product.name, style = MaterialTheme.typography.titleMedium)
            Text(text = product.price, style = MaterialTheme.typography.bodyMedium)
        }
    }
}

Three card variants:

• Card() -- filled background
• OutlinedCard() -- outlined border
• ElevatedCard() -- elevated with shadow

TopAppBar

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun ScreenWithTopBar() {
    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text("My App") },
                navigationIcon = {
                    IconButton(onClick = { /* back */ }) {
                        Icon(Icons.AutoMirrored.Filled.ArrowBack, contentDescription = "Back")
                    }
                },
                actions = {
                    IconButton(onClick = { /* search */ }) {
                        Icon(Icons.Default.Search, contentDescription = "Search")
                    }
                    IconButton(onClick = { /* settings */ }) {
                        Icon(Icons.Default.Settings, contentDescription = "Settings")
                    }
                }
            )
        }
    ) { padding ->
        // Screen content with padding from Scaffold
        Column(modifier = Modifier.padding(padding)) {
            Text("Content goes here")
        }
    }
}

TextFields

@Composable
fun SearchBar() {
    var query by remember { mutableStateOf("") }

    OutlinedTextField(
        value = query,
        onValueChange = { query = it },
        label = { Text("Search") },
        leadingIcon = { Icon(Icons.Default.Search, contentDescription = null) },
        trailingIcon = {
            if (query.isNotEmpty()) {
                IconButton(onClick = { query = "" }) {
                    Icon(Icons.Default.Clear, contentDescription = "Clear")
                }
            }
        },
        singleLine = true,
        modifier = Modifier.fillMaxWidth()
    )
}

Scaffold

Scaffold provides the basic Material layout structure. It positions the top bar, bottom bar, FAB, drawer, and content area.

@Composable
fun MainScreen() {
    var selectedTab by remember { mutableIntStateOf(0) }

    Scaffold(
        topBar = {
            TopAppBar(title = { Text("My App") })
        },
        bottomBar = {
            NavigationBar {
                NavigationBarItem(
                    selected = selectedTab == 0,
                    onClick = { selectedTab = 0 },
                    icon = { Icon(Icons.Default.Home, contentDescription = null) },
                    label = { Text("Home") }
                )
                NavigationBarItem(
                    selected = selectedTab == 1,
                    onClick = { selectedTab = 1 },
                    icon = { Icon(Icons.Default.Search, contentDescription = null) },
                    label = { Text("Search") }
                )
                NavigationBarItem(
                    selected = selectedTab == 2,
                    onClick = { selectedTab = 2 },
                    icon = { Icon(Icons.Default.Person, contentDescription = null) },
                    label = { Text("Profile") }
                )
            }
        }
    ) { padding ->
        when (selectedTab) {
            0 -> HomeContent(modifier = Modifier.padding(padding))
            1 -> SearchContent(modifier = Modifier.padding(padding))
            2 -> ProfileContent(modifier = Modifier.padding(padding))
        }
    }
}

NavigationBar vs BottomNavigation

Material 3 uses NavigationBar (replacing the deprecated BottomNavigation). Key differences:

• NavigationBar supports three to five items
• Uses NavigationBarItem with icons and labels
• Follows Material 3 color scheme

BottomSheet

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun SheetScreen() {
    val sheetState = rememberModalBottomSheetState()
    var showSheet by remember { mutableStateOf(false) }

    Scaffold { padding ->
        Box(modifier = Modifier.padding(padding)) {
            Button(onClick = { showSheet = true }) {
                Text("Show Sheet")
            }
        }
    }

    if (showSheet) {
        ModalBottomSheet(
            onDismissRequest = { showSheet = false },
            sheetState = sheetState
        ) {
            Column(modifier = Modifier.padding(16.dp)) {
                Text("Sheet Content", style = MaterialTheme.typography.titleLarge)
                Spacer(modifier = Modifier.height(16.dp))
                Text("This is a modal bottom sheet.")
            }
        }
    }
}

Dialogs

@Composable
fun ConfirmDialog(
    title: String,
    message: String,
    onConfirm: () -> Unit,
    onDismiss: () -> Unit
) {
    AlertDialog(
        onDismissRequest = onDismiss,
        title = { Text(title) },
        text = { Text(message) },
        confirmButton = {
            TextButton(onClick = onConfirm) {
                Text("Confirm")
            }
        },
        dismissButton = {
            TextButton(onClick = onDismiss) {
                Text("Cancel")
            }
        }
    )
}

Color Scheme

Material 3 uses a dynamic color system derived from the user's wallpaper (on Android 12+). You define a color scheme with primary, secondary, tertiary, and surface colors.

// Define custom colors
val md_theme_light_primary = Color(0xFF6750A4)
val md_theme_light_onPrimary = Color(0xFFFFFFFF)
val md_theme_light_secondary = Color(0xFF625B71)
val md_theme_light_surface = Color(0xFFFFFBFE)

private val LightColorScheme = lightColorScheme(
    primary = md_theme_light_primary,
    onPrimary = md_theme_light_onPrimary,
    secondary = md_theme_light_secondary,
    surface = md_theme_light_surface
)

private val DarkColorScheme = darkColorScheme(
    primary = Color(0xFFD0BCFF),
    onPrimary = Color(0xFF381E72),
    secondary = Color(0xFFCCC2DC),
    surface = Color(0xFF1C1B1F)
)

Typography

val AppTypography = Typography(
    displayLarge = TextStyle(
        fontWeight = FontWeight.Normal,
        fontSize = 57.sp,
        lineHeight = 64.sp
    ),
    titleLarge = TextStyle(
        fontWeight = FontWeight.SemiBold,
        fontSize = 22.sp,
        lineHeight = 28.sp
    ),
    bodyLarge = TextStyle(
        fontWeight = FontWeight.Normal,
        fontSize = 16.sp,
        lineHeight = 24.sp
    )
)

Applying the Theme

@Composable
fun AmazonPrepTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    dynamicColor: Boolean = true,
    content: @Composable () -> Unit
) {
    val colorScheme = when {
        dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> {
            val context = LocalContext.current
            if (darkTheme) dynamicDarkColorScheme(context)
            else dynamicLightColorScheme(context)
        }
        darkTheme -> DarkColorScheme
        else -> LightColorScheme
    }

    MaterialTheme(
        colorScheme = colorScheme,
        typography = AppTypography,
        content = content
    )
}

// Usage in Activity
setContent {
    AmazonPrepTheme {
        MainScreen()
    }
}

Dynamic Color

On Android 12+, dynamicLightColorScheme and dynamicDarkColorScheme extract colors from the user's wallpaper. This gives each user a unique, personalized theme. The when block above falls back to your custom scheme on older devices.

Using Theme Values

Access theme values through MaterialTheme:

@Composable
fun ThemedText() {
    Text(
        text = "Themed text",
        color = MaterialTheme.colorScheme.primary,
        style = MaterialTheme.typography.titleLarge
    )
}