CODEWITHSUNDEEP
androidandroid-tablayout
crazyPixel
crazyPixel

Reputation: 2330

Changing tab indicator background (for all the tablayout view)

I have a question which I can't find an answer to and really have to solve. I am trying to change the background for the tab layout indicator but JUST FOR IT, i.e. if the entire tablayout is green and the tablayoutindicator height is 4dp I want the ENTIRE bottom 4dp of the tablayoutview will be in another color (lets say red) is that possible? Before you answer please note I'm not talking about app:tabIndicatorColor property but on the entire height of the tabIndicator (regardless of the tabIndicator itself).

For example, on the attached image the app:tabIndicatorColor is white but the background of it is black while the entire view is a gardient of blue.

enter image description here

Edit - I managed to do it using a FrameLayout having the bottom view in black while the tablayout is above it with its properties, I'm still looking for a more "clean" way to achieve the same thing

Upvotes: 1

Views: 2753

Answers (1)

Ruan_Lopes
Ruan_Lopes

Reputation: 1399

To achieve what you are looking for you can try the following

Create a selector tab_layout_selector

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

<item android:state_selected="false" android:state_pressed="false">

    <layer-list>

        <!-- Stripe bottom indicator color -->
        <item android:top="-5dp" android:left="-5dp" android:right="-5dp">
            <shape android:shape="rectangle">
                <stroke android:color="@color/red" android:width="4dp"/>
            </shape>
        </item>

    </layer-list>

</item>

</selector>

Finally, in your TabLayout add

 <android.support.design.widget.TabLayout


    <!-- Whole tab background -->
    android:background="@color/white"

    <!-- Line color -->
    android:tabBackground="@drawable/tab_layout_selector"

    .... Others....
    />

Upvotes: 1

Related Questions