Animated contextual top app bar with smooth crossfade showing selection count and contextual actions; back press exits selection, supports custom animations, Material 3 primary-container colors, full customization.
Animated contextual top app bar for Compose Multiplatform — the Gmail/Photos/Files multi-select pattern that Material 3 never shipped.
When users long-press to select items, the top bar smoothly crossfades to show selection count and contextual actions (delete, share, archive). Back press exits selection mode.
// build.gradle.kts
kotlin {
sourceSets {
commonMain.dependencies {
implementation("io.github.aldefy:contextual-appbar:<version>")
}
}
}
MaterialContextualTopAppBar(
selectedCount = selectedIds.size,
onClearSelection = { selectedIds = emptySet() },
contextualNavigationIcon = {
IconButton(onClick = { selectedIds = emptySet() }) {
Icon(Icons.Default.Close, contentDescription = "Clear")
}
},
contextualActions = {
IconButton(onClick = { /* delete */ }) {
Icon(Icons.Default.Delete, contentDescription = "Delete")
}
IconButton(onClick = { /* share */ }) {
Icon(Icons.Default.Share, contentDescription = "Share")
}
},
defaultBar = {
TopAppBar(title = { Text("My App") })
},
)
ContextualTopAppBar(
selectedCount = selectedIds.size,
onClearSelection = { selectedIds = emptySet() },
contextualContent = { count ->
// Your completely custom contextual bar
MyCustomContextualBar(count)
},
defaultContent = {
// Your normal bar
TopAppBar(title = { Text("My App") })
},
)
| Component | Purpose |
|---|---|
ContextualTopAppBar | Raw wrapper — crossfades between any two composables based on selection count |
Copyright 2026 Adit Lal
Licensed under the Apache License, Version 2.0
MaterialContextualTopAppBar | M3 convenience — provides TopAppBar with primaryContainer colors for contextual state |
ContextualTopAppBarDefaults | Default colors and animation specs |
Surfaced from shared tags and platforms — no rankings paid for.