Android Bottom Navigation Bar tutorial with Fragments

The Bottom Navigation Bar View has been in the material design guidelines for some time, but it hasn’t been easy for us to implement it into our apps. 
In the previous post we looked in BottomSheet used for navigation. 
Bottom Navigation Bar for android provides a implicit way to provide seamless way of navigation to your app. Some applications have built their own solutions, whilst others have relied on third-party open-source libraries to get the job done. Now the design support library is seeing the addition of this bottom navigation bar, let’s take a dive into how we can use it!

1.Bottom Navigation Bar

  <android.support.design.widget.BottomNavigationView
  android:id="@+id/navigation"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:layout_alignParentBottom="true"
  android:background="@color/colorPrimaryDark"
  app:itemIconTint="@color/nav_item_state_list"
  app:itemTextColor="@color/nav_item_state_list"
  app:menu="@menu/bottom_navigation_items"/>

You’ll notice that the widget has a couple of attributes set on it. We can use these to set menu items we wish to display and the colours to be used throughout the Bottom Navigation View:

• app:itemBackground — The background color to be used for the bottom navigation menu
• app:itemIconTint — The tint to be used for the icons in the bottom navigation menu
• app:itemTextColor — The color to be used for the text in the bottom navigation menu
• app:menu — The menu resource to be used to display items in the bottom navigation menu

We can also set these values programatically by using the following methods on our BottomNavigationView instance:

• inflateMenu(int menuResource) — Inflate a menu for the bottom navigation view using a menu resource identifier.
• setItemBackgroundResource(int backgroundResource) — The background to be used for the menu items.
• setItemTextColor(ColorStateList colorStateList) — A ColorStateList used to color the text used for the menu items
• setItemIconTintList(ColorStateList colorStateList) — A ColorStateList used to tint the icons used for the menu items.
• 
  

2. Creating New Project

1. In Android Studio, go to File ⇒ New Project and fill all the details required to create a new project. I gave my project name as FAB and package name as com.androidxu.androidbottomnavigationbar

2. Open build.gradle and add design support library dependency.

dependencies {
  compile fileTree(include: ['*.jar'], dir: 'libs')
  androidTestCompile('com.android.support.test.
espresso:espresso-core:2.2.2', {
  exclude group: 'com.android.support', module: 'support-annotations'
  })
  testCompile 'junit:junit:4.12'
  compile 'com.android.support:appcompat-v7:25.0.0'
  compile 'com.android.support:design:25.0.0'
  compile 'com.android.support:support-v4:25.0.0'
}

Open the layout file of main activity (activity_main.xml) and do the below changes. We are adding a framelayout with bottomNavigationView.

Activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  android:id="@+id/activity_main"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  tools:context="com.androidxu.androidbottomnavigationbar.MainActivity">

  <FrameLayout
  android:id="@+id/frame_layout"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:layout_above="@+id/navigation"
  android:animateLayoutChanges="true"
  >

  </FrameLayout>

  <android.support.design.widget.BottomNavigationView
  android:id="@+id/navigation"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:layout_alignParentBottom="true"
  android:background="@color/colorPrimaryDark"
  app:itemIconTint="@color/nav_item_state_list"
  app:itemTextColor="@color/nav_item_state_list"
  app:menu="@menu/bottom_navigation_items"/>
</RelativeLayout>

Next In  the menus folder res->menu create a menu items as bottom_navigation_items.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
  <item
  android:id="@+id/action_item1"
  android:icon="@drawable/ic_account_box_black_24dp"
  android:title="@string/item_1"/>
  <item
  android:id="@+id/action_item2"
  android:icon="@drawable/ic_account_circle_black_24dp"
  android:title="@string/item_2"/>
  <item
  android:id="@+id/action_item3"
  android:icon="@drawable/ic_assignment_ind_black_24dp"
  android:title="@string/item_3"/>
  <item
  android:id="@+id/action_item4"
  android:icon="@drawable/ic_assignment_ind_black_24dp"
  android:title="@string/item_4"/>
</menu>

Next Create Fragments View by adding ImageView and textView which we can opened by clicking items in 

navigation bar.

Fragment_four.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical" android:layout_width="match_parent"
  android:layout_height="match_parent">

  <ImageView
  android:id="@+id/android_image"
  android:layout_width="30dp"
  android:layout_height="30dp"
  android:layout_centerInParent="true"
  android:src="@mipmap/ic_launcher"/>

  <TextView
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_below="@id/android_image"
  android:layout_centerHorizontal="true"
  android:text="Shop"

  android:textSize="20sp" />
</RelativeLayout>

Similarly Create other fragments such as Fragment_two.xml,Fragment_three.xml.

Next we need to add those in the setOnNavigationItemSelectedListener() event which will inflate the 

fragments on the click events of the navigation View.

Add the below code in MainActivity.java

Mainactivity.java

package com.androidxu.androidbottomnavigationbar;

import android.support.annotation.NonNull;
import android.support.design.widget.BottomNavigationView;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentTransaction;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.MenuItem;

public class MainActivity extends AppCompatActivity {

  @Override
  protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  BottomNavigationView bottomNavigationView = (BottomNavigationView)
  findViewById(R.id.navigation);

  bottomNavigationView.setOnNavigationItemSelectedListener
  (new BottomNavigationView.OnNavigationItemSelectedListener() {
  @Override
  public boolean onNavigationItemSelected(@NonNull MenuItem item) {
  Fragment selectedFragment = null;
  switch (item.getItemId()) {
  case R.id.action_item1:
  selectedFragment = ItemOnFragment.newInstance();
  break;
  case R.id.action_item2:
  selectedFragment = ItemTwoFragment.newInstance();
  break;
  case R.id.action_item3:
  selectedFragment = ItemThreeFragment.newInstance();
  break;
  case R.id.action_item4:
  selectedFragment = ItemFourFragment.newInstance();
  break;
  }
  FragmentTransaction transaction = getSupportFragmentManager().
beginTransaction();
  transaction.replace(R.id.frame_layout, selectedFragment);
  transaction.commit();
  return true;
  }
  });

  //Manually displaying the first fragment - one time only
  FragmentTransaction transaction = getSupportFragmentManager().
beginTransaction();
  transaction.replace(R.id.frame_layout, ItemOnFragment.newInstance());
  transaction.commit();

  //Used to select an item programmatically
  //bottomNavigationView.getMenu().getItem(2).setChecked(true);

  }
}

Using the BottomNavigationView we can easily handle the display of both enabled and disabled menu items. To make the view handle these cases we only simply need to make two changes:

• First we need to create a selector file for our enabled / disabled colors. If you haven’t used one of these before, it essentially allows us to define the look and feel based on the state of an item.

And that’s it!

Doesn’t seem like much at all does it — I hope you can see now just how straight forward it is to implement the Bottom Navigation view using the design support library. A lot of apps are using the design support library already, so removing the need for third-party libraries is pretty handy 😄 If you have any questions on the Bottom Navigation View then please leave a response or drop me a tweet!

For code refer to the github link : Android bottom navigation Bar