Bottom Navigation Android Example using

Fragments
January 23, 2018 by Belal Khan 5 Comments

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.

Contents [hide]
 1 Android Bottom Navigation
 2 Using Bottom Navigation in Android
 3 Bottom Navigation Android Example
o 3.1 Defining Colors and Strings
o 3.2 Customizing Bottom Navigation View
o 3.3 Creating Fragments
 3.3.1 Creating Layout Resource Files
 3.3.2 Creating Fragments
o 3.4 Switching Fragments
 4 Bottom Navigation Android Example Source Code
o 4.1 Sharing is Caring:
o 4.2 Related

Android Bottom Navigation

Below you can see a Bottom Navigation.
 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

#3 While creating an Android Project you can select Bottom Navigation Activity from the
template.
 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.

colors.xml
1 <?xml version="1.0" encoding="utf-8"?>

2 <resources>
3 <color name="colorPrimary">#278be3</color>

4 <color name="colorPrimaryDark">#0f5998</color>

5 <color name="colorAccent">#4075a2</color>

6 <color name="colorNavIcon">#dae9f6</color>

7 <color name="colorNavText">#01294b</color>

8 </resources>

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

strings.xml
1 <resources>

3 <string name="app_name">Bottom Navigation Android Example</string>

5 <string name="title_home">Home</string>

6 <string name="title_dashboard">Dashboard</string>

7 <string name="title_notifications">Notifications</string>

8 <string name="title_profile">Profile</string>

10 </resources>

Customizing Bottom Navigation View

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

activity_main.xml
1 <?xml version="1.0" encoding="utf-8"?>

2 <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"

3 xmlns:app="http://schemas.android.com/apk/res-auto"

4 xmlns:tools="http://schemas.android.com/tools"

5 android:id="@+id/container"

6 android:layout_width="match_parent"

7 android:layout_height="match_parent"

8 tools:context="net.simplifiedcoding.bottomnavigationexample.MainActivity">

9
10 <FrameLayout

11 android:id="@+id/fragment_container"

12 android:layout_width="match_parent"

13 android:layout_height="match_parent"

14 android:layout_marginBottom="56dp"

15 android:text="@string/title_home"

16 app:layout_constraintLeft_toLeftOf="parent"

17 app:layout_constraintTop_toTopOf="parent" />

18

19 <android.support.design.widget.BottomNavigationView

20 android:id="@+id/navigation"

21 android:layout_width="0dp"

22 android:layout_height="wrap_content"

23 android:background="@color/colorPrimary"

24 app:itemIconTint="@color/colorNavIcon"

25 app:itemTextColor="@color/colorNavText"

26 app:layout_constraintBottom_toBottomOf="parent"

27 app:layout_constraintLeft_toLeftOf="parent"

28 app:layout_constraintRight_toRightOf="parent"

29 app:menu="@menu/navigation" />

30

31 </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.

navigation.xml
1 <?xml version="1.0" encoding="utf-8"?>

2 <menu xmlns:android="http://schemas.android.com/apk/res/android">

4 <item

5 android:id="@+id/navigation_home"

6 android:icon="@drawable/ic_home_black_24dp"

7 android:title="@string/title_home" />

9 <item

10 android:id="@+id/navigation_dashboard"

11 android:icon="@drawable/ic_dashboard_black_24dp"

12 android:title="@string/title_dashboard" />

13

14 <item

15 android:id="@+id/navigation_notifications"

16 android:icon="@drawable/ic_notifications_black_24dp"

17 android:title="@string/title_notifications" />

18

19 <item

20 android:id="@+id/navigation_profile"

21 android:icon="@drawable/ic_profile_black_24dp"

22 android:title="@string/title_profile" />

23

24 </menu>

 So, the above codes will produce the following Layout for our Main 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.

MainActivity.java
Java
1 package net.simplifiedcoding.bottomnavigationexample;

3 import android.os.Bundle;

4 import android.support.v7.app.AppCompatActivity;

6 public class MainActivity extends AppCompatActivity {

8 @Override

9 protected void onCreate(Bundle savedInstanceState) {

10 super.onCreate(savedInstanceState);

11 setContentView(R.layout.activity_main);

12 }

13

14 }
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.x

ml and fragment_profile.xml.
 All the files will have the following code in it.

fragment_home.xml
1 <?xml version="1.0" encoding="utf-8"?>

2 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

3 android:layout_width="match_parent"

4 android:layout_height="match_parent">

6 <TextView

7 android:layout_width="wrap_content"

8 android:layout_height="wrap_content"

9 android:layout_centerHorizontal="true"

10 android:layout_centerVertical="true"

11 android:text="Home"

