Material3 ‐ BottomAppBar

Contents
Observation
Demo representation
Code

Observation

• 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.

Demo representation

Light Theme	Dark Theme

Code

@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)
            ) {

            }
        }

    }
}