In mobile app design, navigation is crucial to providing a smooth and intuitive user experience. One common navigation pattern is the bottom navigation bar, where users can easily switch between different sections of the app. In this article, we'll explore how to design a bottom navigation bar with vertical icons and text using Jetpack Compose for Android.
Why Use a Vertical Bottom Navigation Bar?
While traditional bottom navigation bars usually place icons and text horizontally, a vertical layout offers a unique aesthetic and user experience. It can also help make the design look cleaner and more compact, especially for apps with fewer navigation options.
A vertical stack of icons and text ensures clarity, readability, and accessibility. When icons and labels are aligned in a column, they can easily scale and adapt across different screen sizes.
Key Features of Our Design:
- Vertical Alignment: The icons are placed above the text, giving a clear, stacked look.
- Equal Space Distribution: Each item in the bottom navigation bar will take up equal space, ensuring a balanced layout.
- Customizable Icons: We'll use the built-in Material icons provided by Jetpack Compose for a consistent and professional look.
Let's Dive Into the Code
Below is the code to create a vertical bottom navigation bar with equal space distribution for each tab.
Full Code Implementation:
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
enableEdgeToEdge()
setContent {
ComposeBottomBarTheme {
BottomNavBarExample()
}
}
}
}
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun BottomNavBarExample() {
var selectedTab by remember { mutableStateOf(0) }
var title by remember { mutableStateOf("Home") }
Scaffold(
topBar = {
// Using the TopAppBar from Material3
TopAppBar(
title = { Text(text = title) },
colors = TopAppBarDefaults.smallTopAppBarColors(
containerColor = Color.White, // Background color of the app bar
titleContentColor = Color.Black // Color of the title
)
)
},
bottomBar = {
BottomAppBar(
modifier = Modifier.padding(16.dp),
containerColor = Color.White
) {
Row(
modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.SpaceAround
) {
// Home Tab
IconButton(
onClick = { selectedTab = 0 },
modifier = Modifier.weight(1f) // Ensures equal space distribution
) {
Column(horizontalAlignment = Alignment.CenterHorizontally) {
Icon(
imageVector = Icons.Filled.Home,
contentDescription = "Home",
tint = if (selectedTab == 0) Color.Blue else Color.Gray
)
Text(
text = "Home",
color = if (selectedTab == 0) Color.Blue else Color.Gray,
style = MaterialTheme.typography.bodySmall
)
}
}
// Search Tab
IconButton(
onClick = { selectedTab = 1 },
modifier = Modifier.weight(1f) // Ensures equal space distribution
) {
Column(horizontalAlignment = Alignment.CenterHorizontally) {
Icon(
imageVector = Icons.Filled.Search,
contentDescription = "Search",
tint = if (selectedTab == 1) Color.Blue else Color.Gray
)
Text(
text = "Search",
color = if (selectedTab == 1) Color.Blue else Color.Gray,
style = MaterialTheme.typography.bodySmall
)
}
}
// Notifications Tab
IconButton(
onClick = { selectedTab = 2 },
modifier = Modifier.weight(1f) // Ensures equal space distribution
) {
Column(horizontalAlignment = Alignment.CenterHorizontally) {
Icon(
imageVector = Icons.Filled.Notifications,
contentDescription = "Notifications",
tint = if (selectedTab == 2) Color.Blue else Color.Gray
)
Text(
text = "Notifications",
color = if (selectedTab == 2) Color.Blue else Color.Gray,
style = MaterialTheme.typography.bodySmall
)
}
}
// Profile Tab
IconButton(
onClick = { selectedTab = 3 },
modifier = Modifier.weight(1f) // Ensures equal space distribution
) {
Column(horizontalAlignment = Alignment.CenterHorizontally) {
Icon(
imageVector = Icons.Filled.AccountCircle,
contentDescription = "Profile",
tint = if (selectedTab == 3) Color.Blue else Color.Gray
)
Text(
text = "Profile",
color = if (selectedTab == 3) Color.Blue else Color.Gray,
style = MaterialTheme.typography.bodySmall
)
}
}
}
}
}
) { paddingValues ->
// Content based on selected tab with the provided padding values
Column(modifier = Modifier.padding(paddingValues)) {
when (selectedTab) {
0 -> {
title = "Home"
Text("Home Content", modifier = Modifier.padding(16.dp))
}
1 -> {
title = "Search"
Text("Search Content", modifier = Modifier.padding(16.dp))
}
2 -> {
title = "Notifications"
Text("Notifications Content", modifier = Modifier.padding(16.dp))
}
3 -> {
title = "Profile"
Text("Profile Content", modifier = Modifier.padding(16.dp))
}
}
}
}
}
Benefits of This Approach:
- Responsiveness: The layout adjusts to different screen sizes and ensures equal space distribution across the available screen width.
- Clear Navigation: The vertical alignment of the icon and text improves readability and makes it easier for users to understand the app's navigation structure.
- Customizable: You can replace the icons and texts to match the requirements of your app. The layout will adapt accordingly.
Summary and Output:
.gif)
By using Jetpack Compose's Column, IconButton, and Row, we can easily create a bottom navigation bar with vertical icons and text, ensuring equal space distribution across the screen. This approach provides flexibility, clear navigation, and responsiveness for your Android apps.
Posts
