Bottom App Bar in Jetpack Compose

The Bottom App Bar is a useful android jetpack compose library widget. The Bottom App Bar displays the bottom navigation items in its ‘content’ placeholder. Bottom App Bar ‘content’ parameter has a Row scope, so items inside it display horizontally side by side. We can change the Bottom App Bar default background color, content color, elevation, and content padding size. Even we can optionally embed a Floating Action Button with the Bottom App Bar widget. 

It is similar to a Top App Bar but positioned at the bottom, allowing users to access important actions like navigating to the home screen, performing a search, or using a floating action button (FAB) more conveniently.

Floating action button (FAB)

A component representing the most important action on a screen. A component for helping people take primary actions. They put key actions within reach.

Scaffold

The Scaffold widget implements the basic material design visual layout structure in a jetpack compose application. Scaffold widget provides API to insert several material components to construct app screen such as Top App Bar, Bottom App Bar, Floating Action Button, etc. So that, we can show a Floating Action Button in our jetpack compose application using the Scaffold ‘floating Action Button’ parameter. Simply we can pass a Floating Action Button instance to this parameter to show a floating action button on our mobile device screen.

MainAcivity.kt

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            JetpackCompose3Theme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                 MainContent()
                }
            }
        }
    }
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    JetpackCompose3Theme {
      MainContent()
    }
}

}

@Preview(uiMode = UI_MODE_NIGHT_YES)
@Composable
fun DefaultDarkPreview() {
    JetpackCompose3Theme {
        Surface {
            MainContent()
        }
    }
}

MainContent

fun MainContent(){
    val result = remember { mutableStateOf("") }
    val selectedItem = remember { mutableStateOf("share")}
    val fabShape = RoundedCornerShape(50)

    Scaffold(
        topBar = {
            TopAppBar(
                title = {
                    Text(text = "Bottom app bar + FAB")
                },

                navigationIcon = {
                    IconButton(
                        onClick = {
                            result.value = "Drawer icon clicked"
                        }
                    ) {
                        Icon(imageVector =Icons.Filled.Menu, contentDescription = "")
                    }
                },
            )
        },

        content = {
            Box(
                Modifier
                    .background(Color(0XFFE3DAC9))
                    .padding(16.dp)
                    .fillMaxSize(),
            ) {
                Text(
                    text = result.value,
                    fontSize = 22.sp,
                    fontFamily = FontFamily.Serif,
                    modifier = Modifier.align(Alignment.Center)
                )
            }
        },

        floatingActionButton = {
            FloatingActionButton(
                onClick = {result.value = "FAB clicked"},
                shape = fabShape,
            ) {
                Icon(Icons.Filled.Add,"")
            }
        },
        floatingActionButtonPosition = FabPosition.End,

        bottomBar = {        

            BottomAppBar(
                //cutoutShape = fabShape,
                content = {
                    NavigationBarItem(
                        icon = {
                            Icon(Icons.Filled.Favorite , "")
                        },
                        label = { Text(text = "Favorite")},
                        selected = selectedItem.value == "favorite",
                        onClick = {
                            result.value = "Favorite icon clicked"
                            selectedItem.value = "favorite"
                        },
                        alwaysShowLabel = false
                    )

                   NavigationBarItem(
                        icon = {
                            Icon(Icons.Filled.Share ,  "")
                        },

                        label = { Text(text = "Share")},
                        selected = selectedItem.value == "share",
                        onClick = {
                            result.value = "Share icon clicked"
                            selectedItem.value = "share"
                        },
                        alwaysShowLabel = false
                    )
                }
            )
        }
    )
}

@Preview
@Composable
fun ComposablePreview(){
    MainContent()
}

Output :-

In Day Mode                     In Night Mode

*****************************************End********************************