The first item in the BottomNavigationView keep highlight when I select other item

Question

The first item in the navigation bar keep highlighting.

When I click other item on the navigation bar, the content will change but the corresponding item will not be highlighted, just keep highlighting the first item.

        bottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
        @Override
        public boolean onNavigationItemSelected(@NonNull MenuItem item) {
            Fragment fragment=null;
            switch (item.getItemId()){
                case R.id.number:
                    fragment=new data();
                    break;
                case R.id.graph:
                    fragment=new graph();
                    break;
            }
            FragmentManager fragmentManager = getActivity().getSupportFragmentManager();
            FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
            fragmentTransaction.replace(R.id.content_drawer, fragment);
            fragmentTransaction.commit();
            return true;
        }
    });

this is the listener

<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"
>

<android.support.design.widget.BottomNavigationView
    android:id="@+id/navigation"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/colorPrimaryDark"
    android:layout_alignParentBottom="true"
    android:layout_gravity="bottom"
    app:menu="@menu/navigation" />

<LinearLayout
    android:id="@+id/graphlayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_above="@id/navigation"
    android:orientation="vertical"
    android:gravity="center_vertical">

</LinearLayout>
</RelativeLayout>

this is the xml

<?xml version="1.0" encoding="utf-8"?>

<item
    android:id="@+id/number"
    android:title="number"
    android:checkable="true"/>

<item
    android:id="@+id/graph"
    android:title="graph"
    android:checkable="true"/>

</menu>

this is the meun.xml

Answer 1

This usually happens beacause of when onNavigationItemSelected method return false value. You can check this with remove all code except return true inside the onNavigationItemSelected method. Just like this;

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

Then you'll see it works but the content was not changed. For change with content, If I were you I'll change the default return value as false like this;

bottomNavigationView.setOnNavigationItemSelectedListener(new 
BottomNavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
    switch (item.getItemId()){
            case R.id.number:
               //Open fragment or do whatever you want.
               return true;
            case R.id.graph:
               //Open another fragment or do whatever you want.
               return true;
        }
    return false;
}
});

Answer 2

It is included in the Design Support Library, starting with version 25.0.0. You can include it in your build.gradle file with the following line (you'll also need the AppCompat Support Library as the Design Support Library's dependency):

First use girdle compile both the girdle in your project

compile 'com.android.support:appcompat-v7:25.0.0'  
compile 'com.android.support:design:25.0.0'  

then create xml layout:

<android.support.design.widget.BottomNavigationView  
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/bottom_navigation_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:itemBackground="@color/darkGrey"
    app:itemIconTint="@color/bottom_navigation_item_background_colors"
    app:itemTextColor="@color/bottom_navigation_item_background_colors"
    app:menu="@menu/menu_bottom_navigation" />

Create a resource file just like a Navigation Drawer or an Overflow menu:

<?xml version="1.0" encoding="utf-8"?>  
<menu  
xmlns:android="http://schemas.android.com/apk/res/android">
<item
    android:id="@+id/action_one"
    android:icon="@android:drawable/ic_dialog_map"
    android:title="One"/>
<item
    android:id="@+id/action_two"
    android:icon="@android:drawable/ic_dialog_info"
    android:title="Two"/>
<item
    android:id="@+id/action_three"
    android:icon="@android:drawable/ic_dialog_email"
    android:title="Three"/>
<item
    android:id="@+id/action_four"
    android:icon="@android:drawable/ic_popup_reminder"
    android:title="Four"/>
</menu>  

display image below:

To achieve different tinting for selected items, you should specify a color list resource as itemBackground and itemTextColor like this:

<?xml version="1.0" encoding="utf-8"?>  
<selector xmlns:android="http://schemas.android.com/apk/res/android">

<item
    android:color="@color/colorAccent"
    android:state_checked="false"/>
<item
    android:color="@android:color/white"
    android:state_checked="true"/>

 </selector>  

Finally, you can listen to tab selection events by adding an BottomNavigation.OnNavigationItemSelectedListener via the setOnNavigationItemSelectedListener() method:

bottomNavigationView.setOnNavigationItemSelectedListener(new 
BottomNavigationView.OnNavigationItemSelectedListener() {  
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
    Fragment fragment = null;
    switch (item.getItemId()) {
        case R.id.action_one:
            // Switch to page one
            break;
        case R.id.action_two:
            // Switch to page two
            break;
        case R.id.action_three:
            // Switch to page three
            break;
    }
    return true;
   }
   });

try this code.