Top app bar and bottom navigation bar in Jetpack Compose

When building mobile applications, navigation, and user interface design play a crucial role in creating a seamless and intuitive user experience. In Jetpack Compose, two essential components for achieving this are the top app bar and the bottom app bar.

In this topic, you'll learn about the different types of top app bars available in Jetpack Compose and how to implement them using the Scaffold component. Additionally, you'll explore creating a bottom app bar to enable smooth navigation between different screens in your app, utilizing Kotlin enums or sealed classes for type-safe navigation destinations.

Overview of app bars in In Jetpack Compose

App bars are containers that give users access to key features and navigation items. In Jetpack Compose For Android, there are two types of app bars:

• Top app bar: This appears at the top of the screen and provides access to key tasks and information. It usually includes a title, core action items, and certain navigation items.

• Bottom app bar: This appears at the bottom of the screen and includes core navigation items. It may also provide access to other key actions, such as through a floating action button.

  

Types of top app bars

Jetpack Compose offers several types of top app bars to cater to different app requirements and design patterns. They include:

• TopAppBar: A standard app bar that typically contains the screen title, navigation icon, and action icons. It is suitable for most app scenarios and provides a consistent look and feel.

@Composable
fun MyAppBar() {
    TopAppBar(
        title = { Text("Top App Bar") },
        navigationIcon = {
            IconButton(onClick = { /* Handle navigation */ }) {
                Icon(Icons.Default.Menu, contentDescription = "Menu")
            }
        },
        actions = {
            IconButton(onClick = { /* Handle search */ }) {
                Icon(Icons.Default.Search, contentDescription = "Search")
            }
        }
    )
}

• LargeTopAppBar: An app bar with an expanded height, allowing for more prominent branding elements or additional content. It is often used in conjunction with a collapsing toolbar or when you want to make a strong visual impact.

@Composable
fun MyLargeAppBar() {
    LargeTopAppBar(
        title = { Text("Large Top App Bar", style = MaterialTheme.typography.h4) },
        navigationIcon = {
            IconButton(onClick = { /* Handle navigation */ }) {
                Icon(Icons.Default.Menu, contentDescription = "Menu")
            }
        },
        actions = {
            IconButton(onClick = { /* do something */ }) {
                Icon(
                    imageVector = Icons.Filled.Search,
                    contentDescription = "Localized description"
                )
            }
        }
    )
}

• CenterAlignedTopAppBar: An app bar variant where the title is centered horizontally. This style is commonly used in media-focused apps or when you want to emphasize symmetry in your app's design.

@Composable
fun MyCenteredAppBar() {
    CenterAlignedTopAppBar(
        title = { Text(text = "Center-Aligned top app bar") },
        navigationIcon = {
            IconButton(onClick = { /*TODO*/ }) {
                Icon(imageVector = Icons.Default.Menu, contentDescription = null)
            }
        },
        actions = {
            Icon(imageVector = Icons.Default.Add, contentDescription = null)
        }
    )
}

• MediumTopAppBar: A medium top app bar is similar to the large, though the padding between the title and the icons is smaller and occupies less space on the screen overall.

  @Composable
  fun MyMediumTopAppBar() {
      MediumTopAppBar(
          title = { Text("Medium Top App Bar", style = MaterialTheme.typography.headlineLarge) },
          navigationIcon = {
              IconButton(onClick = { /* Handle navigation */ }) {
                  Icon(Icons.Default.Menu, contentDescription = "Menu")
              }
          },
          actions = {
              IconButton(onClick = { /* do something */ }) {
                  Icon(
                      imageVector = Icons.Filled.Search,
                      contentDescription = "Localized description"
                  )
              }
          }
      )
  }
  

  

Choosing the right top app bar depends on your app's design language, branding requirements, and the specific functionality of each screen. It's essential to maintain consistency throughout your app to provide a cohesive user experience.

Implementing top app bars with Scaffold

In Jetpack Compose, the Scaffold component serves as a foundation for building the main structure of your app's screens. It provides slots for various UI elements, including the top bar, bottom bar, and content area.

