Material Design Tutorial 11: Bottom Navigation View

[caption id=“attachment_1254” align=“aligncenter” width=“284”] Gif: Bottom Navigation View Demo App[/caption]

Previously to implement Bottom Navigation View in an android application, we need to use third party libraries. But with the release of the V25 of Design Support library, we can easily implement it with full backward support.

Known as ”BottomNavigationView”, this widget is same as TabLayout .BottomNavigationView takes the input entries from a menu resource file. Lets check how BottomNavigationView works :

1. Create a simple Application with activity ”MainActivity” and its resource file ”activity_main.xml“.

2. Add Design Support library :

dependencies{
compile 'com.android.support:design:25.3.1'
}

3. Add the BottomNavigationView inside 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:layout_width="match_parent"
 android:layout_height="match_parent"
 tools:context="com.codevscolor.bottomnavigationview.MainActivity">

 <FrameLayout
 android:layout_width="match_parent"
 android:layout_height="match_parent" />

 <android.support.design.widget.BottomNavigationView
 android:id="@+id/bottom_navigation_view"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:layout_alignParentBottom="true"
 android:layout_gravity="start"
 app:itemBackground="@android:color/white"
 app:itemIconTint="@drawable/icon_color_state"
 app:itemTextColor="@drawable/icon_color_state"
 app:menu="@menu/bottom_navigation_items" />

</RelativeLayout

Meaning of the attributes :

app:itemBackground : background color of the bottom navigation view

app:itemIconTint : tint color of the icon.

app:itemTextColor : text color

app:menu : menu used to populate the items to the BottomNavigationView

**icon_color_state.xml **is defined inside drawable folder :

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
 <item android:state_checked="true" android:color="@color/colorPrimary" />
 <item android:color="@android:color/darker_gray" />
</selector>

And, bottom_navigation_items.xml containing items for BottomNavigationView is defined inside** res/menu/** directory :

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/menu_alarm_add"
        android:title="@string/menu_add"
        android:icon="@drawable/ic_alarm_add_white_24dp"
        />
    <item
        android:id="@+id/menu_alarm_list"
        android:title="@string/menu_list"
        android:icon="@drawable/ic_alarm_white_24dp"
        />

    <item
        android:id="@+id/menu_alarm_off"
        android:title="@string/menu_off"
        android:icon="@drawable/ic_alarm_off_white_24dp" />
</menu>

4. Listen to item clicks :

We can add one listener to the BottomNavigationView using setOnNavigationItemSelectedListener method.

bottomNavigationView = (BottomNavigationView)findViewById(R.id.bottom_navigation_view);

bottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
return true;
}
});

5. That’s it . Run the app and you will see the BottomNavigationView working. Let’s do some more improvement to this app. On clicking different BottomNavigationView icon, replace the framelayout with a different Fragment each time.

First , we will create three fragments FragmentOne, FragmentTwo and FragmentThree .

FragmentOne.java

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

import com.codevscolor.bottomnavigationview.R;

public class FragmentOne extends Fragment {
    public static FragmentOne newInstance() {
        FragmentOne fragment = new FragmentOne();
        return fragment;
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_one, container, false);
    }
}

fragment_one.xml :

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:background="@color/colorOne"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >

    <ImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_centerInParent="true"
        android:src="@drawable/documents"/>

</RelativeLayout>

Similarly create FragmentTwo and FragmentThree.

Now , change the MainActivity as below :

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

import com.codevscolor.bottomnavigationview.fragments.FragmentOne;
import com.codevscolor.bottomnavigationview.fragments.FragmentThree;
import com.codevscolor.bottomnavigationview.fragments.FragmentTwo;

public class MainActivity extends AppCompatActivity {
    private BottomNavigationView bottomNavigationView;

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

        bottomNavigationView = (BottomNavigationView)findViewById(R.id.bottom_navigation_view);


        FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
        transaction.replace(R.id.framelayout, FragmentOne.newInstance());
        transaction.commit();


        bottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                Fragment currentFragment = null;
                switch (item.getItemId()) {
                    case R.id.menu_alarm_add:
                        currentFragment = FragmentOne.newInstance();
                        break;
                    case R.id.menu_alarm_list:
                        currentFragment = FragmentTwo.newInstance();
                        break;
                    case R.id.menu_alarm_off:
                        currentFragment = FragmentThree.newInstance();
                        break;
                }
                FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
                transaction.replace(R.id.framelayout, currentFragment);
                transaction.commit();
                return true;
            }
        });
    }
}

Run the program. It should look like as shown in the gif .

You can download this project from Github here .

Journey with Code and DesignCodeVsColor on Twitter About
Privacy Policy
T&C
Contact

CodeVsColor

Material Design Tutorial 11: Bottom Navigation View

Bottom Navigation View in Android :