android - Sliding Tabs in Toolbar using Material Design -

i have been learning use sliding tabs using material design using this post. have managed achieve slidingtabs below toolbar, one:

but create actionbar/toolbar fragment tabs ...

i able recreate looking implement. using library tabs.

this view have created:

import library through dependencies or download project , import manually

compile 'com.jpardogo.materialtabstrip:library:1.0.9' 

styles.xml

<resources>      <style name="apptheme" parent="theme.appcompat.light.noactionbar">         <item name="colorprimary">@color/primary</item>         <item name="colorprimarydark">@color/primary_dark</item>     </style> </resources> 

mainactivity & adapter

public class mainactivity extends actionbaractivity {     toolbar toolbar;     viewpager viewpager;     contactpageradapter pageradapter;     pagerslidingtabstrip pagerslidingtabstrip;      @override     protected void oncreate(bundle savedinstancestate) {         super.oncreate(savedinstancestate);         setcontentview(r.layout.activity_main);         toolbar = (toolbar) findviewbyid(r.id.toolbar);         toolbar.setlogo(r.mipmap.logo_two);         toolbar.inflatemenu(r.menu.menu_main);         viewpager = (viewpager) findviewbyid(r.id.pager);         pageradapter = new contactpageradapter(this, getsupportfragmentmanager());         pagerslidingtabstrip = (pagerslidingtabstrip) findviewbyid(r.id.tabs);         viewpager.setadapter(pageradapter);         pagerslidingtabstrip.setviewpager(viewpager);     }      public static class contactpageradapter extends fragmentpageradapter implements pagerslidingtabstrip.customtabprovider {          private final int[] icons = {r.mipmap.ic_launcher, r.mipmap.ic_launcher};         context mcontext;         private fragment f = null;          public contactpageradapter(context ctx, fragmentmanager fm) {             super(fm);             mcontext = ctx;         }          @override         public int getcount() {             return icons.length;         }          @override         public fragment getitem(int position) { // returns fragment based on position             switch (position) {                 case 0:                     f = new fragmentpageone();                     break;                 case 1:                     f = new fragmentpagetwo();                     break;             }             return f;         }          @override         public view getcustomtabview(viewgroup parent, int position) {             linearlayout customlayout = (linearlayout) layoutinflater.from(mcontext).inflate(r.layout.custom_tab, parent, false);             imageview imageview = (imageview) customlayout.findviewbyid(r.id.image);             imageview.setimageresource(icons[position]);             return customlayout;         }     } } 

activity_main.xml

<relativelayout     xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:app="http://schemas.android.com/apk/res-auto"     android:layout_width="match_parent"     android:layout_height="match_parent">      <android.support.v7.widget.toolbar         android:id="@+id/toolbar"         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:background="#02a6d8"         android:minheight="56dp"         app:theme="@style/themeoverlay.appcompat.dark.actionbar">          <com.astuetz.pagerslidingtabstrip             android:id="@+id/tabs"             android:layout_width="wrap_content"             android:layout_height="56dp"             android:layout_alignparentright="true"             android:layout_marginleft="8dp"             android:background="#02a6d8"             app:pstsdividercolor="#02a6d8"             app:pstsindicatorcolor="#fff"             app:pstsindicatorheight="2dp"             app:pstsshouldexpand="false"             app:pstsunderlineheight="0dp"/>     </android.support.v7.widget.toolbar>       <android.support.v4.view.viewpager         android:id="@+id/pager"         android:layout_width="match_parent"         android:layout_height="match_parent"         android:layout_below="@+id/toolbar"/>      <!-- shadow below toolbar-->     <linearlayout         android:layout_width="match_parent"         android:layout_height="5dp"         android:layout_below="@+id/toolbar"         android:background="@drawable/toolbar_shadow"/> </relativelayout> 

custom_tab.xml

<?xml version="1.0" encoding="utf-8"?> <linearlayout     xmlns:android="http://schemas.android.com/apk/res/android"     android:layout_width="30dp"     android:layout_height="wrap_content">      <imageview         android:id="@+id/image"         android:layout_width="30dp"         android:layout_height="wrap_content"         android:layout_gravity="center_vertical"         android:paddingbottom="8dp"         android:paddingtop="8dp"/> </linearlayout> 

drawrable toolbar_shadow.xml

<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android">     <gradient         android:angle="270"         android:endcolor="@android:color/transparent"         android:startcolor="@color/semi_transparent"/> </shape>