Flexible top app bar in Compose

arrow_backsearchmore_vert

Inbox

12 unread · 3 starred

Large flexible app bar with a subtitle

MediumFlexibleTopAppBar and LargeFlexibleTopAppBar add a subtitle slot and titleHorizontalAlignment (start or centre). They collapse with the usual TopAppBarDefaults scroll behaviours.

@Composable
fun InboxScreen(items: List<String>, backIcon: ImageVector, onBack: () -> Unit) {
    val scrollBehavior = TopAppBarDefaults.exitUntilCollapsedScrollBehavior()
    Scaffold(
        modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
        topBar = {
            // Flexible app bars add a subtitle slot and centred or start-aligned titles.
            LargeFlexibleTopAppBar(
                title = { Text("Inbox") },
                subtitle = { Text("${items.size} unread") },
                navigationIcon = {
                    IconButton(onClick = onBack) { Icon(backIcon, contentDescription = "Back") }
                },
                scrollBehavior = scrollBehavior,
            )
        },
    ) { padding ->
        LazyColumn(contentPadding = padding) {
            items(items) { ListItem { Text(it) } }
        }
    }
}

Note the list uses ListItem { Text(it) }. In beta02, ListItem(headlineContent = …) is deprecated.

Related: floating toolbar · search

Want your agent to get this right every time? Install the skill. If this page helped,star the repo on GitHub.