CODEWITHSUNDEEP
androidandroid-viewpagerandroid-tablayout
Jong
Jong

Reputation: 65

How to set padding for selection tab in TabLayout on Android

In my application I should TabLayout and ViewPager.
I want when selected Item set padding for tabIndicatorColor in tabLayout.

By default show me such as this image :
Image 1

Bu t I want when selected item, show me such as this :
enter image description here

I want set Padding for tabIndicatorColor.

My TabLayout XML code:

<android.support.design.widget.TabLayout
    android:id="@+id/serialDetail_tabLayout"
    android:layout_width="match_parent"
    android:layout_height="@dimen/size50"
    android:layout_gravity="bottom"
    android:background="@color/colorPrimary"
    app:tabIndicatorColor="@color/colorAccent"
    app:tabSelectedTextColor="@color/colorAccent"
    app:tabTextAppearance="@style/allCapsTabLayout"
    app:tabTextColor="@color/white" />

How can I it? please help me. Thanks all <3

Upvotes: 1

Views: 3177

Answers (2)

DAS
DAS

Reputation: 442

There are two easy ways to do this. Either you use a custom layout for tab or just add a view below the tab of same color.The second option is more easier.

Upvotes: 2

Pritesh - ɐʎıɥpɐΛ ɥsǝʇᴉɹꓒ
Pritesh - ɐʎıɥpɐΛ ɥsǝʇᴉɹꓒ

Reputation: 756

Yes it is possible without custom view and external library..

you may create one selector file

tab_indicator_line.xml add into drawable folder

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true" android:state_pressed="false">
        <layer-list xmlns:android="http://schemas.android.com/apk/res/android">

            <item android:top="-5dp" android:left="-5dp" android:right="-5dp" android:bottom="5dp">
                <shape android:shape="rectangle">

                    <solid android:color="@android:color/white"/>
                    <stroke android:color="@color/colorPrimary" android:width="2dp"/>

                </shape>
            </item>
        </layer-list>
    </item>

    <item android:state_selected="true" android:state_pressed="true">
        <layer-list xmlns:android="http://schemas.android.com/apk/res/android">

            <item android:top="-5dp" android:left="-5dp" android:right="-5dp" android:bottom="5dp">
                <shape android:shape="rectangle">

                    <solid android:color="@android:color/white"/>
                    <stroke android:color="@color/colorPrimary" android:width="2dp"/>

                </shape>
            </item>
        </layer-list>
    </item>

</selector>

Now apply in tabLayout using 

app:tabBackground="@drawable/tab_indicator_line"
app:tabIndicatorHeight="0dp"

Tell me if any query..

Upvotes: 8

Related Questions