In this blog, we will learn how to integrate or work with Navigation Component In Android. Before starting our topic, we will discuss Navigation in brief.
Navigation refers to the interaction section of the application, that allows users to navigate from one page to another page throughout the application. With the help of Android’s JetPack, we can create Navigation from simple UI (Buttons) to complex UI (Bottom Navigation, Navigation Drawer).
In this blog, we will demonstrate the Navigation Component by creating Bottom Navigation in-app and will see how the navigation component works.
1. Adding dependecies
In this step, we will add all the dependencies related to the Navigation component in our “build.gradle” file. Here, we have added only the Kotlin related dependencies, if you are working on Java, then can add Java-related dependencies. You can take references of the Developer console
|
1 2 3 4 5 6 7 8 9 |
val nav_version = "2.4.1" // Kotlin implementation("androidx.navigation:navigation-fragment-ktx:$nav_version") implementation("androidx.navigation:navigation-ui-ktx:$nav_version") // Jetpack Compose Integration implementation("androidx.navigation:navigation-compose:$nav_version") |
2. Adding the Navigation Graph & Menus
We can create the Navigation Graph class under the resource folder and select the Navigation under the Resource type drop-down list.
We can add the action to each fragment, so their click event works accordingly, we can see the graph related to the Navigation XML file in the Android studio in the design section.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
<?xml version="1.0" encoding="utf-8"?> <navigation xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/nav_graph" app:startDestination="@id/fragment1"> <fragment android:id="@+id/fragment1" android:name="com.example.demoapp.Fragment1" android:label="fragment_fragment1" tools:layout="@layout/fragment_fragment1" > <action android:id="@+id/action_fragment1_to_fragment2" app:destination="@id/fragment2" /> </fragment> <fragment android:id="@+id/fragment2" android:name="com.example.demoapp.Fragment2" android:label="fragment_fragment2" tools:layout="@layout/fragment_fragment2" > <action android:id="@+id/action_fragment2_to_fragment3" app:destination="@id/fragment3" /> </fragment> <fragment android:id="@+id/fragment3" android:name="com.example.demoapp.Fragment3" android:label="fragment_fragment3" tools:layout="@layout/fragment_fragment3" > <action android:id="@+id/action_fragment3_to_fragment1" app:destination="@id/fragment1" /> </fragment> </navigation> |
Adding the Menus file for Bottom Navigation
We have added only 3 fragments for test purposes, you can add multiple as per your need.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android"> <item android:id="@+id/screen_1" android:icon="@android:drawable/ic_menu_compass" android:title="Screen 1" /> <item android:id="@+id/screen_2" android:icon="@android:drawable/ic_menu_compass" android:title="Screen 2" /> <item android:id="@+id/screen_3" android:icon="@android:drawable/ic_menu_compass" android:title="Screen 3" /> </menu> |
3. Adding the click events and setting the Controllers
In this step, we will set up the final click events and controller with Navigation Component.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <fragment android:id="@+id/activity_main" android:name="androidx.navigation.fragment.NavHostFragment" android:layout_width="match_parent" android:layout_height="wrap_content" app:defaultNavHost="true" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" app:navGraph="@navigation/nav_graph" /> <com.google.android.material.bottomnavigation.BottomNavigationView android:id="@+id/activity_main_bottom_navigation_view" android:layout_width="match_parent" android:layout_height="wrap_content" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:menu="@menu/navigation_menu"/> </androidx.constraintlayout.widget.ConstraintLayout> |
We will add following line of code to set the controller in main activity. Navigation component interanally deal with click events on the basis of the pages declared in the navigation Graph
|
1 2 3 |
val navController = findNavController(this, R.id.activity_main) val bottomNavigationView = findViewById<BottomNavigationView>(R.id.activity_main) setupWithNavController(bottomNavigationView, navController) |
Conclusion:
In this blog, you have learned about the Navigation Component In Android.
You can check the mentioned link for more information about Navigation Component
Be the first to comment.