How to implement bottom navigation tab as per the google new guideline How to implement bottom navigation tab as per the google new guideline android android

How to implement bottom navigation tab as per the google new guideline


Here first custom solution as far as I know.

UPDATE:

Official BottomNavigationView is out in Support lib 25.


You can use the support library v25.

Add in your build.gradle

compile 'com.android.support:design:25.0.0'

Add the BottomNavigationView in your layout:

<android.support.design.widget.BottomNavigationView        android:id="@+id/bottom_navigation"        app:menu="@menu/bottom_navigation_menu"        android:layout_width="match_parent"        android:layout_height="wrap_content"        app:itemBackground="@color/colorPrimary"        app:itemIconTint="@color/mycolor"        app:itemTextColor="@color/mycolor"/>

Then create a menu file (menu/bottom_navigation_menu.xml):

<?xml version="1.0" encoding="utf-8"?><menu xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto">    <item        android:id="@+id/my_action1"        android:enabled="true"        android:icon="@drawable/my_drawable"        android:title="@string/text"        app:showAsAction="ifRoom" />    ....</menu>

Then add the listener:

BottomNavigationView bottomNavigationView = (BottomNavigationView)                findViewById(R.id.bottom_navigation);bottomNavigationView.setOnNavigationItemSelectedListener(        new BottomNavigationView.OnNavigationItemSelectedListener() {            @Override            public boolean onNavigationItemSelected(@NonNull MenuItem item) {                switch (item.getItemId()) {                    case R.id.my_action1:                        //Do something...                        break;                }                return false;            }        });


Now, BottomNavigationView is added in design support lib v25.0.0 released on October 2016

Add BottomNavigationView into your xml file.

For ex. activity_main.xml

<?xml version="1.0" encoding="utf-8"?><RelativeLayout 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:id="@+id/activity_main"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context="priyank.patel.bottomnavigationdemo.MainActivity">    <FrameLayout        android:id="@+id/main_container"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:layout_above="@+id/bottom_navigation"        android:layout_alignParentTop="true">    </FrameLayout>    <android.support.design.widget.BottomNavigationView        android:id="@+id/bottom_navigation"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_alignParentBottom="true"        app:itemBackground="@color/colorPrimary"        app:itemIconTint="@android:color/white"        app:itemTextColor="@android:color/white"        app:menu="@menu/bottom_navigation_main" /></RelativeLayout>

Add xml for menu items into menu folder.

For ex. bottom_navigation_main.xml

<?xml version="1.0" encoding="utf-8"?><menu xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto">    <item        android:id="@+id/action_favorites"        android:enabled="true"        android:icon="@drawable/ic_favorite_white_24dp"        android:title="@string/text_favorites"        app:showAsAction="ifRoom" />    <item        android:id="@+id/action_video"        android:enabled="true"        android:icon="@drawable/ic_music_video_white_24dp"        android:title="@string/text_video"        app:showAsAction="ifRoom" />    <item        android:id="@+id/action_music"        android:enabled="true"        android:icon="@drawable/ic_audiotrack_white_24dp"        android:title="@string/text_music"        app:showAsAction="ifRoom" /></menu>

Set OnNavigationItemSelectedListener on BottomNavigationView in your activity class.

For ex. MainActivity.java

import android.support.design.widget.BottomNavigationView;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentManager;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 {private Fragment fragment;private FragmentManager fragmentManager;@Overrideprotected void onCreate(Bundle savedInstanceState) {    super.onCreate(savedInstanceState);    setContentView(R.layout.activity_main);    fragmentManager = getSupportFragmentManager();    fragment = new FavouriteFragment();    final FragmentTransaction transaction = fragmentManager.beginTransaction();    transaction.add(R.id.main_container, fragment).commit();    BottomNavigationView bottomNavigationView = (BottomNavigationView)            findViewById(R.id.bottom_navigation);    bottomNavigationView.setOnNavigationItemSelectedListener(            new BottomNavigationView.OnNavigationItemSelectedListener() {                @Override                public boolean onNavigationItemSelected(MenuItem item) {                    switch (item.getItemId()) {                        case R.id.action_favorites:                            fragment = new FavouriteFragment();                            break;                        case R.id.action_video:                            fragment = new VideoFragment();                            break;                        case R.id.action_music:                            fragment = new MusicFragment();                            break;                    }                    final FragmentTransaction transaction = fragmentManager.beginTransaction();                    transaction.replace(R.id.main_container, fragment).commit();                    return true;                }            });    }}

Checkout here for BottomNavigation-Demo