Android: нижний вид навигации - изменение значка выбранного элемента

Я добавил BottomNavigationView в моем приложении.

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

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;
            }
        });

Я хочу изменить значок нижней навигации выбранной позиции. Как мы можем достичь этой функции, когда пользователь нажимает на один элемент?

(если пользователь нажал один элемент, значок изменится на другой)

Ответ 1

Вам нужно reset значок onclick, а затем в случае коммутатора вам нужно установить только тот, который вам нужно изменить, поэтому только при выборе значка.

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

Вы можете просто создать переносимый селектор в папке с возможностью рисования, и изображение может быть изменено в соответствии с состоянием виджета, используемого в представлении

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

Если вышеприведенные решения не работают для вас, чтобы изменить значок выбранного элемента, добавьте ниже строки в свой код:

bottomNavigationView.setItemIconTintList(null);

Это отключит эффект оттенка выбранного элемента.

У меня была та же проблема. Я добавил селектор, который можно использовать для изменения значка элемента BottomNavigationView, когда он установлен/выбран.

Ответ 4

Хорошо, я хотел понять, как сделать так, чтобы у каждого элемента было свое изображение, и с некоторой путаницей в комментариях о том, куда он должен идти, я хотел напечатать этот ответ.

Сначала создайте свое меню и его пункты. Ваш селектор войдет в эти элементы в значении ICON. Здесь у нас есть 2 селектора, каждый из которых сделан для своего пункта меню.

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

Теперь вот ваш файл селектора, который будет размещен в вашей папке для рисования.

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

Последний шаг был предоставлен @KishanSolanki124

Добавьте эту строку кода в BottomNavigationView.

BottomNavigationView.setItemIconTintList(null);

Там у вас есть это. Все работает как шарм.

Ответ 5

Я обнаружил, что лучше использовать селектор drawable: -

Сначала создайте XML файл в вашей папке Drawable. Например, xml файл называется child_selector.xml в папке для рисования.

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

Просто добавьте child_selector в пункт меню вашего bottom_navigation_main.xml: -

Нравится: android: icon = "@drawable/child_selector"

Пример:

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

И должен добавить следующую строку в вашем activity-

bottomNavigationView.setItemIconTintList(null);

Удачи.

Ответ 6

Создайте селектор и укажите возможность рисования для каждого состояния (например, отмеченные и непроверенные состояния)

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

Нашел ответ. мы можем использовать

item.setIcon(R.drawable.icon_name) 

для изменения значка.. попытается ответить imporve

 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

Спасибо за метод selector, который работает для меня (api v26)

Для тех, кто интересуется, как вернуть OnNavigationItemSelectedListener невыбранный значок программным OnNavigationItemSelectedListener, рассмотрите возможность добавления его в свой OnNavigationItemSelectedListener до switch(Java) или 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)
            [email protected] true
        }
        R.id.navigation_account -> {
            message.setText(R.string.title_account)
            item.setIcon(R.drawable.ic_tab_account_active)
            [email protected] true
        }
        R.id.navigation_trading -> {
            message.setText(R.string.title_trading)
            item.setIcon(R.drawable.ic_tab_trading_active)
            [email protected] true
        }
        R.id.navigation_wallet-> {
            message.setText(R.string.title_wallet)
            item.setIcon(R.drawable.ic_tab_wallet_active)
            [email protected] true
        }
    }
    false
}