Samuel
Samuel

Reputation: 17

How do I change bottom navigation view color tint to a custom color created with xml?

Is it possible to change bottom navigation view color tint to a custom color created using xml? If so how do I do this? I am aware that you can change the icon color tint with the property "app:itemIconTint="@color/colorPrimaryDark", but I am not sure how to go about referencing the color in my drawable for the iconTint color.

Bottom navigation view

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.examp.smartshop.Controller.MainActivity">

    <FrameLayout
        android:id="@+id/fragment_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@id/bottom_navigation">

    </FrameLayout>

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        app:itemIconTint="@color/colorPrimaryDark"
        app:itemTextColor="@color/colorPrimaryDark"
        app:menu="@menu/bottom_navigation"
        app:itemIconSize="25sp"

        android:background="?android:attr/windowBackground"/>

</RelativeLayout>

**Custom color**
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >

    <gradient
        android:angle="90"
        android:endColor="#EC6EAD"
        android:startColor="#3494E6"
        android:type="linear" />

    <corners
        android:radius="0dp"/>

</shape>

Upvotes: 0

Views: 1078

Answers (1)

anon
anon

Reputation:

Android BottomNavigationView

To disable this behaviour

bottomNavigationView.itemIconTintList = null

Change Icon and Selected Icon, from luasoftware.com:

Navigation Item (including text and icon) is specified in a menu file.

<com.google.android.material.bottomnavigation.BottomNavigationView
        ...
        app:menu="@menu/navigation"
        />



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

    <item
        android:id="@+id/navigation_dailyquote"
        android:icon="@drawable/yy_dailyquote"
        android:title="@string/navigation_dailyquote"/>

        ...
</menu>

To support both icon and selected icon, create res/drawable/yy_dailyquote.xml.

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

TextColor and selected TextColor

Change TextColor

<com.google.android.material.bottomnavigation.BottomNavigationView
        ...
        app:itemTextColor="#998971"
        />

Support TextColor and Selected TextColor

<com.google.android.material.bottomnavigation.BottomNavigationView
        ...
        app:itemTextColor="@color/navigation_text_color"
        />

Create res/color/navigation_text_color.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true" android:color="#9A8971" />
    <item android:state_checked="false" android:color="#AD9F88"/>
</selector>

Change Background Color

<com.google.android.material.bottomnavigation.BottomNavigationView
        ...
        android:background="#FDFAE6"
        />

Upvotes: 4

Related Questions