Develop Reference

change unselected tab color of tablayout dynamically

i am using databinding to change the color of the selected tab of tab layout
#BindingAdapter(value = ["tabIndicatorColor", "context"])
fun setSelectedTabIndicatorColor(tabLayout: TabLayout, color: Int, context: Context) {
tabLayout.setSelectedTabIndicatorColor(getColor(context, color))
}
and setting it from the tabLayout view
<variable
name="professionalTypeColor"
type="Integer" />
<com.google.android.material.tabs.TabLayout
android:id="#+id/tl_images"
android:layout_width="0dp"
android:layout_height="5dp"
tabIndicatorColor="#{professionalTypeColor}"
context="#{context}"
app:tabPaddingEnd="8dp"
app:tabPaddingStart="8dp" />
what i did until here is exactly as i wanted it to be, but for the unselected tabs i couldn't make a databinding Adapter for it so i change its color dynamically ,
i tried using
app:tabBackground="#color/grey"
or
app:tabBackground="#drawable/selector_tab_indicator"
but this need to be predefined color or a drawable with two colors (selected,unselected) which is not my desired result,
my question is how to make a databinding adapter to set the tabBackground dynamically , ( i couldn't find a setter in tablayout with attribute of tabbackground )

Create a style in style.xml and call in xml layout like below
<style name="MyCustomTabLayout" parent="Widget.Design.TabLayout">
<item name="tabIndicatorColor">#color/colorAccent</item>
<item name="tabIndicatorHeight">2dp</item>
<item name="tabTextAppearance">#style/MyCustomTabTextAppearance</item>
<item name="tabSelectedTextColor">#color/colorAccent</item>
</style>
<style name="MyCustomTabTextAppearance" parent="TextAppearance.Design.Tab">
<item name="android:textSize">#dimen/title_text_size</item>
<item name="android:textColor">#color/secondaryText</item>
<item name="textAllCaps">false</item>
<item name="android:textStyle">normal</item>
</style>
Call here
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabTextColor="#android:color/white"
app:tabMode="scrollable"
**style="#style/MyCustomTabLayout"**
app:tabGravity="fill" />

Change size of Tabs in Android TabLayout In Kotlin

I am new to Android and Kotlin. I am trying to develop an app that contains a TabLayout with 2 tabs. The titles are rather large, and no matter what I do, I cannot get things to look right. The app displays in horizontal mode only and so there is plenty of space in the top bar for the titles, but the tab titles appear to be fixed. As a result of this, the text size is too small. I have tried to change the text size, change the Styles, and even tried to increase the size of the Tab Layout, but nothing helps. Nothing seems to change the text size in the tab itself. Can someone please help me with some code to make this change?
Thank you in advance for your help!
Styles:
<style name="MyTabLayout" parent="Base.Widget.Design.TabLayout">
<item name="tabTextAppearance">#style/MyTabTextAppearance</item>
<item name="android:textSize">36sp</item>
</style>
<style name="MyTabTextAppearance">
<item name="android:textSize">36sp</item>
<item name="android:textColor">#android:color/white</item>
<item name="textAllCaps">true</item>
</style>
Tab Layout:
<com.google.android.material.tabs.TabLayout
app:tabTextAppearance="#style/MyTabTextAppearance"
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="fill_horizontal"
android:background="?attr/colorPrimary"
android:textAlignment="center"
android:textSize="36sp"
app:tabGravity="fill" />

Try out with this style :
<style name="MyTabStyle" parent="Base.Widget.Design.TabLayout">
<item name="android:textSize">36sp</item>
<item name="android:textAllCaps">true</item>
</style>
And apply in Tablayout :
<com.google.android.material.tabs.TabLayout
app:tabTextAppearance="#style/MyTabTextAppearance"
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="fill_horizontal"
app:tabTextAppearance="#style/TabLayoutStyle"
android:background="?attr/colorPrimary"
app:tabGravity="fill" />

How to set the size of text in PagerTitleStrip

I am trying to make scrollable tabs and want to set the size of the title .How can I do this as I cant set the text size in PagerTitleStrip in the xml.Can some one tell me how to do this.

Add below style in your styles.xml
<style name="viewPagerTitleStrip">
<item name="android:textColor">#color/primary_dark_material_light</item>
<item name="android:textSize">20sp</item>
</style>
And then
<android.support.v4.view.PagerTitleStrip
android:id="#+id/pager_title_strip"
style="#style/viewPagerTitleStrip"
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_gravity="top"
android:background="#color/white"
android:paddingTop="4dp"
android:paddingBottom="4dp" />

Here is an example on how to do it:
in your xml:
<android.support.v4.view.PagerTitleStrip
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#style/MyCustomTabText"/>
and in styles.xml
<style name="MyCustomTabText">
<item name="android:textSize">12sp</item>
</style>

TabLayout highlite and Ripple effect

I have two question with TabLayout
1)Can i remove TabLayout highlight or change highlight color of tab layout?
2)Can i add ripple effect for tab. Each tab contain TextView i try to add custom background something like this
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?android:colorControlHighlight">
<item android:drawable="#drawable/btn_white_bg" />
</ripple>
but it doesn't work.

