DEV Community

loading...

Navigation Component Android | BottomNavigationView Examples

rrtutors
I am an Android and Flutter Developer. Having 7+ Years of Experience in Mobile application development. Looking for article writers on my website.
Originally published at rrtutors.com Updated on ・2 min read

The Navigation Component simplifies implementing navigation from different button events to more complex events. Bottom Navigation View is a material component that makes it easy to explore and switch between the top-level destinations in single click or tap In this post we will cover how to integrate BottomNavigationView with Navigation Component with Android Studio Tutorial

Alt Text

The Navigation component contain main three properties.
Navigation Graph
NavHost
NavConteroller

How to use NavigationView in Android



With navigation component we can reduce boilerplate code for fragment transactions and avoid any manual fragment transaction Handling

BottomNavigationView

The BottomNavigationView is an alternative place to put actions and navigation buttons from the top toolbar

We are going to design the Bottom NavigationBar like below

T0 Work with Navigation component we need to add below dependencies in build.gradle file

dependencies {
  def nav_version = "2.3.0"//add latest version

  // Java language implementation
  implementation "androidx.navigation:navigation-fragment:$nav_version"
  implementation "androidx.navigation:navigation-ui:$nav_version"   
  implementation 'com.google.android.material:material:1.0.0-beta01'
}
Enter fullscreen mode Exit fullscreen mode

Let's read about
Navigation Graph

A navigation graph is a resource file that contains all of your destinations and actions. The graph represents all of our app's navigation paths

To add Navigation graph by below steps


In the project window, right-click on the res directoty and select New > Android Resource File.
The New Resource File dialog appears.


Type a name in the File name filed, such as "nav_graph". Select Navigation from the Resource type drop-down list, and then click OK.

When we add our first navigation graph, Android Studio creates a navigation resource directory within the res directory. This directory contains our navigation graph resource file



Add destinations to the navigation graph


We are ready with our NavHostFragment, now we need to add our destination fragment from this NavHostFragment.

To create destination go to Navigation Editor and do the following things


In the Navigation Editor, click the New Destination icon +, and then click Create new destination.
In the New Android Component dialog that appears, create your fragment. For more information on fragments, see the fragment documentation.



Read Complete example with code at Navigation Component with BottomNavigationView Android

Discussion (0)

Forem Open with the Forem app