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.
Table of Contents
Below you can see a Bottom Navigation.
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.
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.
#3 While creating an Android Project you can select Bottom Navigation Activity from the template.
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.
1 2 3 4 5 6 7 8 9 10 | <?xml version="1.0" encoding="utf-8"?> <resources> <color name="colorPrimary">#278be3</color> <color name="colorPrimaryDark">#0f5998</color> <color name="colorAccent">#4075a2</color> <color name="colorNavIcon">#dae9f6</color> <color name="colorNavText">#01294b</color> </resources> |
- Now come to strings.xml and define the following strings.
1 2 3 4 5 6 7 8 9 10 11 12 | <resources> <string name="app_name">Bottom Navigation Android Example</string> <string name="title_home">Home</string> <string name="title_dashboard">Dashboard</string> <string name="title_notifications">Notifications</string> <string name="title_profile">Profile</string> </resources> |
- Now come to activity_main.xml and modify it as shown below.
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 | <?xml version="1.0" encoding="utf-8"?> <android.support.constraint.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:id="@+id/container" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="net.simplifiedcoding.bottomnavigationexample.MainActivity"> <FrameLayout android:id="@+id/fragment_container" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_marginBottom="56dp" android:text="@string/title_home" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintTop_toTopOf="parent" /> <android.support.design.widget.BottomNavigationView android:id="@+id/navigation" android:layout_width="0dp" android:layout_height="wrap_content" android:background="@color/colorPrimary" app:itemIconTint="@color/colorNavIcon" app:itemTextColor="@color/colorNavText" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:menu="@menu/navigation" /> </android.support.constraint.ConstraintLayout> |
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.
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 | <?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android"> <item android:id="@+id/navigation_home" android:icon="@drawable/ic_home_black_24dp" android:title="@string/title_home" /> <item android:id="@+id/navigation_dashboard" android:icon="@drawable/ic_dashboard_black_24dp" android:title="@string/title_dashboard" /> <item android:id="@+id/navigation_notifications" android:icon="@drawable/ic_notifications_black_24dp" android:title="@string/title_notifications" /> <item android:id="@+id/navigation_profile" android:icon="@drawable/ic_profile_black_24dp" android:title="@string/title_profile" /> </menu> |
- So, the above codes will produce the following Layout for our Main 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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | package net.simplifiedcoding.bottomnavigationexample; import android.os.Bundle; import android.support.v7.app.AppCompatActivity; public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); } } |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:layout_centerVertical="true" android:text="Home" android:textAppearance="@style/Base.TextAppearance.AppCompat.Large" /> </RelativeLayout> |
- 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.
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 | package net.simplifiedcoding.bottomnavigationexample; import android.os.Bundle; import android.support.annotation.Nullable; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; /** * Created by Belal on 1/23/2018. */ public class HomeFragment extends Fragment { @Nullable @Override public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { //just change the fragment_dashboard //with the fragment you want to inflate //like if the class is HomeFragment it should have R.layout.home_fragment //if it is DashboardFragment it should have R.layout.fragment_dashboard return inflater.inflate(R.layout.fragment_home, null); } } |
- 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.
1 2 3 4 5 6 7 8 9 10 11 12 13 | private boolean loadFragment(Fragment fragment) { //switching fragment if (fragment != null) { getSupportFragmentManager() .beginTransaction() .replace(R.id.fragment_container, fragment) .commit(); return true; } return false; } |
- We will call the above method inside
onCreate()to load the default fragment on starting.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); //loading the default fragment loadFragment(new HomeFragment()); //getting bottom navigation view and attaching the listener BottomNavigationView navigation = findViewById(R.id.navigation); navigation.setOnNavigationItemSelectedListener(this); } |
- In
onCreate()we also defined the BottomNavigationView object. We initialized it usingfindViewById()method and we attached the listener to detect the Navigation Item Selection. - Now, we need to implement
OnNavigationItemSelectedListenerinterface in the activity class.
1 2 3 4 | //implement the interface OnNavigationItemSelectedListener in your activity class public class MainActivity extends AppCompatActivity implements BottomNavigationView.OnNavigationItemSelectedListener { |
- 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.
1 2 3 4 5 6 7 | @Override public boolean onNavigationItemSelected(@NonNull MenuItem item) { return true; } |
- In the above method we will switch the fragments.
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 | @Override public boolean onNavigationItemSelected(@NonNull MenuItem item) { Fragment fragment = null; switch (item.getItemId()) { case R.id.navigation_home: fragment = new HomeFragment(); break; case R.id.navigation_dashboard: fragment = new DashboardFragment(); break; case R.id.navigation_notifications: fragment = new NotificationsFragment(); break; case R.id.navigation_profile: fragment = new ProfileFragment(); break; } return loadFragment(fragment); } |
- So, the final code that we have for the MainActivity.java is.
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 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 | package net.simplifiedcoding.bottomnavigationexample; import android.os.Bundle; import android.support.annotation.NonNull; import android.support.design.widget.BottomNavigationView; import android.support.v4.app.Fragment; import android.support.v7.app.AppCompatActivity; import android.view.MenuItem; //implement the interface OnNavigationItemSelectedListener in your activity class public class MainActivity extends AppCompatActivity implements BottomNavigationView.OnNavigationItemSelectedListener { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); //loading the default fragment loadFragment(new HomeFragment()); //getting bottom navigation view and attaching the listener BottomNavigationView navigation = findViewById(R.id.navigation); navigation.setOnNavigationItemSelectedListener(this); } @Override public boolean onNavigationItemSelected(@NonNull MenuItem item) { Fragment fragment = null; switch (item.getItemId()) { case R.id.navigation_home: fragment = new HomeFragment(); break; case R.id.navigation_dashboard: fragment = new DashboardFragment(); break; case R.id.navigation_notifications: fragment = new NotificationsFragment(); break; case R.id.navigation_profile: fragment = new ProfileFragment(); break; } return loadFragment(fragment); } private boolean loadFragment(Fragment fragment) { //switching fragment if (fragment != null) { getSupportFragmentManager() .beginTransaction() .replace(R.id.fragment_container, fragment) .commit(); return true; } return false; } } |
- Now, you can try running the application.
- 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.
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.
![Circular Progress Bar Android Tutorial [4 Easy Steps]](https://i0.wp.com/www.simplifiedcoding.net/wp-content/uploads/2021/01/Circular-Progress-Bar-Android.jpg?fit=300%2C169&ssl=1 "Circular Progress Bar Android Tutorial [4 Easy Steps]")
Nice tutorial. Thank you.
Sir, I need help on search function on the data that is loaded from MySQL database using volley. Please message me through my email: sabs.dex5@gmail.com
Hi belal can you post a tutorial on how to make a WordPress to android app with image
Can you find a way to change the color of Bottom Navigation when you switch?
BottomNavigationView navigationView = findViewById(R.id.navigation);
ColorStateList iconsColorStates = new ColorStateList(
new int[][]{
new int[]{-android.R.attr.state_checked},
new int[]{android.R.attr.state_checked}
},
new int[]{
getResources().getColor(R.color.whiteShade),
getResources().getColor(R.color.colorPrimaryDark)
});
navigationView.setItemIconTintList(iconsColorStates);
navigationView.setItemTextColor(iconsColorStates);
Thnak you very much for this great tutorial
really helpful…thanks 🙂
Hello Sir, could you give your opinion please. I need to create a newsreader app with volley, recyclerview and 3 tabs. The 3 tabs should have different display from a single json feed (all stories, sport only, one other category). I know how to parse json feed only in one screen but how best to split it between fragments?
Hello. Did you get any assistance on your question. Am working on a similar project
I was trying to get rid of the default animation given by the bottom navigation . I wasn’t able to . please if you could see into it .
how to create navigation sliding bar and bottom navigaton bar in the same app…
Hello Belal Khan!
I’m having a hard time understanding and applying fragments without tutorial. An example is I did not understand and did not see how to handle events with fragments. Example, I want to set up an application with side menu where the user can insert data, interact with the application and others, but I can only do this in brick mode with Activities passing from one to another. As it was antigmante.
Do you have any tutorials that have you doing it?
NOTE: I’m new to Android promation practice, but I already know Java.
Finally a nice, easy and noobfriendly tutorial ! Thank you
Hello Bilal,
In the loadfragment method, I am getting the error
Cannot resolve symbol ‘fragment_container’
Please help.
fragment_container is id of Framelayout in activity so i think you should check that id
Sir…I want to create tabs in tablayout from CategoryAdapter or CategoryModel and data will come from Admin panel.All categories are showing in recyclerview correct.but I want to show them in tabs.I have ten category name and I want ten tabs in tablayout.I search this type of code everywhere but didn’t find include stackoverflow . Could you help me because I am your good follower.I gave up all hopes.
Please explain exactly where you are being stuck?
how to avoid overlap fragment with all actiovity plz say.how tosolve this.u
Hey bro, thankx for uploading such a useful concept, it really helped me. But I’ve one error in fragment,
return inflater.inflate(R.layout.fragment_team, null);
showing red color in fragment_team, I’ve created fragment_team.xml layout file still it’s showing the same error, If you could solve it , it would be really helpful, Thank You In Advance!
thanku thanku so much brother. no other sites makes coding this easy.
hi ,thanks.
but I have a big questions.I wanna set onClickListener in fragment …
how can I do that???
waiting for your answer
Same as you do it in activity.
I have a question.
It seems like every time a user navigates to a tab, an entirely new fragment is created along with its view hierarchy, and data for the views also be reapplied all over again. Why are ‘nt we making both fragments only once and just switching to and fro?
Nice article BTW 🙂
Yes, it is what I noticed… every time you switch from fragment A to B, B is created again.
what is fragment_container in loadFragment?
Great and clear, I like to use Bottom Navigation and Fragments in my own app, but I have some doubts; how do you pass and retrieve parameters in Fragments?
My app uses intents so I use intent.putExtra and intent.getExtra
How to do this with Fragments?
Thank you
Did You use androidx.fragment.app.Fragment or android.app.Fragment as import in main_activity.kt because i tried both it gives errors i’m not able to solve it