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 |
MaterialContextualTopAppBar |
M3 convenience — provides TopAppBar with primaryContainer colors for contextual state |
ContextualTopAppBarDefaults |
Default colors and animation specs |
Copyright 2026 Adit Lal
Licensed under the Apache License, Version 2.0
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 |
MaterialContextualTopAppBar |
M3 convenience — provides TopAppBar with primaryContainer colors for contextual state |
ContextualTopAppBarDefaults |
Default colors and animation specs |
Copyright 2026 Adit Lal
Licensed under the Apache License, Version 2.0