Create a dynamic top app bar

This guide explains how to create a dynamic top app bar in Compose that changes its options when items are selected from the list. You can modify the top app bar's title and actions based on the selection state.

Implement dynamic top app bar behavior

This code defines a composable function for the top app bar that changes based on item selection:

@Composable
funAppBarSelectionActions(
selectedItems:Set<Int>,
modifier:Modifier=Modifier,
){
valhasSelection=selectedItems.isNotEmpty()
valtopBarText=if(hasSelection){
"Selected ${selectedItems.size} items"
}else{
"List of items"
}
TopAppBar(
title={
Text(topBarText)
},
colors=TopAppBarDefaults.topAppBarColors(
containerColor=MaterialTheme.colorScheme.primaryContainer,
titleContentColor=MaterialTheme.colorScheme.primary,
),
actions={
if(hasSelection){
IconButton(onClick={
/* click action */
}){
Icon(
imageVector=Icons.Filled.Share,
contentDescription="Share items"
)
}
}
},
modifier=modifier
)
}
AppBar.kt 

Key points about the code

• AppBarSelectionActions accepts a Set of selected item indexes.
• The topBarText changes depending on whether you select any items.
  • When you select items, text describing the number of items selected appears in the TopAppBar.
  • If you don't select any items, the topBarText is "List of items".
• The actions block defines the actions you display in the top app bar. If hasSelection is true, a share icon appears after the text.
• The onClick lambda of the IconButton handles the share action when you click the icon.

Result

Integrate selectable list into dynamic top app bar

This example demonstrates how to add a selectable list to a dynamic top app bar:

@Composable
privatefunAppBarMultiSelectionExample(
modifier:Modifier=Modifier,
){
vallistItemsbyremember{mutableStateOf(listOf(1,2,3,4,5,6))}
varselectedItemsbyrememberSaveable{mutableStateOf(setOf<Int>())}
Scaffold(
modifier=modifier,
topBar={AppBarSelectionActions(selectedItems)}
){innerPadding->
LazyColumn(contentPadding=innerPadding){
itemsIndexed(listItems){_,index->
valisItemSelected=selectedItems.contains(index)
ListItemSelectable(
selected=isItemSelected,
Modifier
.combinedClickable(
interactionSource=remember{MutableInteractionSource()},
indication=null,
onClick={
/* click action */
},
onLongClick={
if(isItemSelected)selectedItems-=indexelseselectedItems+=index
}
)
)
}
}
}
}
AppBar.kt 

Key points about the code

• The top bar updates based on how many list items you select.
• selectedItems holds the set of selected item indexes.
• AppBarMultiSelectionExample uses a Scaffold to structure the screen.
  • topBar = { AppBarSelectionActions(selectedItems) } sets the AppBarSelectionActions composable as the top app bar. AppBarSelectionActions receives the selectedItems state.
• LazyColumn displays the items in a vertical list, rendering only the items visible on the screen.
• ListItemSelectable represents a selectable list item.
  • combinedClickable allows both click and long-click handling for item selection. A click performs an action, while long-clicking an item toggles its selection state.

Result

Additional resources

• TopAppBar
• LazyColumn
• Scaffold