{"id":3811,"date":"2020-05-10T15:55:19","date_gmt":"2020-05-10T05:55:19","guid":{"rendered":"https:\/\/learntodroid.com\/?p=3811"},"modified":"2020-09-20T11:56:59","modified_gmt":"2020-09-20T01:56:59","slug":"how-to-use-the-jetpack-navigation-component-with-bottom-navigation","status":"publish","type":"post","link":"http:\/\/10.0.0.14:32769\/how-to-use-the-jetpack-navigation-component-with-bottom-navigation\/","title":{"rendered":"How to Use the Jetpack Navigation Component with Bottom Navigation"},"content":{"rendered":"\n<p>Bars containing icons and text that run along the bottom of the screen are common when implementing navigation in an Android app. This kind of navigation can be achieved using the Android material design widget BottomNavigationView.<\/p>\n\n\n\n<p>The Jetpack navigation architecture component simplifies the process of implementing navigation within your Android app and can be used with the BottomNavigationView widget.<\/p>\n\n\n\n<p><strong>To use the Jetpack navigation architecture component with bottom navigation you will need to do the following.<\/strong><\/p>\n\n\n\n<ol><li><strong>Retrieve the Jetpack navigation component dependencies using Gradle<\/strong><\/li><li><strong>Create the String and Drawable Resources to use as Icons and Labels<\/strong><\/li><li><strong>Create the Menu Resource for the BottomNavigationView <\/strong><\/li><li><strong>Add the BottomNavigationView to the Activity Layout Resource<\/strong><\/li><li><strong>Create the Navigation Graph<\/strong><\/li><li><strong>Add the NavHostFragment to the Activity Layout Resource<\/strong><\/li><li><strong>Add the Fragments as Destinations to the Navigation Graph<\/strong><\/li><li><strong>Setup the NavController with the BottomNavigationView in the Activity class<\/strong><\/li><\/ol>\n\n\n\n<p>I have written this tutorial that goes into greater details on these steps on how to setup the Jetpack navigation component with the BottomNavigationView widget to enable bottom navigation within your Android app.<\/p>\n\n\n\n<p>I have also included code samples which are available in a public code repository in GitHub at the link below.<\/p>\n\n\n\n<p><a rel=\"noreferrer noopener\" href=\"https:\/\/github.com\/learntodroid\/BottomNavigationTutorial\" target=\"_blank\">https:\/\/github.com\/learntodroid\/BottomNavigationTutorial<\/a><\/p>\n\n\n\n<p>I have created a video tutorial on this blog post which I have uploaded to YouTube which I have embedded below.<\/p>\n\n\n\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"container-lazyload preview-lazyload container-youtube js-lazyload--not-loaded\"><a class=\"lazy-load-youtube preview-lazyload preview-youtube\" href=\"https:\/\/www.youtube.com\/watch?v=qF4trCKJd1k\" data-video-title=\"How to Use the Jetpack Navigation Component with Bottom Navigation\" title=\"Play video &quot;How to Use the Jetpack Navigation Component with Bottom Navigation&quot;\">https:\/\/www.youtube.com\/watch?v=qF4trCKJd1k<\/a><noscript>Video can&#8217;t be loaded because JavaScript is disabled: <a href=\"https:\/\/www.youtube.com\/watch?v=qF4trCKJd1k\" title=\"How to Use the Jetpack Navigation Component with Bottom Navigation\">How to Use the Jetpack Navigation Component with Bottom Navigation (https:\/\/www.youtube.com\/watch?v=qF4trCKJd1k)<\/a><\/noscript><\/div>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Navigation Component Bottom Navigation Tutorial<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Retrieving the Navigation Component Dependencies<\/h3>\n\n\n\n<p>To use the Jetpack navigation component you will first need to download it&#8217;s dependencies using Gradle.<\/p>\n\n\n\n<p>To achieve this, include the following dependencies in your app level build.gradle file that I located from the <a rel=\"noreferrer noopener\" href=\"https:\/\/developer.android.com\/guide\/navigation\/navigation-getting-started\" target=\"_blank\">Getting Started page<\/a> published for the Jetpack Navigation Component.<\/p>\n\n\n<p><script src=\"https:\/\/gist.github.com\/learntodroid\/438b750b18ab1372471a7bc92f0af1f9.js\"><\/script><\/p>\n\n\n<p>Sync Gradle for your Android project inside Android Studio and the dependencies for the Jetpack Navigation Component should be successfully retrieved.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Creating the String and Drawable Resources to use as Icons and Labels<\/h3>\n\n\n\n<p>Next we will need to create String resources and Drawable resource to use as the labels and icons in the BottomNavigationView.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Adding String Resources for Labels<\/h4>\n\n\n\n<p>To start with add three new Strings for each label to be shown in the BottomNavigationView in the strings.xml resource file located at <em>app\/src\/main\/res\/values\/strings.xml<\/em>.<\/p>\n\n\n\n<p>See the sample for the String resource strings.xml file below.<\/p>\n\n\n<p><script src=\"https:\/\/gist.github.com\/learntodroid\/e2bc381969bd5315eb6f9d689d6d0170.js\"><\/script><\/p>\n\n\n<h4 class=\"wp-block-heading\">Adding Drawable Resources for Icons<\/h4>\n\n\n\n<p>Next we will need to add three Vector Assets to the Drawable Resources to use as icons in the BottomNavigationView.<\/p>\n\n\n\n<p>To add a Vector Asset to your Android project in Android Studio right mouse click on the drawables folder located at <em>app\/src\/main\/res\/drawables<\/em>, select &#8220;New&#8221;, then select &#8220;Vector Asset&#8221;.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"716\" height=\"696\" src=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/New-Vestor-Asset-Drawable.png\" alt=\"\" class=\"wp-image-3841\" srcset=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/New-Vestor-Asset-Drawable.png 716w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/New-Vestor-Asset-Drawable-300x292.png 300w\" sizes=\"(max-width: 716px) 100vw, 716px\" \/><\/figure>\n\n\n\n<p>Select the &#8220;Clip Art&#8221; button and locate a Vector Asset you like using the search functionality.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"708\" height=\"539\" src=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Vector-Asset-Drawable-Select-Clip-Art.png\" alt=\"\" class=\"wp-image-3842\" srcset=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Vector-Asset-Drawable-Select-Clip-Art.png 708w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Vector-Asset-Drawable-Select-Clip-Art-300x228.png 300w\" sizes=\"(max-width: 708px) 100vw, 708px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"713\" height=\"527\" src=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Vector-Asset-Drawable-Select-Icon.png\" alt=\"\" class=\"wp-image-3858\" srcset=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Vector-Asset-Drawable-Select-Icon.png 713w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Vector-Asset-Drawable-Select-Icon-300x222.png 300w\" sizes=\"(max-width: 713px) 100vw, 713px\" \/><\/figure>\n\n\n\n<p>Once you have found a Vector Asset you like, select the &#8220;Next&#8221; button and select the &#8220;Finish&#8221; button.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"703\" height=\"533\" src=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Vector-Asset-Drawable-Confirm-Icon-Path.png\" alt=\"\" class=\"wp-image-3857\" srcset=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Vector-Asset-Drawable-Confirm-Icon-Path.png 703w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Vector-Asset-Drawable-Confirm-Icon-Path-300x227.png 300w\" sizes=\"(max-width: 703px) 100vw, 703px\" \/><\/figure>\n\n\n\n<p>Complete this process a total of three times to create three icons for you to use in the later steps of the tutorial in the BottomNavigationView.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Creating a Menu Resource for Navigation<\/h3>\n\n\n\n<p>The next step this tutorial involves creating a <a href=\"https:\/\/developer.android.com\/guide\/topics\/resources\/menu-resource\" target=\"_blank\" rel=\"noreferrer noopener\">menu resource<\/a> to use in the BottomNavigationView.<\/p>\n\n\n\n<p>To create a menu resource in your Android project in Android Studio click the right mouse button on the &#8220;res&#8221; directory and select &#8220;New&#8221; and click &#8220;Android Resource File&#8221;.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"714\" height=\"978\" src=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Creating-a-Navigation-Resource-1.png\" alt=\"\" class=\"wp-image-3832\" srcset=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Creating-a-Navigation-Resource-1.png 714w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Creating-a-Navigation-Resource-1-219x300.png 219w\" sizes=\"(max-width: 714px) 100vw, 714px\" \/><\/figure>\n\n\n\n<p>Enter a file name for the menu and set the &#8220;Resource type&#8221; to &#8220;Menu&#8221; and click the &#8220;OK&#8221; button.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"826\" height=\"488\" src=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/New-Menu-Resource-for-Navigation-Menu.png\" alt=\"\" class=\"wp-image-3862\" srcset=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/New-Menu-Resource-for-Navigation-Menu.png 826w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/New-Menu-Resource-for-Navigation-Menu-300x177.png 300w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/New-Menu-Resource-for-Navigation-Menu-768x454.png 768w\" sizes=\"(max-width: 826px) 100vw, 826px\" \/><\/figure>\n\n\n\n<p>In the menu resource you will have a &#8220;menu&#8221; root element and you will need to add three &#8220;item&#8221; elements one for each option in the BottomNavigationView. For each &#8220;item&#8221; element set the label using the &#8220;android:title&#8221; attribute and set the icon using the &#8220;android:icon&#8221; attribute.<\/p>\n\n\n\n<p>For the &#8220;android:id&#8221; attribute you will need to use the same ID that will be defined later for the fragment that will be added to the navigation graph.<\/p>\n\n\n\n<p>See the sample menu resource (navigation_menu.xml) for the navigation menu below.<\/p>\n\n\n<p><script src=\"https:\/\/gist.github.com\/learntodroid\/5b658dce863485648f2f10202cafeba5.js\"><\/script><\/p>\n\n\n<h3 class=\"wp-block-heading\">Adding a BottomNavigationView to the Activity Layout Resource<\/h3>\n\n\n\n<p>Next we will be adding a <a rel=\"noreferrer noopener\" href=\"https:\/\/developer.android.com\/reference\/com\/google\/android\/material\/bottomnavigation\/BottomNavigationView\" target=\"_blank\">BottomNavigationView widget<\/a> from the <a rel=\"noreferrer noopener\" href=\"https:\/\/material.io\/develop\/android\/components\/bottom-navigation\/\" target=\"_blank\">Android material design library<\/a> into the Activity layout resource.<\/p>\n\n\n\n<p>The BottomNavigationView widget will need to be positioned to the bottom of the screen using your layout resource. You will also need to define the &#8220;app:menu&#8221; attribute on the BottomNavigationView widget and associate it to the menu resource you created in the previous step.<\/p>\n\n\n\n<p>See the sample Activity layout resource (activity_main.xml) below.<\/p>\n\n\n<p><script src=\"https:\/\/gist.github.com\/learntodroid\/1dfba0602c4fa9f30c9951b0d64a87e2.js\"><\/script><\/p>\n\n\n<p>If you make these changes defined above and run your Android app you should see the three options in the BottomNavigationView each with a label and an icon.<\/p>\n\n\n\n<p>Check out the sample screen capture showing a selectable BottomNavigationView with labels and icons.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Bottom-Navigation-View-with-Three-Options.gif\" alt=\"\" class=\"wp-image-3826\" width=\"300\" height=\"638\"\/><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Creating the Navigation Graph<\/h3>\n\n\n\n<p>Next we will start to use the Jetpack navigation component by creating our navigation graph resource.<\/p>\n\n\n\n<p>The navigation graph consists of destinations and actions. The destinations are fragments that the user can navigate between using your Android app and actions represent the pathways the user can take by navigating your app between destinations.<\/p>\n\n\n\n<p>The navigation graph is placed inside a NavHostFragment inside an Activity which we will create in subsequents steps. The navigation graph will have  starting destination defined which we will also implement in a later step after we build the three fragments and add them as destinations to the navigation graph.<\/p>\n\n\n\n<p>To create the navigation graph resource in Android Studio, select the right mouse button on the &#8220;res&#8221; folder and select &#8220;New&#8221; and click on &#8220;Android Resource File&#8221; (just like we did earlier with the menu resource).<\/p>\n\n\n\n<p>Next provide a file name for the navigation graph and set the &#8220;Resource type&#8221; to &#8220;Navigation&#8221; and select the &#8220;OK&#8221; button. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"859\" height=\"515\" src=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Creating-a-Navigation-Resource-2.png\" alt=\"\" class=\"wp-image-3833\" srcset=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Creating-a-Navigation-Resource-2.png 859w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Creating-a-Navigation-Resource-2-300x180.png 300w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Creating-a-Navigation-Resource-2-768x460.png 768w\" sizes=\"(max-width: 859px) 100vw, 859px\" \/><\/figure>\n\n\n\n<p>This will create the navigation graph and take you to the Navigation Editor within Android Studio showing a blank navigation graph without any destinations or actions.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"741\" src=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Creating-a-Navigation-Resource-3-1024x741.png\" alt=\"\" class=\"wp-image-3835\" srcset=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Creating-a-Navigation-Resource-3-1024x741.png 1024w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Creating-a-Navigation-Resource-3-300x217.png 300w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Creating-a-Navigation-Resource-3-768x556.png 768w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Creating-a-Navigation-Resource-3.png 1200w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Adding the NavHostFragment to the Activity Layout Resource<\/h3>\n\n\n\n<p>Next we will set up the navigation graph to show the active destination in the main Activity by adding a NavHostFragment to the Activity layout resource.<\/p>\n\n\n\n<p>To achieve this we will need to add a &#8220;fragment&#8221; element inside the main Activity layout resource.<\/p>\n\n\n\n<p>This fragment will need to have the following attributes set:<\/p>\n\n\n\n<ul><li>The &#8220;android:name&#8221; attribute set to &#8220;androidx.navigation.fragment.NavHostFragment&#8221; indicating that this fragment is a NavHostFragment<\/li><li>The &#8220;app:defaultNavHost&#8221; attribute set to &#8220;true&#8221; that will allow this NavHostFragment to detect the back button getting pressed<\/li><li>The &#8220;app:navGraph&#8221; attribute set to the navigation graph resource created in the previous step to link the navigation graph with the NavHostFragment<\/li><\/ul>\n\n\n\n<p>See the sample Activity layout resource (activity_main.xml) containing the NavHostFragment below.<\/p>\n\n\n<p><script src=\"https:\/\/gist.github.com\/learntodroid\/0e1e29076e0cc3508b26e12a435f32a3.js\"><\/script><\/p>\n\n\n<h3 class=\"wp-block-heading\">Adding Fragments as Destinations to the Navigation Graph<\/h3>\n\n\n\n<p>Next we will create the three different fragments and add them as destinations to the navigation graph. This will enable us to navigate to each of these destinations using the bottom navigation once we have made some final changes in the next step.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Creating the Fragments<\/h4>\n\n\n\n<p>We will need to create three fragments. These fragments will be very basic just to showcase how the navigation works. The fragments will each contain a single TextView showing the value &#8220;Fragment 1&#8221;, &#8220;Fragment 2&#8221; or &#8220;Fragment 3&#8221;.<\/p>\n\n\n\n<p>I will show you the layout resource and class for Fragment1 and you can repeat this process for creating Fragment2 and Fragment3 or just clone the GitHub repository for this tutorial referenced in the introduction of this post.<\/p>\n\n\n\n<p>See the sample fragment layout resource (fragment_fragment1.xml) for Fragment1 below.<\/p>\n\n\n<p><script src=\"https:\/\/gist.github.com\/learntodroid\/cfbce5db0f723f00b3876dd1628d5a2f.js\"><\/script><\/p>\n\n\n<p>See the code sample fragment class for Fragment1 below.<\/p>\n\n\n<p><script src=\"https:\/\/gist.github.com\/learntodroid\/c1cddf499d84677395a0db8a92282a5b.js\"><\/script><\/p>\n\n\n<p>As mentioned above, repeat this process for creating the next two fragments so that we end up with a total of three fragments each with a layout resource.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Adding Destinations to the Navigation Graph<\/h4>\n\n\n\n<p>Now that we have created the three fragments we can now add them as destinations to the navigation graph.<\/p>\n\n\n\n<p>To add the destinations to the navigation graph, open the navigation graph in the Navigation Editor in Android Studio. Then select the icon with a screen and a green plus sign to add a destination. This will display a search bar and a drop down list containing possible destinations to add to the navigation graph.<\/p>\n\n\n\n<p>Locate the Fragment1 from the search results and select it to add it to the navigation graph. Then repeat the process for Fragment2 and Fragment3.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"737\" src=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Navigation-Graph-Add-Destination-1024x737.png\" alt=\"\" class=\"wp-image-3837\" srcset=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Navigation-Graph-Add-Destination-1024x737.png 1024w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Navigation-Graph-Add-Destination-300x216.png 300w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Navigation-Graph-Add-Destination-768x553.png 768w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Navigation-Graph-Add-Destination.png 1200w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>You should end up with the Navigation Editor looking like the screenshot below with three destinations added with fragment1 configured as the start destination which means it will show initially when the Android app is run.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"305\" src=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Navigation-Graph-Three-Fragments-1024x305.png\" alt=\"\" class=\"wp-image-3838\" srcset=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Navigation-Graph-Three-Fragments-1024x305.png 1024w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Navigation-Graph-Three-Fragments-300x90.png 300w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Navigation-Graph-Three-Fragments-768x229.png 768w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Navigation-Graph-Three-Fragments.png 1200w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Another important thing to note that I also mentioned in the section for creating the menu resource, is the ID for each of the destinations in the navigation graph must match with the ID of the menu item in the menu resource.<\/p>\n\n\n\n<p>To check the ID of the destination, select a destination from the navigation graph in the left sidebar and on the right you should see an attribute containing the destination ID.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"548\" src=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Navigation-Graph-Destination-ID-1024x548.png\" alt=\"\" class=\"wp-image-3878\" srcset=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Navigation-Graph-Destination-ID-1024x548.png 1024w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Navigation-Graph-Destination-ID-300x161.png 300w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Navigation-Graph-Destination-ID-768x411.png 768w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Navigation-Graph-Destination-ID.png 1200w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Setup the NavController with the BottomNavigationView in the Activity class<\/strong><\/h3>\n\n\n\n<p>This is the final step in the process for setting up bottom navigation with the Jetpack navigation component. This step involves locating the NavController in the Activity class and associating it to the BottomNavigationView widget.<\/p>\n\n\n\n<p>The NavController is part of the Jetpack navigation component and is used for navigating between destinations inside the navigation graph.<\/p>\n\n\n\n<p>In the onCreate(&#8230;) method of the Activity class we will need to locate the NavController using the Navigation.findNavController(&#8230;) method.<\/p>\n\n\n\n<p>Then we will obtain the BottomNavigationView and then integrate it with the Jetpack navigation component using the NavigationUI.setupWithNavController(&#8230;) method.<\/p>\n\n\n\n<p>See the code sample for the MainActivity class below.<\/p>\n\n\n<p><script src=\"https:\/\/gist.github.com\/learntodroid\/16c688320bde0101ac131a916d059bf0.js\"><\/script><\/p>\n\n\n<p>If you make all of the changes above and run your Android app you should see something like the screen capture below showing navigation to the correct fragment based on the button in the BottomNavigationView selected.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/05\/Bottom-Navigation-View-with-Jetpack-Navigation-Component-1.gif\" alt=\"\" class=\"wp-image-3845\" width=\"300\" height=\"638\"\/><\/figure><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Bars containing icons and text that run along the bottom of the screen are common when implementing navigation in an Android app. This kind of navigation can be achieved using<\/p>\n","protected":false},"author":1,"featured_media":4480,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","footnotes":""},"categories":[12,24],"tags":[],"acf":[],"_links":{"self":[{"href":"http:\/\/10.0.0.14:32769\/wp-json\/wp\/v2\/posts\/3811"}],"collection":[{"href":"http:\/\/10.0.0.14:32769\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/10.0.0.14:32769\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/10.0.0.14:32769\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/10.0.0.14:32769\/wp-json\/wp\/v2\/comments?post=3811"}],"version-history":[{"count":4,"href":"http:\/\/10.0.0.14:32769\/wp-json\/wp\/v2\/posts\/3811\/revisions"}],"predecessor-version":[{"id":4574,"href":"http:\/\/10.0.0.14:32769\/wp-json\/wp\/v2\/posts\/3811\/revisions\/4574"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/10.0.0.14:32769\/wp-json\/wp\/v2\/media\/4480"}],"wp:attachment":[{"href":"http:\/\/10.0.0.14:32769\/wp-json\/wp\/v2\/media?parent=3811"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/10.0.0.14:32769\/wp-json\/wp\/v2\/categories?post=3811"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/10.0.0.14:32769\/wp-json\/wp\/v2\/tags?post=3811"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}