After using uiautomatorviewer, you can see that the base components were ImageButtons inside the HorizontalScrollView for the left side and LinearLayout with the ImageButton for the right side. However, this does not detail how to achieve sliding animation or how to clearly see the two functional parts.
I managed to recreate it using this fantastic library and massage the performances a bit. Basically, you feed the pager sliding tab (PSTS) to the action bar as a custom view.
//I call this in the onCreate()of my activity void setupActionBar() { ActionBar actionBar = getActionBar(); View vwActionBar = View.inflate(this, R.layout.action_bar_main, null); tabs = (PagerSlidingTabStrip) vwActionBar.findViewById(R.id.tabs); actionBar.setCustomView(vwActionBar); actionBar.setDisplayShowCustomEnabled(true); actionBar.setDisplayShowTitleEnabled(false); actionBar.setDisplayShowHomeEnabled(false); }
If action_bar_main.xml is
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="match_parent"> <com.astuetz.PagerSlidingTabStrip android:id="@+id/tabs" android:layout_width="wrap_content" android:layout_height="?android:attr/actionBarSize" android:layout_alignParentBottom="true" /> </RelativeLayout>
You also need to change the way you install the FragmentPagerAdapter PSTS. The sample libraries contain a good example of how to do this, but here's mine.
public class MyPagerAdapter extends FragmentPagerAdapter implements PagerSlidingTabStrip.IconTabProvider { private final int[] ICONS = { R.drawable.ic_home, R.drawable.ic_dashboard, R.drawable.ic_insights, R.drawable.ic_stream }; public MyPagerAdapter(FragmentManager fm) { super(fm); } @Override public int getCount() { return ICONS.length; } @Override public android.support.v4.app.Fragment getItem(int position) { return fragments.get(position); } @Override public int getPageIconResId(int i) { return ICONS[i]; } }