Unable to see Tab Indicator in TabLayout design support library

Question

I am using Material design library and creating layout using CoordinatorLayout ,AppBarLayout ,RecyclerView and TabLayout .

My issu

Answer 1

I think it's bug on Design Support library. that When You apply both property at the same time

app:tabBackground="@color/tab_bg"
app:tabIndicatorColor="@color/tab_indicator"

the background color overlap the tab indicator. that's why the tab indicator is not visible.

If you remove tabBackground color property then you can see the indicator.

[Update on 25-06-2015]

As I said it's bug on Design Support library. I reported it to android bug source. here is the refrence https://code.google.com/p/android/issues/detail?id=176540.

So status for this is issue is FutureRelease so bug is fixed. And it will come in future library.

[Update 20-07-2015]

The bug is fixed and Released in v 22.2.1. you can also check it on above link.

Answer 2

Here you go.. :)

Change your attribute

app:tabBackground="@color/tab_bg"

to

android:background="@color/tab_bg"

your final code..

 <android.support.design.widget.TabLayout
            android:id="@+id/tab_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/tab_bg"
            app:tabIndicatorColor="@color/tab_indicator"
            app:tabIndicatorHeight="5dp"
            app:tabMode="fixed">
 </android.support.design.widget.TabLayout>

Answer 3

You can use below methods

1 Change in xml app:tabIndicatorColor="" set your indicator color

2 creating costume theme

<style name="AppTheme.TabStyle" parent="Widget.Design.TabLayout">
        <item name="tabTextAppearance">@style/AppTheme.TextStyle</item>
        <item name="tabTextColor">@color/primaryDark</item>
        <item name="tabSelectedTextColor">@color/white</item>
        <item name="tabIndicatorColor">@color/primaryDark</item>
        <item name="tabIndicatorHeight">3dp</item>
        <item name="android:background">?attr/colorPrimary</item>
    </style>

    <style name="AppTheme.TextStyle" parent="TextAppearance.Design.Tab">
        <item name="android:textSize">14sp</item>
        <item name="textAllCaps">true</item>
    </style>

set theme in your Tablayout

Answer 4

I've just fixed this bug set background color programmatically

tabLayout.setBackgroundColor(getResources().getColor(R.color.primary));

or in xml

android:background="@color/primary"

But I don't know if there is any problem when you set background color this way

Answer 5

You are using RecyclerView as the main content, use ViewPager containing RecyclerView and make sure you give viewpage attribute app:layout_behavior="@string/appbar_scrolling_view_behavior"

Answer 6

If anyone still facing the problem this is Working example from my existing application, try using it and modify based on your needs.

 <com.google.android.material.tabs.TabLayout
    android:id="@+id/homeScreenTab"
    android:layout_width="match_parent"
    android:layout_height="60dp"
    android:background="@color/design_default_color_primary_dark"
    app:tabIndicatorColor="@color/black"
    app:tabGravity="fill"
    app:tabIndicatorHeight="3dp"
    app:tabMaxWidth="0dp"
    app:tabMode="fixed"
    app:tabSelectedTextColor="@android:color/white" />