how to add line above tabs android tablayout

Question

need help

I have searched for my requirement but didn't found so posting my own question.

I need to show line above tabs not below as all solution is for adding the line below the tabs text.

should I use custom tabs or android supports this scenario without making custom??

links I have viewed are as follows

https://www.google.com.pk/search?q=fabric+documentation&rlz=1C1CHBD_enPK741PK753&oq=fabric+documentation+&aqs=chrome..69i57.5669j0j7&sourceid=chrome&ie=UTF-8#safe=active&q=how+to+adding+line+above+tabs+android

no code is posted as I want to know what should be used.. ur suggestion would be helpful.. thanks

Answer 1

Try this create a background in res/drawable folder and set app:tabBackground="@drawable/selector"

make your like this Tablayout

<android.support.design.widget.TabLayout
            android:id="@+id/detail_tabs"
            android:layout_width="match_parent"
            app:tabSelectedTextColor="@color/colorPrimary"
            app:tabIndicatorHeight="0dp"
            android:layout_height="wrap_content"
            app:tabMode="scrollable"
            app:tabBackground="@drawable/selector" />

Here selector.xml

<?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="3dp" android:left="-5dp" android:right="-5dp" android:bottom="-5dp">
                <shape android:shape="rectangle">
                    <solid android:color="@color/colorWhite"/>
                    <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="3dp" android:left="-5dp" android:right="-5dp" android:bottom="-5dp">
                <shape android:shape="rectangle">
                    <solid android:color="@color/colorWhite"/>
                    <stroke android:color="@color/colorPrimary" android:width="2dp"/>
                </shape>
            </item>
        </layer-list>
    </item>

</selector>

Hope it will works if not then add comment.

Answer 2

app:tabIndicatorGravity="top"

Its very simple now to show the indicator at the top with this.