CODEWITHSUNDEEP
androidnavigationuinavigationbar
POMAIIIUK
POMAIIIUK

Reputation: 509

BottomNavigationView design with XML *no programmatically

Good day. How can I change icon and text color(active and inactive), using XML?

<android.support.design.widget.BottomNavigationView
            android:id="@+id/nav_view"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:background="@color/colorPrimaryDark"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:menu="@menu/bottom_nav_menu"
    />

Upvotes: 1

Views: 331

Answers (2)

Sumit Shukla
Sumit Shukla

Reputation: 4514

Try this:

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/bottom_navigation"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    android:background="@color/colorPrimary"
    app:itemIconTint="@color/nav_state_list"
    app:itemTextColor="@color/nav_state_list"
    app:layout_behavior="@string/hide_bottom_view_on_scroll_behavior"
    app:menu="@menu/menu_category" />

Inside your drawable create color folder and there put nav_state_list file:

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

Upvotes: 1

R&#243;bert Polovitzer
R&#243;bert Polovitzer

Reputation: 74

For the text add these 2 lines to yout BottomNavigationView:

app:itemTextAppearanceActive="@style/tabbar_text_active"
app:itemTextAppearanceInactive="@style/tabbar_text_inactive"

and create style for them in your style.xml

<style name="tabbar_text_active" parent="TextAppearance.AppCompat.Small">
    <item name="android:textSize">12sp</item>
    <item name="android:textColor">@color/primaryLight</item>
</style>

<style name="tabbar_text_inactive" parent="TextAppearance.AppCompat.Small">
    <item name="android:textSize">12sp</item>
    <item name="android:textColor">@color/textLight</item>
</style>

For icon

app:itemIconTint="@drawable/bottom_nav_colors"

With a drawable:

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

Upvotes: 1

Related Questions