为什么我不能用渐变颜色更改图标颜色和文本底部导航 android

Question

我想使颜色像示例图像一样。但是我在使用颜色 gradient 更改图标和文本时发现了一个问题，因为底部导航中的属性只接受颜色。请帮助我上帝保佑你。

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/nav_view"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:theme="@style/Widget.BottomNavigationView"
    android:background="@drawable/bg_bottom_nav"
    app:itemIconTint="@drawable/bottom_nav_icon_color_selector"
    app:itemTextColor="@drawable/bottom_nav_icon_color_selector"
    app:labelVisibilityMode="labeled"
    app:layout_constraintBottom_toBottomOf="parent"
    app:itemIconSize="22dp"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:menu="@menu/bottom_nav_menu" />

Answer 1

我也在做这个，渐变图标，我用了2张图片。至于文字渐变，我还在想办法

图标渐变：

drawable/ic_home.xml: 图标

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Icon active gradient -->
    <item android:drawable="@drawable/icon_home_active" android:state_pressed="true"/>
    <item android:drawable="@drawable/icon_home_active" android:state_checked="true"/>
    <!-- Icon default -->
    <item android:drawable="@drawable/icon_home"/>
</selector>

menu.xml

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

    <item
        android:id="@+id/navigation_home"
        android:icon="@drawable/ic_home"
        android:title="@string/title_home" />
    ....
</menu>

并在Activity中添加以下代码：

bottomNavView.setItemIconTintList(null);

Answer 2

经过几个小时的文字渐变尝试，我终于实现了这个效果。重点是到达BottomNavigationItemView里面的MaterialTextView。这是我在 activity (Kotlin) 的 onCreate() 方法中使用的代码：

for (bottomNavigationItem in binding.bottomNavigation[0] as BottomNavigationMenuView) {
            (((bottomNavigationItem as BottomNavigationItemView)
                .getChildAt(1) as BaselineLayout)
                .getChildAt(1) as MaterialTextView)
                .setGradientText()
        }

setGradientText() 方法只是装饰文本。在您的情况下，您需要添加第三种颜色和设置角度：

fun MaterialTextView.setGradientText() {
    paint.shader = LinearGradient(
        0f,
        0f,
        paint.measureText(text.toString()),
        textSize,
        intArrayOf(
            ContextCompat.getColor(context, R.color.main_gradient_start),
            ContextCompat.getColor(context, R.color.main_gradient_end)
        ),
        null, Shader.TileMode.CLAMP
    )
}

这段代码将装饰底部导航中的每个元素，只有当元素被选中时它们才会呈现渐变。我不确定是否可以让渐变同时作用于活动元素和非活动元素。

此外，如果您需要我的代码 BottomNavigationView:

<com.google.android.material.bottomnavigation.BottomNavigationView
            android:id="@+id/bottomNavigation"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/black"
            app:itemTextColor="@drawable/bottom_menu_selector"
            app:labelVisibilityMode="labeled"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:menu="@menu/bottom_menu" />

总之，这是我目前取得的最好结果： Gradient text

关于图标：您需要为您的图标创建选择器并将它们添加到您的菜单文件中，如下所示：

样本选择器

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Icon active gradient -->
    <item android:drawable="@drawable/ic_home_color" android:state_pressed="true"/>
    <item android:drawable="@drawable/ic_home_color" android:state_checked="true"/>
    <!-- Icon default -->
    <item android:drawable="@drawable/ic_home"/>
</selector>

菜单文件

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/home"
        android:icon="@drawable/home_selector"
        android:title="@string/home" />
    <item
        android:id="@+id/catalogue"
        android:icon="@drawable/catalogue_selector"
        android:title="@string/catalogue" />
    <item
        android:id="@+id/collections"
        android:icon="@drawable/collections_selector"
        android:title="@string/collections" />
    <item
        android:id="@+id/profile"
        android:icon="@drawable/profile_selector"
        android:title="@string/profile" />
</menu>

为什么我不能用渐变颜色更改图标颜色和文本底部导航 android

Why i can't change icon color and text bottom navigation with gradient color android

java

android

android-studio

android-layout

android-bottomnav