Android: Bottom Navigation View - change icon of s

问题:

I have added BottomNavigationView in my application like.

main.xml

<android.support.design.widget.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        app:itemBackground="@color/colorPrimary"
        app:itemIconTint="@color/white"
        app:itemTextColor="@color/white"
        app:menu="@menu/bottom_navigation_main" />

bottom_navigation_main.xml

<?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_favorites"
        android:enabled="true"
        android:icon="@drawable/ic_favorite_white_24dp"
        android:title="@string/text_favorites"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/action_schedules"
        android:enabled="true"
        android:icon="@drawable/ic_access_time_white_24dp"
        android:title="@string/text_schedules"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/action_music"
        android:enabled="true"
        android:icon="@drawable/ic_audiotrack_white_24dp"
        android:title="@string/text_music"
        app:showAsAction="ifRoom" />
</menu>

MainActivity click

bottomNavigationView.setOnNavigationItemSelectedListener(
        new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                switch (item.getItemId()) {
                    case R.id.action_favorites:
                        //need change icon of favotites here.
                    case R.id.action_schedules:

                    case R.id.action_music:

                }
                return true;
            }
        });

I want to change the icon of the bottom navigation of selected position. How can we achieve this feature when user click one item?

(if user clicked one item then the icon change to another one)

回答1:

You need to reset the icon onclick, and then on the switch case you need to set only the one you need to change, so only when selected the icon change.

Menu menu = bottomNavigationView.getMenu();
menu.findItem(R.id.action_favorites).setIcon(favDrawable);

switch (item.getItemId()) {
                case R.id.action_favorites:
                     item.setIcon(favDrawableSelected);
                case R.id.action_schedules:
                case R.id.action_music:
            }

回答2:

You can simply create drawable selector in drawable folder and image can be change according to the state of the widget used in view

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

回答3:

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

bottomNavigationView.setItemIconTintList(null);

This will disable tint effect of selected item icon.

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

回答4:

I found this is better approach to use selector drawable: -

Drawable name is child_selector.xml at drawable folder.

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

Simply add it in your bottom_navigation_main.xml:-

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

<item
    android:id="@+id/navigation_child"
    android:icon="@drawable/child_selector"
    android:title="@string/title_child" />

</menu>

Good luck.

回答5:

Okay I wanted to understand how to have each item have their own image, and with some confusion in the comments on where it should go, I wanted to type up this answer.

First create your menu and its items. Your selector will go inside those items in the ICON value. Here we have 2 selectors, each made for its menu item.

item
    android:id="@+id/navigation_home"
    android:icon="@drawable/navigation_home_selector"
    android:title="@string/title_home" />
item
    android:id="@+id/navigation_profile"
    android:icon="@drawable/navigation_profile_selector"
    android:title="@string/title_profile" />

Now here is your selector file that will be housed in your drawable folder.

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/menu_selected" android:state_checked="true"/>
    <item android:drawable="@drawable/menu" android:state_checked="false"/>
</selector>

Final step was provided by @ KishanSolanki124

Add this line of code to your BottomNavigationView.

BottomNavigationView.setItemIconTintList(null);

There you have it. All works like a charm.

回答6:

Create a selector and specify drawable for each state (e.g. checked and unchecked states)

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

回答7:

Found the answer. we can use

item.setIcon(R.drawable.icon_name) 

to change the icon .. will try to imporve answer

 bottomNavigationView.setOnNavigationItemSelectedListener(
            new BottomNavigationView.OnNavigationItemSelectedListener() {
                @Override
                public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                    switch (item.getItemId()) {
                        case R.id.action_favorites:
                            //change the icon
                         item.setIcon(R.drawable.icon_name);
                        case R.id.action_schedules:

                        case R.id.action_music:

                    }
                    return true;
                }
            });

回答8:

Thanks for the selector method, that works for me (api v26)

For those who wondering how to set it back of programmatically, consider add this to your OnNavigationItemSelectedListener before your switch(Java) or when(Kotlin) :

private val mOnNavigationItemSelectedListener = BottomNavigationView.OnNavigationItemSelectedListener { item ->
    navigation.menu.getItem(0).setIcon(R.drawable.ic_tab_home)
    navigation.menu.getItem(1).setIcon(R.drawable.ic_tab_account)
    navigation.menu.getItem(2).setIcon(R.drawable.ic_tab_trading)
    navigation.menu.getItem(3).setIcon(R.drawable.ic_tab_wallet)
    when (item.itemId) {
        R.id.navigation_home -> {
            message.setText(R.string.title_home)
            item.setIcon(R.drawable.ic_tab_home_active)
            return@OnNavigationItemSelectedListener true
        }
        R.id.navigation_account -> {
            message.setText(R.string.title_account)
            item.setIcon(R.drawable.ic_tab_account_active)
            return@OnNavigationItemSelectedListener true
        }
        R.id.navigation_trading -> {
            message.setText(R.string.title_trading)
            item.setIcon(R.drawable.ic_tab_trading_active)
            return@OnNavigationItemSelectedListener true
        }
        R.id.navigation_wallet-> {
            message.setText(R.string.title_wallet)
            item.setIcon(R.drawable.ic_tab_wallet_active)
            return@OnNavigationItemSelectedListener true
        }
    }
    false
}