CODEWITHSUNDEEP
androidandroid-layoutandroid-xmlandroid-tablayoutbottomnavigationview
MIDHUN CEASAR
MIDHUN CEASAR

Reputation: 131

How to add a different background color to bottom navigation tab selected item?

I need to add a different background color i.e a grey color as in the below pictures(Click on the blue texts to view), to the current selected tab in bottom navigation. I am using the default navigation tab activity without the help of any libraries.

bottom navigation active tab highlighted

second active tab highlighted

Here is code for bottom navigation view:

<android.support.design.widget.BottomNavigationView
    android:id="@+id/navigation_Userview"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    app:itemBackground="@color/ActivityBackgroundColor"
    app:itemIconTint="@drawable/navigation_item_selector"
    app:itemTextColor="@drawable/navigation_item_selector"
    app:menu="@menu/navigation1"/>

Here is my code for navigation item selector:

<selector xmlns:android="http://schemas.android.com/apk/res/android">

<item android:color="@color/Buttoncolor" android:state_checked="true" />
<item android:color="@color/TextColor" android:state_checked="false" />

Upvotes: 1

Views: 3741

Answers (1)

Radesh
Radesh

Reputation: 13565

this library can help you

NavigationTabBar

in gradle(app)

compile 'devlight.io:navigationtabbar:1.2.5'

simply add this in your xml file

 <devlight.io.library.ntb.NavigationTabBar
    android:id="@+id/navigationTabBar"
    android:layout_width="match_parent"
    android:layout_height="@dimen/_50sdp"
    app:ntb_animation_duration="400"
    app:ntb_titled="true"
    app:ntb_scaled="true"
    app:ntb_tinted="true"
    app:ntb_bg_color="@color/colorPrimary"
    app:ntb_active_color="@color/colorAccent"
    app:ntb_inactive_color="@color/colorPrimary"
    app:ntb_title_mode="all"
    app:ntb_swiped="true"
    app:ntb_icon_size_fraction="0.4"
    app:ntb_title_size="@dimen/littleFontSize"/>

UPDATE

you can create selector name backgrand_nav_item.xml like below

<selector xmlns:android="http://schemas.android.com/apk/res/android">
     <item android:drawable="@color/colorAccent" 
           android:state_checked="true"/>
     <item android:drawable="@color/colorPrimary"
           android:state_checked="false"/>
</selector>

and your BottomNavigationView 

<android.support.design.widget.BottomNavigationView
android:id="@+id/navigation_Userview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:itemBackground="@drawable/backgrand_nav_item"
app:itemIconTint="@drawable/navigation_item_selector"
app:itemTextColor="@drawable/navigation_item_selector"
app:menu="@menu/navigation1"/>

Upvotes: 4

Related Questions