CODEWITHSUNDEEP
androidcolorsbottomnavigationview
JayJona
JayJona

Reputation: 502

Change the color of bottom navigation bar item

I set the primary color as a certain type of orange and I can't understand why by default my bottom navigation bar takes white and not primary color as the color for the selected items, how to solve?

xml code for the bottom navigation bar

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_marginStart="0dp"
        android:layout_marginLeft="0dp"
        android:layout_marginEnd="0dp"
        android:layout_marginRight="0dp"
        android:layout_marginBottom="0dp"
        android:background="@color/colorAccent"
        app:menu="@menu/bottom_navigation"/>

colors (the primary is some kind of orange)

<color name="colorPrimary">#fb8c00</color>
<color name="colorPrimaryDark">#c25e00</color>
<color name="colorPrimaryLight">#ffbd45</color>
<color name="textOnPrimary">#000000</color>
<color name="colorAccent">#D81B60</color>

as you can see the item selected and the text are white while the primary color is orange enter image description here

Upvotes: 1

Views: 6618

Answers (2)

Dharmesh Patel
Dharmesh Patel

Reputation: 91

Step-1 Create drawable file under drawable folder and and add below code.

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#82C341" android:state_checked="true" />
<item android:color="#a9a9a9" android:state_checked="false"/>
</selector>

Step-2 Then use this drawable file like this. Add these two lines. app:itemIconTint="@drawable/your_drawable_file_name" app:itemTextColor="@drawable/your_drawable_file_name"

Full Code

<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/tab_bg"
    android:layout_gravity="start"
    android:padding="0dp"
    android:focusable="false"
    app:itemIconTint="@drawable/your_drawable_file_name"
    app:itemTextColor="@drawable/bottom_navigation_color_selector"
    app:menu="@menu/menu_bottom_navigation"
    app:labelVisibilityMode="labeled" />

Upvotes: 1

Vedprakash Wagh
Vedprakash Wagh

Reputation: 3732

Add the following three tags to control the coloring of Tabs as well as Text shown in the Tabs in BottomNavigationView

<com.google.android.material.bottomnavigation.BottomNavigationView
    style="@style/Widget.MaterialComponents.BottomNavigationView.Colored"
    android:id="@+id/navigation"
    android:layout_width="match_parent"
    android:layout_height="56dp"
    android:layout_gravity="bottom"
    android:background="@android:color/white"
    app:itemIconTint="@android:color/holo_orange_dark"
    app:itemTextColor="@android:color/holo_orange_dark"
    app:menu="@menu/menu_main" />

And it looks like this,

enter image description here

Unfortunately, I could've created Drawable to handle different states, but the itemIconTint takes only color as input and not Drawable. Still pretty close to what you want to achieve.

Upvotes: 1

Related Questions