BottomNavigationView in android

Hello friends,

Today we learn about how to make bottom tab navigation system.Most of developer use viewpager but this is not right way because viewpager is very complex handling switching tab and maintaining tab status so if you want to learn and developed bottom navigation tab then use BottomNavigationView.

Follow below instructions...

Create new project.

build.gradle

apply plugin: 'com.android.application'

android {
    compileSdkVersion 25
    buildToolsVersion "25.0.2"
    defaultConfig {
        applicationId "com.samset.bottomnavigationviewsample"
        minSdkVersion 15
        targetSdkVersion 25
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

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'
    })
    compile 'com.android.support:appcompat-v7:25.2.0'
    compile 'com.android.support:design:25.2.0'
    compile 'com.android.support:support-v4:25.2.0'
    testCompile 'junit:junit:4.12'
}

MainActivity.java

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;

import android.widget.TextView;

import com.samset.bottomnavigationviewsample.frament.HomeFragment;

import com.samset.bottomnavigationviewsample.frament.NotificationFragment;

import com.samset.bottomnavigationviewsample.frament.SearchFragment;

public class MainActivity extends AppCompatActivity {

    private static final String SELECTED_ITEM = "selected_item";

    private BottomNavigationView navigationView;

    private TextView tvTitle;

    private int selected;

    @Override

    protected void onCreate(Bundle savedState) {

        super.onCreate(savedState);

        setContentView(R.layout.activity_main);

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

        tvTitle = (TextView) findViewById(R.id.tvTitle);

        MenuItem selectedItem;

        if (savedState != null) {

            selected = savedState.getInt(SELECTED_ITEM, 0);

            selectedItem = navigationView.getMenu().findItem(selected);

        } else {

            selectedItem = navigationView.getMenu().getItem(0);

        }

        selectFragment(selectedItem);

        navigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {

            @Override

            public boolean onNavigationItemSelected(@NonNull MenuItem item) {

                selectFragment(item);

                return true;

            }

        });

    }

    @Override

    protected void onSaveInstanceState(Bundle outState) {

        outState.putInt(SELECTED_ITEM, selected);

        super.onSaveInstanceState(outState);

    }

    private void selectFragment(MenuItem item) {

        switch (item.getItemId()) {

            case R.id.menu_home:

                beginTransaction(new HomeFragment());

                break;

            case R.id.menu_notifications:

                beginTransaction(new SearchFragment());

                break;

            case R.id.menu_search:

                beginTransaction(new NotificationFragment());

                break;

        }

        // update selected item

        selected = item.getItemId();

        // uncheck the other items.

        for (int i = 0; i< navigationView.getMenu().size(); i++)

        {

            MenuItem menuItem = navigationView.getMenu().getItem(i);

            menuItem.setChecked(menuItem.getItemId() == item.getItemId());

        }

        tvTitle.setText(item.getTitle());

    }

    private void beginTransaction(Fragment fragment)

    {

        if (fragment != null) {

            FragmentTransaction ft = getSupportFragmentManager().beginTransaction();

            ft.add(R.id.mainContainer, fragment, fragment.getTag());

            ft.commit();

        }

    }

    @Override

    public void onBackPressed() {

        MenuItem homeItem = navigationView.getMenu().getItem(0);

        if (selected != homeItem.getItemId()) {

            selectFragment(homeItem);

        } else {

            super.onBackPressed();

        }

    }

}

activity_main.xml

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

<LinearLayout 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"

    android:orientation="vertical">

    <android.support.v7.widget.Toolbar

        android:layout_width="match_parent"

        android:layout_height="0dp"

        android:layout_weight="0.1"

        android:background="@color/colorPrimaryDark">

        <TextView

            android:id="@+id/tvTitle"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="Title"

            android:textAppearance="?android:attr/textAppearanceMedium"

            android:textColor="#fff" />

    </android.support.v7.widget.Toolbar>

    <FrameLayout

        android:background="#f1f1f1"

        android:id="@+id/mainContainer"

        android:layout_width="match_parent"

        android:layout_height="0dp"

        android:layout_weight="0.8" />

    <android.support.design.widget.BottomNavigationView

        android:background="@drawable/nav_shape"

        android:id="@+id/navigation"

        android:layout_width="match_parent"

        android:layout_height="0dp"

        android:layout_gravity="start"

        android:layout_weight="0.1"

        app:menu="@menu/bottom_nav_items" />

</LinearLayout>

HomeFragment.java

package com.samset.bottomnavigationviewsample.frament;

import android.os.Bundle;

import android.support.v4.app.Fragment;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import com.samset.bottomnavigationviewsample.R;

/**

 * A simple {@link Fragment} subclass.

 */

public class HomeFragment extends Fragment {

    public HomeFragment() {

        // Required empty public constructor

    }

    @Override

    public View onCreateView(LayoutInflater inflater, ViewGroup container,

                             Bundle savedInstanceState) {

        // Inflate the layout for this fragment

        return inflater.inflate(R.layout.fragment_home, container, false);

    }

}

fragement_home.xml

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

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

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:background="#fffeee">

    <TextView

        android:textSize="30dp"

        android:layout_centerInParent="true"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="Home" />

</RelativeLayout>

Thank you!

SourceCode

LiveSample