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

I've implemented BottomNavigationView in a best possible way. Please visit this: https://stackoverflow.com/a/44967021/2412582 — Prashant, Jul 10 '17 at 13:40

Geralt_Encore · Answer 1 · 2016-10-19T21:49:30.490

13

Here first custom solution as far as I know.

UPDATE:

Official BottomNavigationView is out in Support lib 25.

edited Oct 19 '16 at 21:49

answered Mar 17 '16 at 12:46

Geralt_Encore

3,721
2
31
46

score 13 · Answer 2 · edited Sep 23 '17 at 05:20

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

score 10 · Answer 3 · answered Nov 23 '16 at 14:42

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

score 5 · Answer 4 · answered Mar 23 '16 at 20:40

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.

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. — Patric, Aug 14 '17 at 07:10

ninjachippie · Answer 5 · 2016-04-13T09:29:49.170

2

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.

edited Apr 13 '16 at 09:29

answered Apr 12 '16 at 17:23

ninjachippie

410
1
5
14

I tried using roughike but keep having the first tab auto-selected - any idea why? – Lion789 Oct 08 '16 at 03:52
@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. – ninjachippie Oct 10 '16 at 13:48

score 1 · Answer 6 · answered Mar 17 '16 at 12:48

1

As of now there are no code examples and the Bottom bar is not in the support library (yet). I have found a third party library that mimics the guidelines though. It can be found here.

answered Mar 17 '16 at 12:48

Niels Masdorp

2,534
2
18
31

silentsudo · Answer 7 · 2016-10-20T13:04:35.460

Repository I have added complete project at this link have a look https://gitlab.com/ashish29agre/android-bottom-navigation-view-support-lib

Hi This might be little late here is the xml

<android.support.design.widget.AppBarLayout
    android:id="@+id/app_bar_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:fitsSystemWindows="true"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">


    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        app:layout_scrollFlags="scroll|enterAlways"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.AppBarLayout>


<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <android.support.design.widget.BottomNavigationView
        android:id="@+id/nm_bottom"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="@color/colorPrimaryDark"
        app:itemIconTint="@android:color/white"
        app:itemTextColor="@android:color/white"
        app:layout_scrollFlags="scroll|enterAlways"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        app:menu="@menu/nav_menu" />

    <android.support.v7.widget.RecyclerView
        android:id="@+id/rv"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@id/nm_bottom"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</RelativeLayout>

"layout_behavior" should be in RelativeLayout, and "layout_scrollFlags" doesn't work with BottomNavigationView — Bronx, Oct 21 '16 at 07:27
Its working for me check my answer at https://gitlab.com/ashish29agre/android-bottom-navigation-view-support-lib — silentsudo, Oct 21 '16 at 08:14

score 1 · Answer 8 · edited May 23 '17 at 11:47

1

You can use google design support libraries for BottomNavigationView. Read the answer here.

edited May 23 '17 at 11:47

Community

1
1

answered Dec 08 '16 at 14:17

score 0 · Answer 9 · edited Jul 20 '17 at 12:05

0

You can use TabLayout for that. It can be easily aligned at bottom of screen.

edited Jul 20 '17 at 12:05

Vadim Kotov

8,084
8
48
62

answered Mar 17 '16 at 12:47

kevz

2,727
14
39

score 0 · Answer 10 · answered Mar 24 '16 at 10:44

0

There are no code examples yet. But there are custom libraries in android arsenal and this is a detailed tutorial you can check it Android material design bottom navigation

answered Mar 24 '16 at 10:44

Fareed

560
2
7
23

score 0 · Answer 11 · answered Apr 05 '16 at 16:24

0

There is no official example but check below link.
Very good implementation. https://github.com/roughike/BottomBar

answered Apr 05 '16 at 16:24

user6146138

1
5

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

11 Answers11