To integrate a top app bar into your app using Scaffold, you can use the topBar slot and provide a composable function that defines the top app bar's content. Here's an example of how to implement a basic TopAppBar:

@Composable
fun MyScreen() {
    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text("My App") },
                navigationIcon = {
                    IconButton(onClick = { /* Handle navigation icon click */ }) {
                        Icon(Icons.Default.Menu, contentDescription = "Menu")
                    }
                },
                actions = {
                    IconButton(onClick = { /* Handle action icon click */ }) {
                        Icon(Icons.Default.Search, contentDescription = "Search")
                    }
                },
                colors = TopAppBarDefaults.smallTopAppBarColors(
                    containerColor = MaterialTheme.colorScheme.primaryContainer,
                    titleContentColor = MaterialTheme.colorScheme.primary,
                    navigationIconContentColor = MaterialTheme.colorScheme.onPrimaryContainer
                )
            )
        },
        content = { padding ->
            // Screen content goes here
        }
    )
}

In this example, the TopAppBar is defined within the topBar slot of the Scaffold. It includes a title, a navigation icon, and an action icon. You can customize the TopAppBar further by modifying its colors, and adding additional content as needed.

The containerColor and titleContentColor properties allow you to set the background color and title color of the top app bar, respectively.

Creating a bottom app bar

Bottom navigation is a common navigation pattern in mobile apps, allowing users to switch between different screens or sections of the app easily. In Jetpack Compose, you can create a bottom app bar component for bottom navigation using the NavigationBar and NavigationBarItem composables. To use these components, the androidx.compose.material3 dependency should be added to your Android project. In new Android Studio projects, this dependency is included by default. If it is not, you can add it like this:

dependencies {
    implementation "androidx.compose.material3:material3:1.3.0"
}

dependencies {
    implementation("androidx.compose.material3:material3:1.3.0")
}

To represent navigation destinations in a type-safe manner, you can use Kotlin enums or sealed classes. Here's an example of how to create a bottom navigation bar with three destinations using a sealed class:

sealed class Screen(val route: String) {
    object MainScreen : Screen("main_screen")
    object AccountsScreen : Screen("accounts_screen")
    object SettingScreen : Screen("settings_screen")
}

@Composable
fun MyApp() {
    Scaffold(
        bottomBar = {
            val currentRoute =  navController.currentDestination?.route
            NavigationBar  {
                NavigationBarItem(
                    icon = { /*..*/ },
                    label = { Text(text = "Main") },
                    selected = Screen.MainScreen.route == currentRoute,
                    onClick = { /* Handle navigation icon click */ }
                )
                NavigationBarItem(
                    icon = { /*..*/ },
                    label = { Text(text = "Accounts") },
                    selected = Screen.AccountsScreen.route == currentRoute,
                    onClick = { /* Handle navigation icon click */ }
                )
                NavigationBarItem(
                    icon = { /*..*/ },
                    label = { Text(text = "Settings") },
                    selected = Screen.SettingScreen.route == currentRoute,
                    onClick = { /* Handle navigation icon click */ }
                )
            }
        }
    ) { padding ->
        // Screen content goes here
    }
}

In this example, the Screen class defines the available destinations, and the bottom navigation bar is created using the NavigationBar and NavigationBarItem composables. Each item represents a destination and includes an icon, label, and click behavior to navigate to the corresponding screen.

The navController is responsible for managing the navigation stack and handling the navigation actions. It is created using the rememberNavController() function.

Conclusion

Top app bar and bottom app bar are essential components in Jetpack Compose for creating intuitive and visually appealing app navigation and UI design. By leveraging the different types of TopAppBars and implementing them using the Scaffold component, you can customize your app's appearance and provide a consistent user experience.

Additionally, by creating a bottom app bar component and representing destinations using Kotlin enums or sealed classes, you can enable smooth navigation between different screens in your app while maintaining type safety.

With your newfound knowledge of the top app bars and bottom navigation in Jetpack Compose, you're well-equipped to build apps with effective navigation and captivating user interfaces.

Now it's time to put your skills into action and dive into some practical coding exercises to solidify your understanding of these powerful Jetpack Compose components!