Bottom App Bar in Jetpack Compose

Table of contents

1. What is Bottom app bar?

2. Where is it used?

3. What is scaffold?

4. What is FAB?

5. Navigation bar Item?

Firebase Authentication?

1. What is Bottom App Bar?

The Bottom App Bar is a Material Design component that provides a bar at the bottom of the screen, typically used to display actions (buttons or icons) or navigation items.

Key Features:

• It often contains navigation items, like a drawer icon or navigation bar items.
• Can integrate seamlessly with a Floating Action Button (FAB).
• Supports adding custom actions (like "Favorite" or "Share").

Example: A simple bottom app bar

2. Where is it used?

In apps that require primary actions to be easily accessible (e.g., messaging, social media).

When implementing a bottom navigation bar for easy navigation between screens.

In apps where a FloatingActionButton (FAB) is a primary action (e.g., adding a new item).

3. What is Scaffold?

Scaffold is a layout structure in Jetpack Compose that provides commonly used UI components like:

1. TopAppBar (Toolbar)
2. BottomAppBar
3. FloatingActionButton
4. Drawer
5. Snackbar

It helps organize the UI efficiently and ensures proper spacing.

👉 Example of Scaffold with BottomAppBar:

package com.codingbihar.composableskill

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Add
import androidx.compose.material.icons.filled.Delete
import androidx.compose.material.icons.filled.Edit
import androidx.compose.material.icons.filled.Menu
import androidx.compose.material3.BottomAppBar
import androidx.compose.material3.FloatingActionButton
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

@Composable
fun BottomAppBarExample() {
    Scaffold(
        bottomBar = {
            BottomAppBar(
                containerColor = MaterialTheme.colorScheme.primaryContainer,
                actions = {
                    IconButton(onClick = { /* Handle click */ }) {
                        Icon(Icons.Default.Menu, contentDescription = "Menu")
                    }
                    IconButton(onClick = { /* Handle click */ }) {
                        Icon(Icons.Default.Edit, contentDescription = "Edit")
                    }
                    IconButton(onClick = { /* Handle click */ }) {
                        Icon(Icons.Default.Delete, contentDescription = "Delete")
                    }
                },
                floatingActionButton = {
                    FloatingActionButton(
                        onClick = { /* Handle click */ },
                        containerColor = MaterialTheme.colorScheme.primary
                    ) {
                        Icon(Icons.Default.Add, contentDescription = "Add")
                    }
                }
            )
        }
    ) { innerPadding ->
        Box(modifier = Modifier.padding(innerPadding).fillMaxSize(),
            contentAlignment = Alignment.Center) {
            Column (Modifier.fillMaxSize().padding(16.dp)){

                Text(stringResource(R.string.bottom__appbar_title), fontSize = 24.sp)
                Text(stringResource(R.string.bottom__appbar_content))

            }
        }
    }
}

OUTPUT:

4. What is FAB (Floating Action Button)?

A Floating Action Button (FAB) is a circular button that represents the primary action of the screen. It is commonly placed above the BottomAppBar.

👉 Example of FAB:

floatingActionButton = {
    FloatingActionButton(
        onClick = { /* Handle click */ },
        containerColor = MaterialTheme.colorScheme.primary
    ) {
        Icon(Icons.Default.Add, contentDescription = "Add")
    }

OUTPUT:

5. What is a Navigation Bar Item?

A Navigation Bar Item is an icon or text button in the Bottom Navigation Bar, used to switch between different screens in an app.

👉 Example using NavigationBar and NavigationBarItem:

@Composable
fun BottomNavigationBar() {
    Column(
        Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Bottom
    ) {

        NavigationBar {
            NavigationBarItem(
                icon = { Icon(Icons.Default.Home,
                    contentDescription = "Home") },
                label = { Text("Home") },
                selected = true,
                onClick = { /* Navigate to Home */ }
            )
            NavigationBarItem(
                icon = { Icon(Icons.Default.Settings,
                    contentDescription = "Settings") },
                label = { Text("Settings") },
                selected = false,
                onClick = { /* Navigate to Settings */ }
            )
        }
    }
}

OUTPUT:

Summary:

Component	Purpose	Example Use Case
Bottom App Bar	Provides a bar at the bottom for actions or navigation.	Tabs for "Home," "Search," "Profile."
Scaffold	Provides a structured layout for the app, including a TopAppBar, BottomAppBar, FAB, and content.	A typical Material Design layout for apps.
Floating Action Button (FAB)	A prominent circular button for primary actions.	"Add," "Compose," "Edit" actions in an app.
Navigation Bar Item	Represents an item in a bottom navigation bar, with an icon and optional label.	Icons like "Favorite" or "Share" in a BottomAppBar.

For more information visit the official website of Material Design