Headertab

Drop Down MenusCSS Drop Down MenuPure CSS Dropdown Menu

Thursday, 2 March 2017

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