Android：底部导航视图 - 更改所选项目的图标答案

【问题标题】：Android: Bottom Navigation View - change icon of selected itemAndroid：底部导航视图 - 更改所选项目的图标
【发布时间】：2017-06-09 03:07:10
【问题描述】：

我在我的应用程序中添加了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;
            }
        });

我想更改所选位置底部导航的图标。当用户单击一个项目时，我们如何实现此功能？

（如果用户点击了一项，则图标将变为另一项）

【问题讨论】：

任何在他的菜单中有选择器并且想要显示选择器颜色而不是默认底部导航颜色的人检查这个答案stackoverflow.com/a/44516194/6039240

标签： android android-layout android-support-library bottomnavigationview

【解决方案1】：

您可以简单地在drawable文件夹中创建drawable选择器，并且可以根据视图中使用的小部件的状态更改图像

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

【讨论】：

这比程序化方法效果更好。要指定的状态实际上是android:state_checked 而不是android:state_selected
你应该在这里申请：<android.support.design.widget.NavigationView . . app:itemTextColor="@drawable/your_selector"/>
它在 kitkat android 版本中不起作用。应用程序崩溃。
@ASN 去掉底部导航xml代码的色调，恢复图标原来的颜色
@AbhinavUpadhyay 从 xml 中删除 itemIconTint 仍然不起作用。 bottomNavigationView.setItemIconTintList(null) 是解决方案。你知道xml中的等价物吗？

【解决方案2】：

如果上述解决方案对您更改所选项目图标不起作用，请在您的代码中添加以下行：

bottomNavigationView.setItemIconTintList(null);

这将禁用所选项目图标的色调效果。

我遇到了同样的问题。我添加了可绘制的选择器，用于在选中/选中时更改 BottomNavigationView 项目的图标。

【讨论】：

工作正常Thnx。
感谢您的回答帮助我显示原始图标而不是彩色矩形。
这是解决上述所有问题的答案，当您设置背景选择器时，如果没有这个，它将永远无法工作，谢谢
效果很好。不要忘记使用drawables创建选择器并在菜单文件中使用它
它有效，但我很想找到 xml 布局属性的等价物。 “@null”对我不起作用。

【解决方案3】：

我发现这是使用可绘制选择器的更好方法：

首先在你的drawable文件夹中创建一个xml文件。例如，可绘制文件夹中的 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>

只需在 bottom_navigation_main.xml 的菜单项中添加 child_selector：

点赞：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>

并且必须在您的活动中添加以下行-

bottomNavigationView.setItemIconTintList(null);

祝你好运。

【讨论】：

其他 5 人已经提出了同样的解决方案，在 Java/Kotlin 中仍然缺少一行代码来完成这项工作。不幸的是。
BottomNavigationView.setItemIconTintList(null);
仅使用一个图标和色调而不是两个图标（每个选中状态一个）是否可以实现相同的效果？

【解决方案4】：

你需要在onclick上重置图标，然后在switch case上你只需要设置你需要改变的那个，所以只有选中的时候图标才会改变。

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

【讨论】：

我认为明确添加声明“项目”的那段代码也会有所帮助。 MenuItem item = menu.findItem(R.id.action_favorites);
我会试试这段代码，它可以工作，但是当我点击其他图标时，它没有设置默认图标，如填充图标或不填充图标
这可行，但是当点击另一个项目时如何将图标重置回原来的图标
在我的情况下，我只是想为不同的按钮更改不同的色调颜色，通过 bottomNavigationView.itemIconTintList = ColorStateList.valueOf(ContextCompat.getColor(this, iconColor))
这行得通，但可能需要做一些额外的工作。检查下面的答案以获得更清洁的解决方案。

【解决方案5】：

好的，我想了解如何让每个项目都有自己的图像，并且由于 cmets 对它应该去哪里有些困惑，我想输入这个答案。

首先创建您的菜单及其项目。您的选择器将进入 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);

你有它。一切都像魅力一样。

【讨论】：

