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?
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
package com.codingbihar.composeskill
import android.annotation.SuppressLint
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Add
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material.icons.filled.Menu
import androidx.compose.material.icons.filled.Share
import androidx.compose.material3.BottomAppBar
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.FabPosition
import androidx.compose.material3.FloatingActionButton
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.NavigationBarItem
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
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.unit.dp
import androidx.compose.ui.unit.sp
@SuppressLint("UnusedMaterial3ScaffoldPaddingParameter")
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun SimpleBottomAppbar(){
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
)
}
)
}
)
}
In the above code provided displays title, fab and navigation items in bottom app bar "Favorite" and "Share" and in the content a text to show the action of user click on the items. The output of the code is below 👇
Output:
2. Where it is used?
The Bottom App Bar is commonly used in apps where:
- Navigation or actions need to be accessible from the bottom of the screen.
- Integration with a prominent FAB is required.
Examples:
- Messaging Apps: To provide actions like "Compose" or "Search."
- E-commerce Apps: To display tabs like "Home," "Cart," and "Profile."
- Social Media Apps: To include actions like "Like," "Share," or quick navigation options.
3. What is Scaffold?
The Scaffold is a composable layout in Jetpack Compose that provides a basic structure for Material Design apps. It acts as a container for arranging UI components like the Top App Bar, Bottom App Bar, FAB, and content.
Example: A simple Scaffold containing top app bar, floating action button, bottom app bar and content on screen
@SuppressLint("UnusedMaterial3ScaffoldPaddingParameter")
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun SimpleScaffold(modifier: Modifier = Modifier) {
Scaffold(
topBar = { TopAppBar(title = { Text("Title") }) },
floatingActionButton = {
FloatingActionButton(onClick = { /* Action */ }) { Text("+") } },
bottomBar = { BottomAppBar { /* Navigation items */ } },
content = {
Text("Main content here") }
)
}
4. What is FAB (Floating Action Button)?
The Floating Action Button (FAB) is a circular button that hovers above the screen content. It is used to perform a primary action in the app.
Key Features:
- Prominence: Stands out due to its circular shape and elevated position.
- Actions: Typically used for actions like "Add," "Edit," or "Compose."
- Can integrate with the BottomAppBar or exist independently.
Example:
In the above FAB performs an action when clicked and displays a "+" icon.@Composable
fun SimpleFab(modifier: Modifier = Modifier) {
FloatingActionButton(
onClick = { /* Handle click */ },
shape = RoundedCornerShape(50)
) {
Icon(Icons.Filled.Add, contentDescription = "Add")
}
}
5. What is Navigation Bar Item?
A Navigation Bar Item is a component inside a Bottom App Bar or a Navigation Bar that represents an icon and an optional label for navigation or actions.
Features:
- Can be used to represent tabs like "Home," "Search," or "Profile."
- Includes properties to handle selection and clicks.
- Displays an icon, a label (optional), and handles whether the label should always be shown.
Example:
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
)
Summary Table
| 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. |