CODEWITHSUNDEEP
androidmaterial-design
Rajagopal
Rajagopal

Reputation: 31

How to change selected icon image in BottomNavigationView in android?

I have inflated menu_main.xml to BottomNavigationView and now i want to change the icons in BottomNavigation when we select an item .

Upvotes: 0

Views: 7813

Answers (4)

Dishant Kawatra
Dishant Kawatra

Reputation: 648

    Xml of Bottom NavigationView 

        <android.support.design.widget.BottomNavigationView
                        android:id="@+id/bottom_navigation"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        app:itemIconTint="@drawable/selector_bottom_navigation"
                        app:itemTextColor="@drawable/selector_bottom_navigation"
                        app:menu="@menu/bottom_navigation" />

    Bottm Navigation Menu 

    <?xml version="1.0" encoding="utf-8"?>
    <menu xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto">
        <item
            android:id="@+id/action_home"
            android:icon="@drawable/selecter_tab_home"
            android:title="@string/text_home"
            app:showAsAction="ifRoom" />
        <item
            android:id="@+id/action_explore"
            android:icon="@drawable/selector_tab_explore"
            android:title="@string/text_explore"
            app:showAsAction="ifRoom" />

        <item
            android:id="@+id/action_profile"
            android:icon="@drawable/selector_tab_profile"
            android:title="@string/text_profile"
            app:showAsAction="ifRoom" />

    </menu>

Selector of home menu you can put next two same also with differnt drawable file 

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

    <item android:drawable="@drawable/ic_tab_home" android:state_checked="false"/>
    <item android:drawable="@drawable/ic_tab_home_fill" android:state_checked="true"/>

</selector>

Upvotes: 0

BaiMaoli
BaiMaoli

Reputation: 178

You have to save this in the res/drawable directory.

And use it as follows:

ex: bottomNavigationMenu.xml ...

android:icon="@drawable/your_selector"

Upvotes: 1

Kishan Solanki
Kishan Solanki

Reputation: 14618

If above solution is not working for you to change selected item icon then add below line to your code:

bottomNavigationView.setItemIconTintList(null);

This will disable color tint effect of selected item icon and change the icon as per your selector drawable.

I had the same problem. I have added selector drawable for changing icon of BottomNavigationView item when its checked/selected.

Upvotes: 7

Sanny Nagveker
Sanny Nagveker

Reputation: 418

Create item called selector in drawable folder and icon can be changed according to the selected state of the widget used 

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

Use selector as a menu icon in navigation

Upvotes: 3

Related Questions