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 issue is i am unable to see Tab indicator in Tablayout .Below is my xml file that i am using in AppCompactActivity.

<android.support.design.widget.CoordinatorLayout
        android:id="@+id/coodinate_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/btn_next_screen">

        <android.support.v7.widget.RecyclerView
            android:id="@+id/list_recycle"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginBottom="30dp"
            android:background="@color/white"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"

            />

        <android.support.design.widget.AppBarLayout
            android:id="@+id/abar_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar_home"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="?attr/colorPrimary"
                android:minHeight="?attr/actionBarSize"
                app:layout_scrollFlags="scroll|enterAlways"

                >


            </android.support.v7.widget.Toolbar>

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

                ></android.support.design.widget.TabLayout>


        </android.support.design.widget.AppBarLayout>


        <android.support.design.widget.FloatingActionButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="15dp"
            app:layout_anchor="@+id/list_recycle"
            app:layout_anchorGravity="bottom|right"
            android:id="@+id/floatin_ab_home"
            app:fabSize="mini"
            android:src="@drawable/ic_content_add"

            />


    </android.support.design.widget.CoordinatorLayout> 

Below is screen which don't showing Tab indicator so can any one known what i am missing .

Frangipane

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.

Cowberry

Ok let's me check and Do you have any other way to make both working background color change and tab indicator color. – Frangipane

For now there is no solution. But you can pass the customview to the tab. So for each tab you can pass LinearLayout containing textView and ImageView. And you can set backgroud color to LinearLayout. – Cowberry

Still persist in v23.+ too – Vic

Answer 2

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

Tarsier

Answer 3

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

Genevieve

Answer 4

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>

Stunt

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"

Tirrell

i have tried your suggested ViewPager and inside First fragment it's have RecycleView but yet my TabLayout unable to show Tab indicator. – Frangipane

did you call tabLayout.setupWithViewPager(viewPager); ? – Tirrell

Refer this sample project by Chris Banes github.com/chrisbanes/cheesesquare.git – Tirrell

Yes i call it but it making hiding my text so i need to add getPageTitle(int position) in FragmentPagerAdapter.But yet i am unable to customize background color of TabLayout . – Frangipane

In your given link it's using default color of TabLayout while i am looking for changing background and tab indicator with my provided color. – Frangipane

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

Kovno