TabLayout highlite and Ripple effect

Question

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.

Roussel

Mark this. If there is a solution to this question, I want to know. – Stoker

Did you find the right solution? I tried below mentioned solution but ripple color is not changing .. – Sinegold

if u want change ripple color use the code above, but change android:color attr color. And set this as selectableItemBackground attr in u app theme in /values-v21 – Roussel

Answer 1

To remove the highlight, add the below line to your XML:

app:tabRippleColor="@android:color/transparent"

Blackmon

Answer 2

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"

Abroms

Simple and Sweet approach! – Barbrabarbuda

Answer 3

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 -->

Melinamelinda

For some reason "?attr/selectableItemBackground" is not accepted now? I could work around that by using the ripple xml as a tabBackground. – Implead

Answer 4

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.

Etrem