To remove the highlight, add the below line to your XML:
app:tabRippleColor="#android:color/transparent"

Another solution that works for me
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:minHeight="?attr/actionBarSize"
android:layout_width="match_parent"
app:tabMode="fixed"
app:tabGravity="fill"
android:clipToPadding="false"
android:elevation="0dp"
style="#style/MyCustomTabLayout"
android:background="#color/colorPrimary"
app:tabBackground="?attr/selectableItemBackground"
app:tabIndicatorColor="#color/app_yellow"
app:tabIndicatorHeight="4dip"
android:layout_height="wrap_content"/>
I just added following lines
android:background="#color/colorPrimary"
app:tabBackground="?attr/selectableItemBackground"

You can customize the TabLayout like this:
Make a xml file inside values MyCustomTabLayout.xml and then put these
<resources>
<style name="MyCustomTabLayout" parent="Widget.Design.TabLayout">
<item name="tabMaxWidth">#dimen/tab_max_width</item>
<item name="tabIndicatorColor">#color/black</item>
<!-- <item name="tabIndicatorColor">?attr/colorAccent</item> -->
<item name="tabIndicatorHeight">5dp</item>
<item name="tabPaddingStart">12dp</item>
<item name="tabPaddingEnd">12dp</item>
<item name="tabBackground">?attr/selectableItemBackground</item>
<item name="tabTextAppearance">#style/MyCustomTabTextAppearance</item>
<item name="tabSelectedTextColor">?android:textColorPrimary</item>
</style>
<style name="MyCustomTabTextAppearance" parent="TextAppearance.Design.Tab">
<item name="android:textSize">16sp</item>
<item name="android:textColor">?android:textColorSecondary</item>
<item name="textAllCaps">true</item>
</style>
and inside ur layout add this:
<android.support.design.widget.TabLayout
android:id="#+id/mainSlidingTab"
style="#style/MyCustomTabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/tool_bar"
android:background="#color/ColorPrimary" />
<!-- app:tabMode="scrollable" when many tabs -->

Alternatively, you can make the ripple transparent programmatically:
val tabs = findViewById<TabLayout>(R.id.your_tablayout)
for (n in 0 until tabs.tabCount) {
val tab = (tabs.getChildAt(0) as ViewGroup).getChildAt(n)
tab?.let {
val ripple = it.background as? RippleDrawable
ripple?.setColor(ColorStateList.valueOf(Color.parseColor("#00000000")))
}
}
This approach can also be used to set own ripple color for each tab.

Design Support TabLayout Style Not Applied

I'm working with android.support.design.widget.TabLayout and I'm having a REAL hardtime trying to make the applied theme to work. Here's the XML I'm trying to use:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.TabLayout
android:id="#+id/viewPagerLayout_tabView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="#style/TabLayout.Theme"/>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.view.ViewPager
android:id="#+id/viewPagerLayout_viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#android:color/transparent"
android:visibility="gone" />
</FrameLayout>
</LinearLayout>
Here's the style that is being applied:
<style name="TabLayout.Theme" parent="Widget.Design.TabLayout">
<item name="tabIndicatorColor">#color/rowHeaderColor</item>
<item name="tabIndicatorHeight">5dp</item>
<item name="tabTextAppearance">#style/TextAppearance.Jacksonville.Tab</item>
<item name="tabSelectedTextColor">#000</item>
</style>
<style name="TextAppearance.Jacksonville.Tab" parent="TextAppearance.Design.Tab">
<item name="android:textSize">12sp</item>
<item name="android:textColor">#4C4D4F</item>
<item name="textAllCaps">true</item>
</style>
When applied to the theme, the TextColor doesn't appear as the one I selected. I thought it was a problem with my sight so I changed it to Selected: Black and not selected: white but the same colors appeared. Is there something I would be needing to besides that in order for the theme to be applied? The problem is only with the text colors. The textAllCaps, textSize and other attributes are being applied with no major problems.
Thanks!