Coding Bihar

Android App Development

Coding Bihar is dedicated to providing you with the knowledge and tools you need to excel in Android development. Start your journey with us and transform your app ideas into reality with Jetpack Compose. Connect, learn, and grow with Coding Bihar today!

Bottom App Bar in Jetpack Compose

Bottom App Bar in Jetpack Compose - Coding Bihar
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


Bottom App Bar in Jetpack Compose Output
Bottom App Bar in Jetpack Compose Output

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

 Sandeep Gupta

Posted by Sandeep Gupta

Please share your feedback us at:sandeep@codingbihar.com. Thank you for being a part of our community!

Special Message

Welcome to coding bihar!