Which view should be used for new Material Design Bottom Navigation? [duplicate]

Question

I am sure that y'all have heard about the addition of bottom navigation to the material design guidelines. I am planning on adding it to my app. However, I am not sure what the best way to approach it is. What kind of a view would be best to show the bottom bar?

Answer 1

A LinearLayout with equal weights for its views, horizontal orientation. Buttons in the LinearLayout with drawableTop set to the icon of choice.

Add it to the bottom:

In a FrameLayout or CoordinatorLayout you can add it to the bottom with layout_gravity="bottom" or in a RelativeLayout use android:layout_alignParentBottom="true"

Dimensions, font size etc:

Please refer to the material design bottom navigation specs about it for the margins and font sizes etc:

Height: 56dp

Icon: 24 x 24dp

Content alignment:
Text and icon are centered horizontally within view.

Padding:

• 6dp above icon (active view), 8dp above icon (inactive view)
• 10dp under text
• 12dp left and right of text

Text label:

• Roboto Regular 14sp (active view)

• Roboto Regular 12sp (inactive view)

Hide on scroll

Use a CoordinatorLayout from android design support library. Add this LinearLayout as a child in the xml and set a Behavior to to hide on scroll.

---

Update

There is now an open source library available that is built to spec: https://github.com/roughike/BottomBar

Update 2

It is now part of the support lib.

Answer 2

BottomNavigationView is a component added in Google Support Library 25. It provides a quick navigation between top level views within an app. It should be used when application has three to five top-level destinations. My implementation includes the switching between Fragments on Selecting the Menu Items.

Add to the build.gradle of your project module

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

Create the BottomNavigationView in xml of your layout and provide a menu resource to it:

<android.support.design.widget.BottomNavigationView
    android:id="@+id/navigation"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginEnd="0dp"
    android:layout_marginStart="0dp"
    android:background="?android:attr/windowBackground"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"/>

Create a file here navigation.xml in menu resource folder. This file is used for providing the MenuItems in BottomNavigationView

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
   android:id="@+id/navigation_home"
   android:icon="@drawable/ic_home_black_24dp"
   android:title="@string/title_home" />
<item
   android:id="@+id/navigation_dashboard"
   android:icon="@drawable/ic_dashboard_black_24dp"
   android:title="@string/title_dashboard" />

<item
   android:id="@+id/navigation_notifications"
   android:icon="@drawable/ic_notifications_black_24dp"
   android:title="@string/title_notifications" />

<item
   android:id="@+id/navigation_settings"
   android:icon="@drawable/ic_settings_black_24dp"
   android:title="@string/title_settings" />

</menu>

With everything in line this much code shows up the BottomBar on running the app. Now lets set the listener for the Click Events OnNavigationItemSelectedListener and OnNavigationItemReselectedListener on Menu Items -

private BottomNavigationView.OnNavigationItemSelectedListener mOnNavigationItemSelectedListener
        = new BottomNavigationView.OnNavigationItemSelectedListener() {

    @Override
    public boolean onNavigationItemSelected(@NonNull MenuItem item) {

        switch (item.getItemId()) {
            case R.id.navigation_home:
                return true;

            case R.id.navigation_dashboard:
                return true;

            case R.id.navigation_notifications:
                return true;

            case R.id.navigation_settings:
                return true;

        }
        return true;
    }

};

private BottomNavigationView.OnNavigationItemReselectedListener mOnNavigationItemReselectedListener = new BottomNavigationView.OnNavigationItemReselectedListener() {
    @Override
    public void onNavigationItemReselected(@NonNull MenuItem item) {

        switch (item.getItemId()) {

            case R.id.navigation_home:
                Log.d(TAG, "Navigation Reselected ===");
                break;

            case R.id.navigation_dashboard:
                Log.d(TAG, "Dashboard Reselected ===");
                break;

            case R.id.navigation_notifications:
                Log.d(TAG, "Notification Reselected ===");
                break;

            case R.id.navigation_settings:
                Log.d(TAG, "Settings Reselected ===");
                break;
        }

    }
};

bottomNavigationView.setOnNavigationItemSelectedListener
(mOnNavigationItemSelectedListener);

bottomNavigationView.setOnNavigationItemReselectedListener
(mOnNavigationItemReselectedListener);

If the no of Menu Items are more than 3 then the selected Item will take more space in the BottomNavView and it looks a little weird as of now, may be intentionally Google has kept it like this.

This behavior is defined by ShiftingMode property of BottomNavigationView, which can't be disabled in a straightforward way as of now, as its api is not public. But there is a way through Reflection to do it :

BottomNavigationMenuView menuView = (BottomNavigationMenuView)  
btmNavigationView.getChildAt(0);

try {

        Field shiftingMode = menuView.getClass()
        .getDeclaredField("mShiftingMode");

        shiftingMode.setAccessible(true);
        shiftingMode.setBoolean(menuView, false);
        shiftingMode.setAccessible(false);

        for (int i = 0; i < menuView.getChildCount(); i++) {

        BottomNavigationItemView item = 
        (BottomNavigationItemView) menuView.getChildAt(i);
        item.setShiftingMode(false);
        //To update view, set the checked value again
        item.setChecked(item.getItemData().isChecked());
        }


    } catch (NoSuchFieldException e) {
        e.printStackTrace();

    } catch (IllegalAccessException e) {
        e.printStackTrace();

    } catch (SecurityException e) {
        e.printStackTrace();
    }

After calling above code result is :

For more information checkout my Github Project: https://github.com/pmahsky/BottomNavigationViewDemo