TabLayout (Android Design Library) Text color

Question

I am using the new TabLayout from the Android Design library. I managed to set text in textcolor style using tabLayout.setTabTextColors(colorstatelist)

How can I achieve the same using styles.xml?

Answer 1

Via XML attributes:

 <android.support.design.widget.TabLayout android:layout_width="match_parent" android:layout_height="wrap_content" app:tabMode="fixed" app:tabGravity="fill" app:tabTextColor="@color/your_unselected_text_color" app:tabSelectedTextColor="@color/your_selected_text_color"/> 

In addition, for further styling, there are attributes such as tabIndicatorColor or tabIndicatorHeight.

In code:

 tabLayout.setTabTextColors( getResources().getColor(R.color.your_unselected_text_color), getResources().getColor(R.color.your_selected_text_color) ); 

Since this old method is deprecated as API 23, an alternative:

 tabLayout.setTabTextColors( ContextCompat.getColor(context, R.color.your_unselected_text_color), ContextCompat.getColor(context, R.color.your_selected_text_color) ); 

Answer 2

Here is the snippet code to override the text style and highlighted text color

 <style name="MyCustomTabLayout" parent="Widget.Design.TabLayout"> <item name="tabTextAppearance">@style/MyCustomTabText</item> <item name="tabSelectedTextColor">@color/tab_text_act</item> </style> <style name="MyCustomTabText" parent="TextAppearance.AppCompat.Button"> <item name="android:textSize">14sp</item> <item name="android:textColor">@color/tab_text</item> </style> 

And here is the fragment code for the layout

 <android.support.design.widget.TabLayout android:layout_width="match_parent" android:layout_height="wrap_content" style="@style/MyCustomTabLayout" /> 

Answer 3

All of the above answers are correct, but I believe that it is better to override the default styles and change only the specific element that you want to change. The example below will make the text bold:

 <style name="Widget.TabItem" parent="TextAppearance.Design.Tab"> <item name="android:textStyle">bold</item> </style> 

Then..

 app:tabTextAppearance="@style/Widget.TabItem" 

Answer 4

You just need to override the android:textAppearance . Because TabLayout uses textAppearance. here is a little code style code.

 <!-- Base application theme. --> <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"> <!-- Below will reference with our custom style --> <item name="android:textAppearance">@style/my_tab_text</item> </style> <style name="my_tab_text" parent="Base.TextAppearance.AppCompat"> <item name="android:textColor">@android:color/holo_blue_dark</item> </style> 

And , if you do not want to reference Apptheme , you can directly specify TabLayout using the snippet below.

  <android.support.design.widget.TabLayout android:layout_width="match_parent" android:layout_height="wrap_content" app:tabTextAppearance="@style/my_tab_text" app:tabIndicatorHeight="48dp"/> 

Answer 5

For custom tabs, we must override the following: 1) app: tabTextColor // for_unselected_text "

  <android.support.design.widget.TabLayout android:id="@+id/tabs" style="@style/MyCustomTabLayout" android:layout_width="match_parent" android:layout_height="56dp" android:background="?attr/colorPrimary" android:scrollbarSize="24sp" android:visibility="gone" app:tabTextColor="@color/white_40_percent" app:tabMode="scrollable" /> 

2) tabSelectedTextColor // for the selected tab color 3) tabIndicatorColor // color for the tab indicator

  <style name="MyCustomTabLayout" parent="Widget.Design.TabLayout"> <item name="android:textColorPrimary">@color/white</item> <item name="tabSelectedTextColor">@color/white</item> <item name="tabTextAppearance">@style/TabTextStyle</item> <item name="tabIndicatorColor">?attr/colorAccent</item> <item name="tabIndicatorHeight">4dp</item> <item name="android:tabStripEnabled">true</item> <item name="android:padding">0dp</item> </style> <style name="TabTextStyle"> <item name="android:fontFamily">@string/font_fontFamily_medium</item> <item name="android:textStyle">bold</item> <item name="android:textAllCaps">true</item> <item name="android:textColor">@color/tab_text_color</item> <item name="android:textSize">16sp</item> </style> 

tab_text_color.xml

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

Answer 6

Simple and perfect way:

In the XML file ::

 <android.support.design.widget.TabLayout android:layout_width="match_parent" android:layout_height="wrap_content" app:tabTextAppearance="@style/TabText"/> 

In the style-values ​​file:

Note: "cairo_semibold" is an external font, you can replace it with your own font.

 <style name="TabText" parent="TextAppearance.Design.Tab"> <item name="android:textColor">#1f57ff</item> <item name="android:textSize">14sp</item> <item name="android:fontFamily">@font/cairo_semibold</item> </style> 

Answer 7

the best or short and easy way to make a custom application bar like

  <?xml version="1.0" encoding="utf-8"?> <android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="?android:attr/actionBarSize" xmlns:app="http://schemas.android.com/apk/res-auto" android:background="@color/colorAccent" app:theme="@style/myCustomAppBarTheme" app:popupTheme="@style/ThemeOverlay.AppCompat.Dark"><RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent"> <ImageButton android:id="@+id/btn_back" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:background="@android:color/transparent" android:src="@mipmap/ic_launcher" /> <TextView android:id="@+id/txt_title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerVertical="true" android:layout_marginLeft="16dp" android:layout_marginStart="16dp" android:layout_toEndOf="@+id/btn_back" android:layout_toRightOf="@+id/btn_back" android:text="Title" android:textColor="@android:color/white" android:textSize="20sp" android:textStyle="bold" /> </RelativeLayout> </android.support.v7.widget.Toolbar>