Bottom Navigation in Jetpack Compose

In this block, we are going to learn about the bottom navigation bar in jetpack compose using the navigation component. I have designed bottom navigation just like a social media app. The Navigation component provides support for Jetpack Compose applications. You can navigate between compostables while taking advantage of the Navigation component’s infrastructure and features. Navigation in jetpack compose is different from XML navigation design in android.

Add Dependency

First of all, use the following navigation dependency in your app module’s build.gradle file in android.

Create Screens

After building, the project creates NavigationScreens.kt file. we are not using fragments and activities to display the content, so we are creating composable functions to show the screen content. now we are creating four composable functions home screen, message screen, notification screen, and profile screen. these functions display the navigation screen.

Create Directory

After creating the screens, we are creating a sealed class with the name BottomNavigationFiles to store navigation files like title, item icon, and item route key. which we will use these files to route the navigation between screens.

Creating a NavHost

Each NavController must be associated with a single NavHost composable. The NavHost links the NavController with a navigation graph that specifies the composable destinations that you should be able to navigate between. So we are creating a composable function “controlScreen” navigation action.

Navigate composable

To navigate to a composable destination in the navigation graph, so we are creating a function “bottomNavigationView” handling the bottom navigation back stack and defining the start destination. To navigate from a composable within the navigation graph, call navigate():

Create Main Function

We are creating the ‘homeScreenView’ composble function with scaffold and define the ‘bottomNavigationView’ and ‘controlScreens’.at last we define this function to onCreateView on the mainActivity.

Preview

Finally, the output, As you can see what we are doing here is telling the NavHost to run the Notification screen and Home screen.

Conclusion:-

In this blog, we have learned about the Bottom Navigation Bar in jetpack compose. we have learned how to implement NavController and regarding the compose Bottom Navigation Bar visit this link.

Thanks for reading this blog. You can also check other blogs from here.

Always be ready for learning 🙂