- We use the
bottom app bar when we want to perform an action within the same screen
- If we want to open another screen on click of the icon then as per material guidelines, we need to use the Botton Navigation Bar
- Also if there are more than three actions, then the leftmost
Icon becomes a drop selection where we can add multiple selections.
Light Theme |
Dark Theme |
 |
 |
@Composable
fun ScreenContent(modifier: Modifier = Modifier) {
Column(
modifier = Modifier.fillMaxSize(),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally,
) {
val cxt = LocalContext.current
Scaffold(
modifier = Modifier.fillMaxSize(),
bottomBar = {
BottomAppBar(actions = {
IconButton(onClick = {
Toast.makeText(cxt, "Landscape icon selected", Toast.LENGTH_SHORT).show()
}) {
Icon(
imageVector = Icons.Default.Landscape,
contentDescription = "Landscape"
)
}
IconButton(onClick = {
Toast.makeText(cxt, "Layers icon selected", Toast.LENGTH_SHORT).show()
}) {
Icon(
imageVector = Icons.Default.Layers,
contentDescription = "Layers"
)
}
IconButton(onClick = {
Toast.makeText(cxt, "Dark Mode icon selected", Toast.LENGTH_SHORT).show()
}) {
Icon(
imageVector = Icons.Default.DarkMode,
contentDescription = "Dark Mode"
)
}
},
floatingActionButton = {
FloatingActionButton(onClick = {
Toast.makeText(cxt, "Add Clicked!", Toast.LENGTH_SHORT).show()
}) {
Icon(
imageVector = Icons.Default.AddCircle,
contentDescription = "Add clicked"
)
}
})
}
) {
Box(
modifier = Modifier.padding(it)
) {
}
}
}
}