ZOFTINO.COM

Android Bottom Navigation View

The purpose of android BottomNavigationView is to provide top level navigation that allows users to move between main screens of an app.

Bottom navigation view should be used to provide access to three to five top level screens in your app. Users can directly land on these screen from anywhere in the app using bottom navigation bar. As name suggests, bottom navigation view should be displayed at the bottom of the screen.

If you have more than five top level views, then it is advised to use other navigation styles such as navigation view in addition to bottom navigation view.

One of the expected behaviors of bottom navigation view as per material design guidlines is that it should disappear when scrolled down allowing users to view content on the screen and reappear when scrolled up. This behavior can be achieved using BottomNavigationView with coordinator layout but coordinator layout behavior for BottomNavigationView is not provided as part of support library. So if you need this feature, you need to define custom behavior for BottomNavigationView.

In this article, I’ll explain how to implement bottom navigation view and features of it.

Define BottomNavigationView Menu Items

First, you need to define BottomNavigationView menu items in xml and place it in res/menu folder. You can set icon and title for each menu item in the xml, which will be displayed on the screen.

 

    
    
    
    

 

BottomNavigationView and ConstraintLayout

Now let’s define activity layout using constraint layout. We will define a frame which will be replaced with content depending on the menu item selected in bottom navigation view.

 

    
    
    

 
BottomNavigationView example

BottomNavigationView Properties

You can control look and feel of bottom navigation view and its items by setting its properties in xml or code. You can set item text color by calling setItemTextColor method. To set item back ground, you can call setItemBackgroundResource method. To set BottomNavigationView back ground color, use setBackgroundColor method.

BottomNavigationView background color and background image

BottomNavigationView Menu Item Select Listener

To handle item selection of bottom navigation view, we need to implement OnNavigationItemSelectedListener listener and add it to BottomNavigationView. You need to do this, in your activity’s onCreate method.

 BottomNavigationView bnv = (BottomNavigationView) findViewById(R.id.bottom_nv);

bnv.setOnNavigationItemSelectedListener(
            new BottomNavigationView.OnNavigationItemSelectedListener() {
                @Override
                public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                    getSelectedBottomItemView(item);
                    return false;
                }
            });
 

BottomNavigationView Menu Item Fragment

Now let’s create a fragment, which will select and render appropriate layout and content depending on the BottomNavigationView menu item selected. To keep it simple, I just created ScorllView and set text based on the item selected to text view in it.

 package com.zoftino.androidui;


import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ScrollView;
import android.widget.TextView;

public class BottomNVFragment extends Fragment {
    public static BottomNVFragment newInstance(String itemName) {
        BottomNVFragment fragment = new BottomNVFragment();

        Bundle args = new Bundle();
        args.putString("itemName", itemName);
        fragment.setArguments(args);

        return fragment;
    }
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        ScrollView scroller = new ScrollView(getActivity());
        TextView text = new TextView(getActivity());
        if(getArguments() != null) {
            text.setText("Selected bottom navigation item " +getArguments().getString("itemName", ""));
        }else{
            text.setText( "Default bottom navigation item");
        }
     

        scroller.addView(text);
        return scroller;
    }
}
 

Activity

 package com.zoftino.androidui;


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

public class ActivityBottomNavigationView extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.bottomnavigation);

        BottomNavigationView bnv = (BottomNavigationView) findViewById(R.id.bottom_nv);

        bnv.setOnNavigationItemSelectedListener(
                    new BottomNavigationView.OnNavigationItemSelectedListener() {
                        @Override
                        public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                            getSelectedBottomItemView(item);
                            return false;
                        }
                    });
    }
    protected void getSelectedBottomItemView(MenuItem item){
	item.setChecked(true);
        BottomNVFragment bnvf = BottomNVFragment.newInstance((String) item.getTitle());

        FragmentTransaction ft = getSupportFragmentManager().beginTransaction();
        ft.replace(R.id.contentRoot, bnvf);

        ft.setTransition(FragmentTransaction.TRANSIT_FRAGMENT_FADE);
        ft.commit();
    }
}
 

BottomNavigationView Menu Item Text and Icon Color

BottomNavigationView menu item’s text and icon color can be set to be different to indicate different states of menu item. Forexample, menu item’s icon and text can be displayed in one color when it is pressed and another color when menu item is selected.

Mapping of colors to BottomNavigationView menu-item states can be defined in xml and the color mapping xml can be set to BottomNavigationView using itemIconTint and itemTextColor xml attributes.

BottomNavigationView icon tint color