Android bottom navigation bar item background color change when fragment selected

user8426874 picture user8426874 · Aug 7, 2017 · Viewed 14.3k times · Source

I want my bottom nav bar change background color when pressed ( only the selected area ) , Like the link bellow :

http://uupload.ir/files/nq3k_tab_bar.jpg

Here`s my xml for the selector :

    <?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto">
    <item android:state_checked="true" android:color="@color/beyez" />
    <item android:state_active="true" app:itemBackground="@color/backbeyez"/>
    <item android:color="@color/colorPrimaryDark"  />
</selector>

Here`s the xml for the activity :

<android.support.design.widget.BottomNavigationView
    android:id="@+id/bottomnav"
    android:layout_width="382dp"
    android:layout_height="52dp"
    android:layout_marginBottom="0dp"
    app:itemBackground="@color/colorPrimary"
    app:itemIconTint="@drawable/nav_items_color"
    app:itemTextColor="@drawable/nav_items_color"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"

    app:menu="@menu/navigation"
    tools:layout_editor_absoluteY="515dp">

</android.support.design.widget.BottomNavigationView>

Here`s the code for my Java Class :

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

    BottomNavigationView bottomNavigationView = (BottomNavigationView)findViewById(R.id.bottomnav);
    BottomNavigationViewHelper.disableShiftMode(bottomNavigationView);


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

            switch (item.getItemId())
            {
                case R.id.navigation_orders:
                    switchorders();
                    break;

                case R.id.navigation_credit:
                    switchcredits();
                    break;

                case R.id.navigation_works:
                    switchworks();
                    break;

                case R.id.navigation_profile:
                    switchprofile();
                    break;

            }
            return true;
        }
    });

}

Thank you all for helping out !

Answer

Samuele Pontremoli picture Samuele Pontremoli · Aug 7, 2017

Just change the line app:itemBackground="@color/colorPrimary" in the xml for the BottomNavigationView to be a drawable object like you did for the other parameters (like app:itemTextColor).

Edit

This should work, I tried it with SDK > 19

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