How to create individual background for PagerSlidingTabStrip?

Question

I am using PagerSlidingTabStrip and I am trying to make some custom view for it. How can I achieve the rounded selected state background like below in the screenshot?

Answer 1

First of all, create a selector xml(custom_background.xml) file as below:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/some_ripple" android:state_pressed="true" />
    <item android:drawable="@drawable/some_ripple" android:state_focused="true" />
    <item android:drawable="@android:color/transparent" />
</selector>

The same then can be applied to your PagerSlidingTabStrip view in your layout xml file

<com.astuetz.PagerSlidingTabStrip
        android:id="@+id/channel_tabs"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:layout_gravity="top"
        android:background="@color/theme_color"
        android:textColor="@color/text_color_near_black"
        app:pstsDividerColor="#00000000"
        app:pstsIndicatorColor="@color/highlight_color"
        app:pstsIndicatorHeight="4dp"
        app:pstsShouldExpand="true"
        app:pstsTabBackground="@drawable/custom_background" />

Hope this solved your problem. If you face any issues, do ask again.