12 android:textAppearance="@style/Base.TextAppearance.AppCompat.Large" />

13

14 </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.

HomeFragment.java
Java
1 package net.simplifiedcoding.bottomnavigationexample;

3 import android.os.Bundle;
4 import android.support.annotation.Nullable;

5 import android.support.v4.app.Fragment;

6 import android.view.LayoutInflater;

7 import android.view.View;

8 import android.view.ViewGroup;

10 /**

11 * Created by Belal on 1/23/2018.

12 */

13

14 public class HomeFragment extends Fragment {

15 @Nullable

16 @Override

17 public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle

18 savedInstanceState) {

19 //just change the fragment_dashboard

20 //with the fragment you want to inflate

21 //like if the class is HomeFragment it should have R.layout.home_fragment

22 //if it is DashboardFragment it should have R.layout.fragment_dashboard

23 return inflater.inflate(R.layout.fragment_home, null);

24 }

 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.

Java
1 private boolean loadFragment(Fragment fragment) {

2 //switching fragment
3 if (fragment != null) {

4 getSupportFragmentManager()

5 .beginTransaction()

6 .replace(R.id.fragment_container, fragment)

7 .commit();

8 return true;

9 }

10 return false;

11 }

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

Java
1 @Override

2 protected void onCreate(Bundle savedInstanceState) {

3 super.onCreate(savedInstanceState);

4 setContentView(R.layout.activity_main);

6 //loading the default fragment

7 loadFragment(new HomeFragment());

9 //getting bottom navigation view and attaching the listener

10 BottomNavigationView navigation = findViewById(R.id.navigation);

11 navigation.setOnNavigationItemSelectedListener(this);

12 }

 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.

Java
//implement the interface OnNavigationItemSelectedListener in your activity class
1
public class MainActivity extends AppCompatActivity implements
2
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.

Java
1 @Override

2 public boolean onNavigationItemSelected(@NonNull MenuItem item) {

4 return true;

5 }

 In the above method we will switch the fragments.

Java
1 @Override

2 public boolean onNavigationItemSelected(@NonNull MenuItem item) {

3 Fragment fragment = null;

5 switch (item.getItemId()) {

6 case R.id.navigation_home:

7 fragment = new HomeFragment();

8 break;

10 case R.id.navigation_dashboard:

11 fragment = new DashboardFragment();

12 break;

13

14 case R.id.navigation_notifications:

15 fragment = new NotificationsFragment();

16 break;

17

18 case R.id.navigation_profile:

19 fragment = new ProfileFragment();

20 break;

21 }

22

23 return loadFragment(fragment);
24 }

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

MainActivity.java
Java
1 package net.simplifiedcoding.bottomnavigationexample;

3 import android.os.Bundle;

4 import android.support.annotation.NonNull;

5 import android.support.design.widget.BottomNavigationView;

6 import android.support.v4.app.Fragment;

7 import android.support.v7.app.AppCompatActivity;

8 import android.view.MenuItem;

10 //implement the interface OnNavigationItemSelectedListener in your activity class

11 public class MainActivity extends AppCompatActivity implements

12 BottomNavigationView.OnNavigationItemSelectedListener {

13

14

15 @Override

16 protected void onCreate(Bundle savedInstanceState) {

17 super.onCreate(savedInstanceState);

18 setContentView(R.layout.activity_main);

19

20 //loading the default fragment

21 loadFragment(new HomeFragment());

22

23 //getting bottom navigation view and attaching the listener

24 BottomNavigationView navigation = findViewById(R.id.navigation);

25 navigation.setOnNavigationItemSelectedListener(this);

26 }

27

28

29 @Override
30 public boolean onNavigationItemSelected(@NonNull MenuItem item) {

31 Fragment fragment = null;

32

33 switch (item.getItemId()) {

34 case R.id.navigation_home:

35 fragment = new HomeFragment();

36 break;

37

38 case R.id.navigation_dashboard:

39 fragment = new DashboardFragment();

40 break;

41

42 case R.id.navigation_notifications:

43 fragment = new NotificationsFragment();

44 break;

45

46 case R.id.navigation_profile:

47 fragment = new ProfileFragment();

48 break;

49 }

50

51 return loadFragment(fragment);

52 }

53

54 private boolean loadFragment(Fragment fragment) {

55 //switching fragment

56 if (fragment != null) {

57 getSupportFragmentManager()

58 .beginTransaction()

59 .replace(R.id.fragment_container, fragment)

60 .commit();

61 return true;

62 }
63 return false;

64 }

 Now, you can try running the application.

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.

Download is Locked

Please support us, use one of the buttons below to unlock the content.

like

+1 us

tweet

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 🙂