15

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 .

Screen which missing Tab Indicator

Herry
  • 7,037
  • 7
  • 50
  • 80

6 Answers6

33

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.

Moinkhan
  • 12,732
  • 5
  • 48
  • 65
  • 1
    Ok let's me check and Do you have any other way to make both working background color change and tab indicator color. – Herry Jun 12 '15 at 06:24
  • 1
    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. – Moinkhan Jun 12 '15 at 06:45
  • Still persist in v23.+ too – EngineSense Dec 30 '15 at 22:08
12

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

MayurDev
  • 189
  • 2
  • 8
1

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

Jhonatas
  • 108
  • 1
  • 5
1

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>
Community
  • 1
  • 1
Aks4125
  • 4,522
  • 4
  • 32
  • 48
0

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"

Rajesh Batth
  • 1,672
  • 2
  • 19
  • 23
  • i have tried your suggested ViewPager and inside First fragment it's have RecycleView but yet my TabLayout unable to show Tab indicator. – Herry Jun 12 '15 at 08:16
  • did you call `tabLayout.setupWithViewPager(viewPager);` ? – Rajesh Batth Jun 12 '15 at 09:13
  • Refer this sample project by Chris Banes https://github.com/chrisbanes/cheesesquare.git – Rajesh Batth Jun 12 '15 at 09:15
  • 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 . – Herry Jun 12 '15 at 10:09
  • 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. – Herry Jun 12 '15 at 10:13
0

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" />
Badri Paudel
  • 1,365
  • 18
  • 19