Bottom Navigation Android Example using Fragments

In Android, there are many options for making navigation easy in your application for the user. Bottom Navigation Bar is one of them. Bottom Navigation Bar always stays at the bottom of your application and …

bottom navigation android tutorial

In Android, there are many options for making navigation easy in your application for the user. Bottom Navigation Bar is one of them. Bottom Navigation Bar always stays at the bottom of your application and provides navigation between the views of your application. So in this Bottom Navigation Android Example, we will see how we combine the Bottom Navigation and Fragments.

Android Bottom Navigation

Below you can see a Bottom Navigation.

bottom navigation android
Bottom Navigation Android

I guess many of you are already aware with this component, or you might have seen this thing in some applications. We use Bottom Navigation When we have at least 3 top level navigation views.

Using Bottom Navigation in Android

It is very easy, you can create a Bottom Navigation Activity in your project by following ways.

#1 you just need to use <android.support.design.widget.BottomNavigationView />, if you want to do it in XML.

#2 Android Studio also have a predefined template for creating BottomNavigationView, when you create a new Activity you can select Bottom Navigation Activity, as shown in the image.

bottom navigation android activity
Bottom Navigation Android Activity

#3 While creating an Android Project you can select Bottom Navigation Activity from the template.

Bottom Navigation Android Activity from Templates
Bottom Navigation Android Activity from Templates

Bottom Navigation Android Example

Now lets see everything in an Android Project.

Defining Colors and Strings

  • I have created a project named BottomNavigationExample using a Bottom Navigation Activity. You can choose Empty Activity, it will not make any difference.
  • Now first, we will define the colors. You can change the colors to anything you want. So define the following in your colors.xml.

 

  • Now come to strings.xml and define the following strings.

Customizing Bottom Navigation View

  • Now come to activity_main.xml and modify it as shown below.

Remember for <android.support.design.widget.BottomNavigationView />we can use the following properties

  • app:itemIconTint : for defining the Item Icon color.
  • app:itemTextColor : for defining the Item Text Color.
  • android:background : for defining the Bottom Navigation View background.
  • app:menu : for defining the menu that we need to display in the Bottom Navigation View.

Now, if you created the project using Bottom Navigation Activity template, a menu file named navigation.xml is created by default inside the menu folder. If it is not created you can create it manually as well. Here we define all the menu items that we need to display in the Bottom Navigation Bar.

  • So, the above codes will produce the following Layout for our Main Activity.
botton navigation android activity
Bottom Navigation Android Activity
  • If you have used the predefined template for creating Bottom Navigation View, then you will have some codes in the MainActivity.java by default. We will remove those codes and change the MainActivity as shown below, so that we can learn everything.

Creating Fragments

For each of the view we need to create a layout resource file and a fragment class to inflate the view. As we have 4 different views to be switched we need to create 4 layout resource files and 4 java classes. Every class and resource file is almost the same as we don’t have anything other than a simple TextView in the screens.

Creating Layout Resource Files

  • Create fragment_home.xml, fragment_dashboard.xml, fragment_notifications.xml and fragment_profile.xml.
  • All the files will have the following code in it.

  • Don’t forget to change the text value of the TextView in each file.

Creating Fragments

  • Now create java classes named, HomeFragment.java, DashboardFragment.java, NotificationsFragment.java and ProfileFragment.java.
  • Each file will contain the following code in it.

  • Don’t forget to change the layout resource id (R.layout.file_name) with the layout that you want to display for the fragment. 

Switching Fragments

  • Now we will switch the screens or fragments when the bottom navigation menu is clicked. We also need to load some fragment initially which is HomeFragment in this case.
  • First we will create a method to switch the fragment. I have created the following method named loadFragment() which is taking Fragment is an object.

  • We will call the above method inside onCreate() to load the default fragment on starting.

  • In onCreate() we also defined the BottomNavigationView object. We initialized it using findViewById() method and we attached the listener to detect the Navigation Item Selection.
  • Now, we need to implement OnNavigationItemSelectedListener interface in the activity class.

  • With the above interface we will get method, and it will be called whenever we will tap on an option from the Bottom Navigation View.

  • In the above method we will switch the fragments.

  • So, the final code that we have for the MainActivity.java is.

  • Now, you can try running the application.
Bottom Navigation Android Example
Bottom Navigation Android Example
  • As you can see it is working absolutely fine.
  • Now you can design your fragments as you want, you can create some complex User Interface there, you can fetch some data from network to display it using a RecyclerView. Check the Dynamic RecyclerView Tutorial.

Bottom Navigation Android Example Source Code

If you are having any kind of problem creating Bottom Navigation, then here is my source code for you.

Bottom Navigation Android Source Code Download

So that’s all for this Bottom Navigation Android Tutorial friends. I hope the post helped you to learn about Bottom Navigation. If it was helpful to you, then please give me a SHARE. Thank You 🙂

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