scrollable tabs custom user Interface

I am working on a Scrollable tabs and came to observe a custom scrollable tabe in a mediaplayer app but don't know what is used in this as per my knowledge it is like scrollable tabs.Any hint how to achieve this while changing from one fragment to another .I want to show a gape in the fragment while scrolling as in this app?THIS is what I created this is what i want a gape between two fragment

I tried to give padding in the view pager but it is not working at all. my layout content main .xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.view.ViewPager android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/pager"
android:background="@drawable/gradient2"
>
<android.support.v4.view.PagerTitleStrip
android:id="@+id/title"
style="@style/viewPagerTitleStrip"
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_gravity="top"
android:paddingTop="4dp"
android:paddingBottom="4dp"
android:background="@drawable/gradient1">

</android.support.v4.view.PagerTitleStrip>
</android.support.v4.view.ViewPager>

I tried both padding and margine in the ViewPager but it is not working

Here is the similar property used try this https://github.com/astuetz/PagerSlidingTabStrip

Since I am using ViewPager, the easiest way to achieve some space is to use the setPageMargin() method of Viewpager, which in my case will be

ViewPager pager = (ViewPager) findViewById(R.id.pager);
pager.setPageMargin(200);
//200 is value in pixel

There is also a method setPageMarginDrawable() sets a drawable that will be used to fill the margin between pages (Android documentation).