Bottom App Bar in Jetpack Compose

What id bottom app bar?

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.

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********************************

Coding Bihar