Learn2Crack

Learn2Crack

Home Android Development Android using BottomNavigationView

Bottom Navigation Bar is a new a UI component in Material Design for providing UI navigation. You may have seen this in the new YouTube UI. It provides easier navigation.

You can add this Bottom Navigation bar using the BottomNavigationView widget from the design support library. In this tutorial, we will create an app with Bottom Navigation Bar and Fragments displayed for each menu action.

Creating Project

Here I have created an Android Studio project with package com.learn2crack.bottomnavigationview also Activity as MainActivity and layout as activity_main.

Adding Dependencies

Make sure you have Design Support library and Constraint Layout library in your build.gradle. Latest versions of Android Studio adds these libraries on new project creation.

Creating Navigation Menu

We need to create menu file with menu items defined. Here I have created menu_navigation.xml in res->menu directory.

menu_navigation.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@+id/action_home"
        android:title="@string/text_home"
        android:icon="@drawable/ic_home" />
    <item android:id="@+id/action_profile"
        android:title="@string/text_profile"
        android:icon="@drawable/ic_person" />
    <item android:id="@+id/action_settings"
        android:title="@string/text_settings"
        android:icon="@drawable/ic_settings" />
</menu>

Creating Layout

Our main layout has a Toolbar with BottomNavigationView widget along with a FrameLayout in content_main.xml which is used to display Fragments along with menus. The BottomNavigationView widget can be customized by modifying the following properties.

android:background
app:itemTextColor
app:itemIconTint

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.learn2crack.bottomnavigationview.MainActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

    </android.support.design.widget.AppBarLayout>

    <include layout="@layout/content_main" />

    <android.support.design.widget.BottomNavigationView
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="56dp"
        android:layout_gravity="bottom"
        android:background="@android:color/white"
        app:elevation="8dp"
        app:menu="@menu/menu_navigation" />

</android.support.design.widget.CoordinatorLayout>

content_main.xml

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.learn2crack.bottomnavigationview.MainActivity"
    tools:showIn="@layout/activity_main">

    <FrameLayout
        android:id="@+id/fragment_frame"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

Next, we need to create three layout files for three different fragments which get displayed when the Bottom Navigation menu item is clicked.

fragment_home.xml

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/text_home"
        android:textAppearance="@style/TextAppearance.AppCompat.Display2"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

fragment_profile.xml

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/text_profile"
        android:textAppearance="@style/TextAppearance.AppCompat.Display2"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

fragment_settings.xml

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/text_settings"
        android:textAppearance="@style/TextAppearance.AppCompat.Display2"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

Creating Fragments

We are creating three Fragments HomeFragment, ProfileFragment, SettingsFragment to inflate the Fragment layouts.

HomeFragment.java

package com.learn2crack.bottomnavigationview;

import android.app.Fragment;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class HomeFragment extends Fragment {

    public static HomeFragment newInstance() {

        return new HomeFragment();
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_home, container, false);
    }
}

ProfileFragment.java

package com.learn2crack.bottomnavigationview;

import android.app.Fragment;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class ProfileFragment extends Fragment {

    public static ProfileFragment newInstance() {

        return new ProfileFragment();
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_profile, container, false);
    }
}

SettingsFragment.java

package com.learn2crack.bottomnavigationview;

import android.app.Fragment;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class SettingsFragment extends Fragment {

    public static SettingsFragment newInstance() {

        return new SettingsFragment();
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_settings, container, false);
    }
}

Creating Activity

We have initialised BottomNavigationView widget. The OnNavigationItemSelectedListener listener interface is attached to the BottomNavigationView widget to listen for Bottom Navigation item clicks. We load the Fragment for the menu item clicks.

The Fragments are loaded using loadHomeFragment(), loadProfileFragment(), loadSettingsFragment() methods.

MainActivity.java

package com.learn2crack.bottomnavigationview;

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

public class MainActivity extends AppCompatActivity {

    private BottomNavigationView mBottomNavigationView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        setupBottomNavigation();

        if (savedInstanceState == null) {

            loadHomeFragment();
        }

    }

    private void setupBottomNavigation() {

        mBottomNavigationView = (BottomNavigationView) findViewById(R.id.bottom_navigation);

        mBottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {

                switch (item.getItemId()) {
                    case R.id.action_home:
                        loadHomeFragment();
                        return true;
                    case R.id.action_profile:
                        loadProfileFragment();
                        return true;
                    case R.id.action_settings:
                        loadSettingsFragment();
                        return true;
                }
                return false;
            }
        });
    }

    private void loadHomeFragment() {

        HomeFragment fragment = HomeFragment.newInstance();
        FragmentTransaction ft = getFragmentManager().beginTransaction();
        ft.replace(R.id.fragment_frame, fragment);
        ft.commit();
    }

    private void loadProfileFragment() {

        ProfileFragment fragment = ProfileFragment.newInstance();
        FragmentTransaction ft = getFragmentManager().beginTransaction();
        ft.replace(R.id.fragment_frame, fragment);
        ft.commit();
    }

    private void loadSettingsFragment() {

        SettingsFragment fragment = SettingsFragment.newInstance();
        FragmentTransaction ft = getFragmentManager().beginTransaction();
        ft.replace(R.id.fragment_frame, fragment);
        ft.commit();
    }
}

Screenshots

Complete Project Files

You can download the complete project as zip or fork from our Github repository.

Download (Github)

Download

Fork

Stay tuned!

Enjoy coding 🙂

Raj Amal

Raj Amal

Developer at Learn2Crack
Raj Amal is an Android Developer. He Loves to code and explores new technologies. He also authored a book Learning Android Google Maps
Raj Amal
Previous Post Android using SafetyNet to check Device Security Next Post Android Material Design Tabs with TabLayout
  • Sundeep Sharma
    Thanks Raj, nice tutorial.
  • Icaros
    Nice tutorial !!! Thank you so much !
  • Brian Yang
    Hey Raj,
    I’m wondering is there anyway you can add a custom slider or switch button in the bottom bar (i.e. replace the “Profile” Button with a slider or switch”? Thanks!
    • It is not possible using the BottomNavigationView widget. We need to use our own custom view.
  • Ashish Tiwari
    how can i make it like youtube bottom navigation because when i use 4 item UI changes only one name displayed which is selected
    • Add a new Item to menu_navigation.xml
  • jamal abo
    its close after Run!
  • Yosinaka
    It’s very helpful.Great!
  • LalaGumowa
    Design with errors, just turn the phone, failure
  • Nice tutorial!
Menu