Android Navigation Tutorial for Fragments using Bottom Navigation

Hi everyone, after the release of Jetpack in android a lot of things are changed. I have published many tutorials related to Jetpack and here is another one for you. This post is about Android …

android navigation tutorial

Hi everyone, after the release of Jetpack in android a lot of things are changed. I have published many tutorials related to Jetpack and here is another one for you. This post is about Android Navigation Tutorial where we will be learning about another very useful architecture component which is Navigation.

In this post I will show you how you can use Navigation to navigate between fragments with Bottom Navigation View. I have already posted a tutorial about Android Bottom Navigation View. But everything in android is changing very quickly. And as a developer we need to adapt the changes as well.

So, before starting the tutorial I would like to recommend you all that start using Kotlin Language. I highly recommend that start using it, it is awesome. And that is why I will be using Kotlin for all the future posts. 

Do you prefer watching video? Here is a step by step video explanation about using Android Navigation with Bottom Navigation.

 

What is Navigation?

We did it many times. Navigation means navigating in our application for example opening activities, displaying fragments all these are navigation. And you know that we were using the Intent thing to start our activities and Fragment Transaction to display our fragments. These methods are a bit complex so to overcome this thing, now we have the Navigation Architecture Component.

Navigation Architecture Component

Navigation Architecture Component helps us to implement navigation very easily in our application. With navigation you do not need to write startActivity or Fragment Transaction anymore the navigation will handle everything very efficiently.

In this example we will see how we can do the fragment transactions with bottom navigation using navigation component. 

Enough talking guys, now let’s start our project.

Android Navigation Tutorial

Creating a new Android Studio Project

  • It is obvious that we need an android studio project.
  • So open Android Studio and create a new project.
creating android project
Empty Activity
  • Here we will select an Empty Activity to create our project.
Creating Android Project
Creating Android Project
  • Now remember you need to select the Language as Kotlin and you need to check Use AndroidX artifacts. (See the above image)

Adding Dependencies

  • Once your project is loaded, go to your app level build.gradle file and add these dependencies.

  • As you can see we have added the navigation components and the new material design. You just add these dependencies in your project and sync it with gradle.

Changing Theme

  • As we added the new Material Design, so we will change the theme to material component.
  • So go to app -> res -> values -> styles.xml.
styles.xml
styles.xml
  • And here you need to change the theme. I just changed AppCompat to MaterialComponents.

  • Now let’s create the BottomNavigationView in our MainActivity.

Creating Navigation File

  • We create an XML resource file that contains the navigation graph.
  • So right click on res folder and select new Android Resource File.
Navigation Resource File
Navigation Resource File
  • Now enter file name for your navigation resource file, and select Resource type as Navigation. (See the image below).
New Resource File
New Resource File

Creating Menu File

  • The same way we will create a Menu Resource File for our Bottom Navigation View.
Menu Resource File
Menu Resource File
  • Inside this file I will define 3 menus.

  • You can see the ids of the menu, the id is very important. With the id it will be connected to the fragments that we are going to create.

Creating Bottom Navigation View

  • Got to activity_main.xml and write the following code.

  • In the above code we have a fragment. And this is the area where we will display our fragments. These properties are very important for the fragment here.
    • app:navGraph=”@navigation/bottom_navigation” here we are defining that this fragment will be using this navigation graph. And it is nothing but the Navigation Resource File that we created.
    • app:defaultNavHost=”true” this is true means our navigation host can intercept when the back button is pressed.
    • android:name=”androidx.navigation.fragment.NavHostFragment” Defining that the fragment is a NavHostFragment.
  • The above code will generate the following layout.
Android Navigation Tutorial
Android Navigation Tutorial

Creating Fragments

  • Now we will create the fragments. I will tell you the steps to create a single fragment and then you can follow the same to create the remaining two fragments.
  • Right click on your package then New -> Fragment -> Fragment (Blank)
Creating Fragment
Creating Fragment
  • Now you need to put the Fragment name. It will also create a layout file for your fragment.
  • Make sure you are creating with Kotlin Language and also Make sure that the checkboxes are unchecked (Or it will create useless functions that we don’t need now). 
Creating Fragment
Creating Fragment
  • When you will click on Finish, a Kotlin file (the fragment) and an XML file (the layout) will be created. We will change both files.
  • First come inside HomeFragment.kt.

  • In the above code make sure you are using Fragment from the package androidx.fragment.app
  • Now come inside the layout file which is fragment_home.xml and modify it as below.

  • The same way you need to create all the other fragments (Favourites and Settings).

Adding Navigation

Assuming you have created all the fragments, let’s add navigation in our fragments and it is very easy.

  • Open the navigation file that we created bottom_navigation.xml. And you need to select the Design mode from the bottom (See the image for help) because it makes the life easier.
Android Navigation Tutorial
Android Navigation Tutorial
  • Now when you are in the design mode you will see an add button on the top (see the below image).
Android Navigation Tutorial
Android Navigation Tutorial
  • You need to click on the button and then you need to select the fragment. Here I am selecting fragment_home. And we need to repeat the process for all fragments.
  • Once you will add all fragments you will see your screen like this.
Android Navigation Tutorial
Android Navigation Tutorial
  • Now it is done. But you need to confirm one thing. The ids of these fragment should match with the id we given in the Menu.
Android Navigation Tutorial
Android Navigation Tutorial
  • So when you select a fragment in this screen. You see the attributes on the right side, here you can see the ID. And this ID should match with the ID inside the menu resource file. This is very important or else it will not work. 
  • Now finally come to MainActivity.kt and write the following code.

  • And that’s all, now you can run your application.
Android Navigation Tutorial
Android Navigation Tutorial
  • Bingo! It is working absolutely fine.

Android Navigation Tutorial Source Code

In case you are not able to create this app or having some issues following the post. You can get the source code from the GitHub repository given below.

[sociallocker id=1372] Android Navigation Tutorial Source Code Download [/sociallocker]

So that is all for this post friends. I hope you found it useful and you learned something new. If you want me to keep posting tutorials like this then please support me. You can support me by sharing this post with your friends. So please share it in your social profiles. And if you want to ask something your comments are welcome.

Hi, my name is Belal Khan and I am a Google Developers Expert (GDE) for Android. The passion of teaching made me create this blog. If you are an Android Developer, or you are learning about Android Development, then I can help you a lot with Simplified Coding.

Expand Your Knowledge: Next Tutorial Picks

0 0 votes
Article Rating
Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x