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

Question

How to implement bottom navigation tab as per the google new guideline (Pure android). Is there any example.?

Ref: https://www.google.com/design/spec/components/bottom-navigation.html

Solution 1

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;
            }
        });

Solution 2

Here first custom solution as far as I know.

UPDATE:

Official BottomNavigationView is out in Support lib 25.

Solution 3

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;

@Override
protected 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

Solution 4

There are no code examples out there. Although there are custom libraries which can do the job as of now.(as mentioned in the posts above) I would not recommend using TabLayout to achieve this, since in the design guidelines for Bottom Navigation Tab its clearly mentioned that swiping the screen should not scroll pages horizontally. However, TabLayout extends HorizontalScrollView and its main motive is to facilitate scrolling, even though you can disable that, it won't be ideal.

Solution 5

As user6146138 said, https://github.com/roughike/BottomBar is a great implementation. And you can check out a great tutorial on it here, which is really easy to follow and part 2 shows you how to use it with fragments attached.

Another nice implementation is https://github.com/aurelhubert/ahbottomnavigation if you want to check it out. I don't know of any tutorial on it, but the instructions at the link are good enough IMO.

View more solutions

Comments

[Prashant]

I've implemented BottomNavigationView in a best possible way. Please visit this: stackoverflow.com/a/44967021/2412582

[Lion789]

I tried using roughike but keep having the first tab auto-selected - any idea why?

[ninjachippie]

@Lion789 Do you mean initially? Or always? Do you not want the first tab to be initially selected? Can you describe the issue in more detail, please.

[Bronx]

"layout_behavior" should be in RelativeLayout, and "layout_scrollFlags" doesn't work with BottomNavigationView

[silentsudo]

Its working for me check my answer at gitlab.com/ashish29agre/…

[Patric]

I agree... Even when turning off swiping, there is no easy way to get rid of the slide like animation and have a fade in or slide up instead.