底部导航视图-渐变图标色调

时间:2018-09-20 07:56:00

标签: android material-design gradient bottomnavigationview

我在BottomNavigationView中更改了图标色调,并在按下图标时使用了选择器和渐变色作为色调,但是改为将图标色调更改为渐变Android使我的所有图标变为紫色。 enter image description here 我的问题是,是否有可能将BottomNavigationView中的图标色调更改为渐变颜色?

BottomNavigationCode:

<com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/nav_bottom_main"
        android:layout_width="match_parent"
        app:itemIconTint="@color/bottom_menu_background"
        android:layout_height="wrap_content"
        app:menu="@menu/bottom_navigation_main"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

bottom_menu_background:

 <?xml version="1.0" encoding="utf-8"?>
 <selector xmlns:android="http://schemas.android.com/apk/res/android">
     <item android:color="@color/button_gradient_blue" android:state_checked="true" />
     <item android:color="@color/baseGray"/>
 </selector>

button_gradient_blue:

<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:state_pressed="true" >
        <shape android:shape="rectangle"  >
            <corners android:radius="@dimen/base_button_radius" />
            <gradient android:angle="0" android:startColor="@color/light_blue_gradient_start"
            android:endColor="@color/light_blue_gradient_end"  />
        </shape>
    </item>
    <item android:state_focused="true">
        <shape android:shape="rectangle"  >
            <corners android:radius="@dimen/base_button_radius" />
            <solid android:color="@color/button_pressed_color"/>
        </shape>
    </item>
    <item >
        <shape android:shape="rectangle"  >
            <corners android:radius="@dimen/base_button_radius" />
            <gradient android:angle="0" android:startColor="@color/light_blue_gradient_start"
            android:endColor="@color/light_blue_gradient_end" />
        </shape>
    </item>
</selector>

4 个答案:

答案 0 :(得分:1)

解决方案:

首先,请使用下面给出的BottomNavigationView

<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/White"
    app:itemIconTint="@color/bottom_color"
    app:itemTextColor="@color/bottom_color"
    app:menu="@menu/your_menu_layout"/>

然后,创建一个名为color的文件夹(如果尚未创建),然后创建一个名为bottom_color的文件,然后使用下面的app:itemIconTint="@color/bottom_color"文件:

bottom_color

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

    <item
        android:color="@color/Black"
        android:state_checked="false"/>
    <item
        android:color="#1c5fab"
        android:state_checked="true"/>

</selector>

您可以在android:state_checked="true"中给您想要的颜色

这来自我正在使用的自己的项目。

尝试一下。希望对您有所帮助。

答案 1 :(得分:1)

好吧,我设法通过使用两个不同的可绘制对象来做到这一点,一个具有渐变色,另一个在底部导航菜单中未选中。

我已经创建了扩展BottomNavigationView形式的自定义视图,并且已经创建了用于创建菜单的自定义方法:

fun initMenu(){
    itemIconTintList = null
    var firstStart = true
    setOnNavigationItemSelectedListener {
        val index = it.itemId
        firstStart = false
        menu.forEach {
            if (it.isChecked && !firstStart) {
                if (it.itemId == index)
                    return
                it.isChecked = false
                it.icon = ContextCompat
                    .getDrawable(context, UNSELECTED_MAP[it.itemId]!!)
        }

    }
    it.icon = ContextCompat.getDrawable(context, SELECTED_MAP[it.itemId]!!)

}

其中UNSELECTED_MAP和SELECTED MAP是一个HashMap,其项目菜单ID为“键”,可绘制资源为“值”

答案 2 :(得分:1)

比创建子类更简单的方法是创建两个单独的可绘制对象,然后创建一个选择器,该选择器被分配为底部导航视图菜单的图标。

activity.xml:

<android.support.design.widget.BottomNavigationView
    android:id="@+id/navigation"
    app:itemIconTint="@drawable/sel_navigation"
    app:itemTextColor="@drawable/sel_navigation_label"
    app:menu="@menu/navigation" />

菜单/navigation.xml:

<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
    android:id="@+id/navigation_history"
    android:icon="@drawable/ic_history_selector"
    android:title="@string/title_history" />
</menu>

drawable / ic_history_selector.xml:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/ic_history_selected" android:state_pressed="true" />
<item android:drawable="@drawable/ic_history_selected" android:state_checked="true"/>
<item android:drawable="@drawable/ic_history"/>
</selector>

drawable / ic_history.xml:

<vector ...>
<path android:fillColor="@color/gradient_orange" .../>
</vector>

color / gradient_orange.xml:

<gradient xmlns:android="http://schemas.android.com/apk/res/android"
android:angle="0"
android:endColor="@color/orange"
android:startColor="@color/lightOrange"
android:startX="0"
android:endX="0"
android:startY="0"
android:endY="100"
android:type="linear" />

最后,在活动中,您需要将图标着色列表设置为null,因此它不会使用xml中的图标着色颜色。与渐变(API 24+)完美搭配。

请参阅:https://stackoverflow.com/a/47203888

答案 3 :(得分:0)

在Java中设置颜色 bottomNav.addItemNav(new ItemNav(this, R.drawable.ic_home, getResources().getString(R.string.home)).addColorAtive(R.color.yellow_selected_color).addColorInative(R.color.text_color));