Android BottomNavigationView Tutorial.

This is an android bottomnavigationview tutorial and examples. We start by seeing what BottomNavigation is as a general design pattern, then see the BottomNavigationView for android, then look at some examples.

What is BottomNavigationView

BottomNavigationView is a navigation bar or view designed to sit at the bottom of your page with clickable tabs. It implements material design bottom navigation guidelines.

With BottomNavigationViews, users can easily switch and explore top-level pages with single taps. According to the material design guidelines, it should be used when application has three to five top-level destinations. That means you assign your BottomNavigationView three to five bottom navigation items.

Video Tutorial

Here’s an equivalent video tutorial.

MainActivity.java

Here is our main activity file. This is the only java we write in this example.

package info.camposha.bottomnavigationexample;

import android.support.annotation.NonNull;
import android.support.design.widget.BottomNavigationView;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.MenuItem;
import android.view.View;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        final TextView newsTextView = findViewById(R.id.newsTextView);
        final TextView techTextView = findViewById(R.id.techTextView);
        final TextView entertainmentTextView = findViewById(R.id.entertainmentTextView);

        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.action_news:
                                newsTextView.setVisibility(View.VISIBLE);
                                techTextView.setVisibility(View.GONE);
                                entertainmentTextView.setVisibility(View.GONE);
                                break;
                            case R.id.action_tech:
                                newsTextView.setVisibility(View.GONE);
                                techTextView.setVisibility(View.VISIBLE);
                                entertainmentTextView.setVisibility(View.GONE);
                                break;
                            case R.id.action_entertainment:
                                newsTextView.setVisibility(View.GONE);
                                techTextView.setVisibility(View.GONE);
                                entertainmentTextView.setVisibility(View.VISIBLE);
                                break;
                        }
                        return false;
                    }
                });
    }
}

activity_main.xml

Here’s our main activity’s layout.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    
    android_layout_width="match_parent"
    android_layout_height="match_parent">

    <TextView
        android_id="@+id/newsTextView"
        android_layout_width="wrap_content"
        android_layout_height="wrap_content"
        android_layout_centerInParent="true"
        android_text="@string/txt_news" />

    <TextView
        android_id="@+id/techTextView"
        android_layout_width="wrap_content"
        android_layout_height="wrap_content"
        android_layout_centerInParent="true"
        android_text="@string/txt_tech"
        android_visibility="gone" />

    <TextView
        android_id="@+id/entertainmentTextView"
        android_layout_width="wrap_content"
        android_layout_height="wrap_content"
        android_layout_centerInParent="true"
        android_text="@string/txt_entertainment"
        android_visibility="gone" />

    <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="@color/white"
        app_itemTextColor="@color/white"
        app_menu="@menu/bottom_navigation_main" />

</RelativeLayout>

bottom_navigation_main.xml

This is our menu. Place it under the menu resource directory.

<?xml version="1.0" encoding="utf-8"?>
<menu 
    >
    <item
        android_id="@+id/action_news"
        android_enabled="true"
        android_icon="@drawable/ic_favorite_white_24dp"
        android_title="@string/txt_news"
        app_showAsAction="ifRoom" />
    <item
        android_id="@+id/action_tech"
        android_enabled="true"
        android_icon="@drawable/ic_access_time_white_24dp"
        android_title="@string/txt_tech"
        app_showAsAction="ifRoom" />
    <item
        android_id="@+id/action_entertainment"
        android_enabled="true"
        android_icon="@drawable/ic_audiotrack_white_24dp"
        android_title="@string/txt_entertainment"
        app_showAsAction="ifRoom" />
</menu>