如何改变图标文字颜色？？
我相信你可以在navigationListener上设置这个。 BottomNavigationView.SetTextColor
在这个答案（和其他几个）中对我来说缺少的关键信息是选择器 xml 必须放在名为 navigation_home_selector.xml 的可绘制文件夹中的文件中；该名称使从 android:icon=@drawable/navigation_home_selector 到智能可绘制对象的链接起作用。
@JohnT 由 ICON 部分内部的实际值暗示。它告诉您该文件在内部具有该名称的可绘制对象。

【解决方案6】：

上面来自 ajay singh https://stackoverflow.com/a/57248961/9793057 的回答帮助了我，并采用了上面的回答。

res->drawable 文件夹中的以下代码 (selector_stock_bottom_nav_view.xml)

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/button_and_tab_color" android:state_checked="true" />
    <item android:color="@android:color/darker_gray" android:state_checked="false" />
</selector>

这些是我底部导航视图中的属性

<com.google.android.material.bottomnavigation.BottomNavigationView

        app:itemIconTint="@drawable/selector_stock_bottom_nav_view" //To change icon color
        app:itemTextColor="@drawable/selector_stock_bottom_nav_view" //To change text color
        app:itemTextAppearanceActive="@style/stockBottomNavigationView.Active" //To change size of text during active state
        app:itemTextAppearanceInactive="@style/stockBottomNavigationView.InActive"
        app:menu="@menu/bottom_navigation_menu"
        app:labelVisibilityMode="labeled"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:layout_gravity="bottom"
        app:selectedBackgroundVisible="false"
        android:id="@+id/stock_bottom_navigation"/>

我没有在我的代码中的任何地方使用“BottomNavigationView.setItemIconTintList(null)”。

现在最重要的代码来了，确保在底部导航视图的监听器中返回“TRUE”，即

private BottomNavigationView.OnNavigationItemSelectedListener stockBottomNavListener = new BottomNavigationView.OnNavigationItemSelectedListener() {
        @Override
        public boolean onNavigationItemSelected(@NonNull MenuItem item) {

            return true;

        }
    };

奖励：更改文本活动/非活动状态的大小将以下代码放入styles.xml文件中

    <style name="stockBottomNavigationView.InActive" parent="@style/TextAppearance.AppCompat.Caption">
        <item name="android:textSize">7sp</item>
    </style>

    <style name="stockBottomNavigationView.Active" parent="@style/TextAppearance.AppCompat.Caption">
        <item name="android:textSize">8sp</item>
    </style>

以上答案是stackoverflow中与底部导航视图、图标和文本颜色/大小更改相关的各种答案的汇总。

【讨论】：

干得好，对我来说 +1。这增加了最初的问题，更加耀眼。

【解决方案7】：

感谢 selector 方法，它对我有用 (api v26)

对于那些想知道如何以编程方式将其设置回原点未选择图标的人，请考虑将其添加到您的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)
            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
}

【讨论】：

【解决方案8】：

找到了答案。我们可以使用

item.setIcon(R.drawable.icon_name)

更改图标..将尝试改进答案

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

【讨论】：

这可行，但是当点击另一个项目时如何将图标重置回原来的图标。
@Eswar 看看我上面的答案。使用选择器，它可以完全使用 2 个不同的图像或颜色更改的图像（我的应用正在做什么）

【解决方案9】：

您可以使用此方法动态设置您的图标。

R.id.navigation_menu 是您在 R.menu.menu_bottom_navigation 中的项目 ID。

val menuItem = bottomNavigationView.menu.findItem(R.id.navigation_menu)
menuItem.setIcon(R.drawable.ic_icon)

【讨论】：

【解决方案10】：

在最新的材料设计库中，提供了底部导航的默认行为，您不需要提供属性itemIconTint，它将自动管理它。

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/bottomNavigationView"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="0dp"
    android:layout_marginEnd="0dp"
    android:layout_alignParentBottom="true"
    android:background="?android:attr/windowBackground"
    app:itemBackground="@color/white"
    app:itemTextColor="@color/textBlue"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:menu="@menu/bottom_navigation"
    app:labelVisibilityMode="labeled"
    app:itemTextAppearanceActive="@color/colorPrimary"
    />

【讨论】：