Changing the background color of a Tab in TabLayout (Android design support library) doesn't occupy the entire tab space
Define a selector as a drawable, and also have a drawable for the selected/unselected states.
For this solution, I started with the code from this answer, and then added the functionality that changes the background color for the current Tab.
First, the selector, tab_background.xml
in the drawable folder:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/tab_background_selected" android:state_selected="true" />
<item android:drawable="@drawable/tab_background_unselected" android:state_selected="false" android:state_focused="false" android:state_pressed="false" />
</selector>
Then, tab_background_selected.xml
in the drawable folder:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<solid android:color="#d13fdd1a" />
</shape>
Then, tab_background_unselected.xml
in the drawable folder:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<solid android:color="#3F51B5" />
</shape>
Finally, in your styles.xml
, specify the selector to use, and also specify the tab indicator style, since the app:tabIndicatorColor
property in the TabLayout will now be ignored:
<style name="Base.Widget.Design.TabLayout" parent="android:Widget">
<item name="tabBackground">@drawable/tab_background</item>
<item name="tabIndicatorColor">#ff00ff</item>
<item name="tabIndicatorHeight">2dp</item>
</style>
Result with the example colors above:
Additional Note:
Tested with the 23.3.0 versions of the support library components:
dependencies {
compile 'com.android.support:appcompat-v7:23.3.0'
compile 'com.android.support:cardview-v7:23.3.0'
compile 'com.android.support:recyclerview-v7:23.3.0'
compile 'com.android.support:design:23.3.0'
compile 'com.android.support:support-v4:23.3.0'
}
you should use:
app:tabBackground="@drawable/tab_selector"
android:background="@color/colorNormal"
tab_selector.xml (in Drawable Folder):
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true" android:drawable="@color/colorSelected"/>
<item android:state_selected="false" android:drawable="@color/colorNormal"/>
</selector>
Tabs with Ripple effect:
In addition to Daniel Nugent's answer It would be beautiful to add a ripple effect to tabs. In order to achieve this, you must add these two drawables to drawable-v21
folder:
tab_background_selected.xml
:
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#63D25B"> <!-- ripple color -->
<item android:drawable="#d13fdd1a" /> <!-- normal color -->
</ripple>
tab_background_unselected.xml
:
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#606FC7"> <!-- ripple color -->
<item android:drawable="#3F51B5" /> <!-- normal color -->
</ripple>