jetpack compose - How to use BottomAppBar

Compose BottomAppBar

The BottomAppBar is an android jetpack compose library widget. The BootomAppBar displays navigation and key actions at the bottom position on an android application user interface. BottomAppBar can optionally display a FloatingActionButton embedded with it.

BottomAppBar ‘content’ parameter has a Row scope, so when we put some BottomNavigationItems inside this, they are displayed horizontally side by side. Each BottomNavigationItem instance shows an action button for bottom navigation.

The BottomAppBar ‘cutoutShape’ parameter allows us to embed a floating action button. The ‘cutoutShape’ specified the shape used for FloatingActionButton which is embedded with BottomAppBar such as a CircleShape, RoundedCornerShape, etc.

Android jetpack compose developer can change the bottom app bar background color using its ‘backgroundColor’ parameter. Now is the time for changing the content color, android app developer can set a color for BottomAppBar content color by passing a value to its ‘contentColor’ parameter. Here is a useful method to set the appropriate content color for BottomAppBar content, that is ‘contentColorFor()’. We can pass ‘backgroundColor’ value for this method.

Android jetpack compose developer can set BottomAppBar elevation value to pass a value to its ‘elevation’ parameter. The ‘contentPadding’ parameter set the padding value for BottomAppBar content. After all, like other widgets, we can change or set many properties of BottomAppBar using its modifier elements.

Copy the following kotlin code and paste it inside your android studio main activity file to test the BottomAppBar functionality. Build the apk and run it on your emulator device. So, you can clearly understand how we can use a BottomAppBar in our android jetpack compose application. The bottom screenshots also help you to get a clear idea about compose BottomAppBar uses.

MainActivity.kt


package com.cfsuman.jetpackcompose

import android.annotation.SuppressLint
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.*
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            MainContent()
        }
    }


    @SuppressLint("UnusedMaterialScaffoldPaddingParameter")
    @Composable
    fun MainContent(){
        val result = remember { mutableStateOf("") }
        val selectedItem = remember { mutableStateOf("")}

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

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

                    backgroundColor = Color(0xFF00CC99),
                    elevation = AppBarDefaults.TopAppBarElevation
                )
            },

            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)
                    )
                }
            },

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

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

                        BottomNavigationItem(
                            icon = {
                                Icon(Icons.Filled.LocationOn ,  "")
                            },


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

                        BottomNavigationItem(
                            icon = {
                                Icon(Icons.Filled.Delete , "")
                            },
                            label = { Text(text = "Delete")},
                            selected = selectedItem.value == "delete",
                            onClick = {
                                result.value = "Delete icon clicked"
                                selectedItem.value = "delete"
                            },
                            alwaysShowLabel = false
                        )
                    }
                )
            }
        )
    }


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