TabLayout tab style
I use new TabLayout
from com.android.support:design
library. I want to change background of the selected/unselected tabs.
I look at sources and found only tabBackground
attribute that change all tabs colour and does not control selected tab colour.
How can I control selected/unselected tab background?
Solution 1:
Define:
<style name="AppTabLayout" parent="Widget.Design.TabLayout">
<item name="tabMaxWidth">@dimen/tab_max_width</item>
<item name="tabIndicatorColor">?attr/colorAccent</item>
<item name="tabIndicatorHeight">4dp</item>
<item name="tabPaddingStart">6dp</item>
<item name="tabPaddingEnd">6dp</item>
<item name="tabBackground">?attr/selectableItemBackground</item>
<item name="tabTextAppearance">@style/AppTabTextAppearance</item>
<item name="tabSelectedTextColor">@color/range</item>
</style>
<!-- for text -->
<style name="AppTabTextAppearance" parent="TextAppearance.Design.Tab">
<item name="android:textSize">12sp</item>
<item name="android:textColor">@color/orange</item>
<item name="textAllCaps">false</item>
</style>
Apply:
<android.support.design.widget.TabLayout
style="@style/AppTabLayout"
app:tabTextAppearance="@style/AppTabTextAppearance"
android:layout_width="match_parent"
.... />
Solution 2:
If you look into the TabLayout.class
you will notice inner TabView.class
for tab's actual layout. It's same layout as any other with isSelected
attribute. Selecting tab will also have impact on this so all you need to do is to create selector background drawable like
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true" android:drawable="@color/tab_bg_selected"/>
<item android:drawable="@color/tab_bg_unselected"/></selector>
and attach it to the tabBackground attribute e.g. in XML like
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabBackground="@drawable/tab_bg"
app:tabIndicatorHeight="4dp"/>