How to set Underline under Indicator

[nurzhannogerbek]

Hello man Thanks for this wonderful project! I have 2 questions. I will try to explain it with pictures.

Thats what I want to make

Thats what I have now

My question. How to make as in first picture when Underline under Indicator.

My second question is is it possible here to add shadows under the tabs?

[jpardogo]

Do not use the underline for this effect, use your own view (width="match_parent", height="X dp") under the MaterialPagerTabStrip with the background you want.

[nurzhannogerbek]

@jpardogo Hello man! Thank you for your reply. I tried to make that effect with underline but it was unsuccessful. I tried to add View element inside Tabs but application crashed and I didnt find way how to fix it inside library. Can you show me right way to do that please!

[nurzhannogerbek]

I tried something like that before which was unsuccesfull.

           <com.astuetz.PagerSlidingTabStrip
                        *custom settings here* >

            <View
                android:layout_width="match_parent"
                android:background="#FBC02D"
                android:layout_height="5dp"/>

            </com.astuetz.PagerSlidingTabStrip>

[jpardogo]

Something like that.

<LinearLayout 
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

   <com.astuetz.PagerSlidingTabStrip
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"/>
    <View
        android:layout_width="match_parent"
        android:layout_height="5dp"
        android:background="@drawable/shadow"/>
</LinearLayout>

To create a shadow use a xml drawable:

shadow.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:angle="-90"
        android:startColor="#5000"
        android:endColor="@android:color/transparent"
        android:type="linear"/>
</shape>

[nurzhannogerbek]

@jpardogo Are you sure that it must be like that? I am not sure that it will be like in first picture. I think View element will be under PagerSlidingTabStrip but in my case I want to show it inside of PagerSlidingTabStrip. I tested it right now and as I expected View element under PagerSlidingTabStrip. Its like in the second picture of my post. View element here must be like underline but underline under Indicator line. I hope you understand me.

       <RelativeLayout
             xmlns:android="http://schemas.android.com/apk/res/android"
             xmlns:tools="http://schemas.android.com/tools"
             xmlns:app="http://schemas.android.com/apk/res-auto"
             android:layout_width="match_parent"
             android:layout_height="match_parent">

        <include
            android:id="@+id/application_toolbar"
            layout="@layout/application_toolbar"/>

        <LinearLayout
            android:id="@+id/material_tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:layout_below="@+id/application_toolbar">

            <com.astuetz.PagerSlidingTabStrip 
                  android:layout_height="?attr/actionBarSize"
                  ****/>

            <View
                android:layout_width="match_parent"
                android:layout_height="5dp"
                android:background="#FBC02D"/>
        </LinearLayout>

        <android.support.v4.view.ViewPager
            android:id="@+id/pager"
            android:layout_below="@+id/material_tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            tools:context=".MainActivity" />
    </RelativeLayout>

[nurzhannogerbek]

I tested your updated code and result is the same as in the second picture. Do you have any ideas?!)

[jpardogo]

Yes sorry. That solved your second question for the shadow under the tabs.

For the first questions you have to take a look to #95 and #96. #96 was already merged in the dev branch for next release. So you will only need to set pstsIndicatorHeightHeight and pstsUnderlineHeight as you prefer.

[nurzhannogerbek]

Thank you man! I didnt notice that this question was asked before. Thats exactly what I need. God bless you!