Skip to content

Bottom navigation

From google material design documentation.

Bottom navigation bars make it easy to explore and switch between top-level views in a single tap.

How to add?

I. In your build.gradle add latest design and appcompat libraries.

dependencies {
    compile 'com.android.support:appcompat-v7:X.X.X'
    compile 'com.android.support:design:X.X.X'

    // where X.X.X version
}

II. Make your activity extend android.support.v7.app.AppCompatActivity.

public class MainActivity extends AppCompatActivity {
 ...
}

III. Declare navigation items in menu file.

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
            android:id="@+id/recents"
            android:title="Recents"
            android:icon="@drawable/ic_history_24dp"/>
    <item
            android:id="@+id/favorites"
            android:title="Favorites"
            android:icon="@drawable/ic_favorite_24dp"/>
    <item
            android:id="@+id/nearby"
            android:title="Nearby"
            android:icon="@drawable/ic_place_24dp"/>
</menu>

IV. Declare BottomNavigationView inside your layout.xml file.

<android.support.design.widget.BottomNavigationView
    android:id="@+id/bottomNavigationView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:menu="@menu/bottom_navigation_menu"/>

How to style?

I. Define custom color for navigation bar.

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="false" android:color="@color/pink"/>
    <item android:color="@android:color/white"/>
</selector>

II. Define custom backgrounds for navigation bar items.

// res/drawable, to support devices lower then 21 API
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:drawable="@android:color/white"/>
    <item android:drawable="@android:color/transparent"/>
</selector>

// res/drawable-v21 folder, for devices greater or equal then 21 API
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
        android:color="@android:color/white">
</ripple>

III. Declare custom style in your styles.xml file.

<style name="BottomNavigation">
    <item name="android:background">@color/indigo</item>
    <item name="itemBackground">@drawable/navigation_bar_item_bg</item>
    <item name="itemIconTint">@color/navigation_bar_txt_color</item>
    <item name="itemTextColor">@color/navigation_bar_txt_color</item>
    <item name="paddingStart">@dimen/bottom_navigation_padding</item>
    <item name="paddingEnd">@dimen/bottom_navigation_padding</item>
</style>

IV. Apply this style to your BottomNavigationView via style attribute.

<android.support.design.widget.BottomNavigationView
    android:id="@+id/bottomNavigationView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:menu="@menu/bottom_navigation_menu"
    style="@style/BottomNavigation"/>

Handle item selection

BottomNavigationView bottomNavigationView;
// ...
bottomNavigationView.setOnNavigationItemSelectedListener(new OnNavigationItemSelectedListener() {
     @Override
     public boolean onNavigationItemSelected(@NonNull MenuItem item) {
         if (item.getItemId() == R.id.favorites) {
             // on favorites clicked
             return true;
         }
         return false;
     }
});

Select item programmatically

BottomNavigationView navigationView;
// ...
navigationView= (BottomNavigationView) findViewById(R.id.bottomNavigationView);
navigationView.getMenu().getItem(itemToSelect).setChecked(true);

Get selected item

There is no API to get selected item. Instead you can :

I. Get menu from BottomNavigationView and search for checked item.

BottomNavigationView bottomNavigationView;
// ...
int getSelectedItem() {
    Menu menu = bottomNavigationView.getMenu();
    for (int i = 0; i < menu.size(); i++) {
        if (menu.getItem(i).isChecked()) {
            return i;
        }
    }
    return 0;
}

II. Add global selectedItem variable and update it each time you do select item programmatically and each time you receive OnNavigationItemSelected event.