PagerSlidingTabStrip selected tab line at top

Question

I'm using library PagerSlidingTabStrip for dynamic number of headers in a ViewPager. It's a great library, easy to use, but I need customize it a little bit more.

My PagerSlidingTabStrip header is at the bottom of the screen, so, I need the 'full width underline' and 'selected item line indicator' in the top of the PagerSlidingTabStrip component.

After some tests, I have finally the 'full width underline' in the correct position, using auxiliar LinearLayout like this:

<LinearLayout
        android:id="@+id/tabs_container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_alignParentBottom="true">

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="2dp"
            android:orientation="vertical"
            android:background="@color/lfp_yellow"/>

        <com.astuetz.PagerSlidingTabStrip
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="48dip"
            app:pstsDividerColor="@android:color/transparent"
            app:pstsIndicatorColor="@color/light_yellow"
            app:pstsIndicatorHeight="4px"
            app:pstsShouldExpand="true"/>
    </LinearLayout>

But I have not form to place 'selected item line indicator' at the top. I tried to change selected item background with a drawable with a line at top, but is not working :(

Any ideas?

Thanks a lot.

score 0 · Accepted Answer · edited May 23 '17 at 10:28

Finally I found the solution, but it's needed some changes in library code.

First of all, we need add the library code in our project, NOT the external dependency as usually:

dependencies {
 compile 'com.jakewharton:butterknife:6.0.0'
}

For that, there is a really useful tutorial for importing a library project in our Android Studio project. Moreover, in this tutorial, it's using this PagerSlidingTabStrip library as example! (perfect!)

How do I add a library project to Android Studio?

After that, we only have to open PagerSlidingTabStrip.java file and go to 'onDraw' function.

We have to change this line:

canvas.drawRect(lineLeft, height - indicatorHeight, lineRight, height, rectPaint);

For this one:

canvas.drawRect(lineLeft, 0, lineRight, indicatorHeight , rectPaint);

And it's done!

On the other hand, if you are interested in modify this library, maybe you will find useful this modification too (maybe included in the future in the master branch of library):

https://github.com/astuetz/PagerSlidingTabStrip/pull/62/files?short_path=04c6e90

I hope this will be useful to someone :)

PagerSlidingTabStrip selected tab line at top

1 Answers1