Android App Development
iOS App Development
Flutter App Development
Cross Platform App Development
Hire on-demand project developers and turn your idea into working reality.
Big thanks to Webkul and his team for helping get Opencart 188.8.131.52 release ready!
Updated 31 March 2022
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.
First of all, use the following navigation dependency in your app module’s build.gradle file in android.
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.
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.
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.
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():
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.
Finally, the output, As you can see what we are doing here is telling the NavHost to run the Notification screen and Home screen.
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 🙂
Your email address will not be published. Required fields are marked*
Save my name email and website in this browser for the next time I comment.
Enquiry or Requirement
If you have more details or questions, you can reply to the received confirmation email.