PagerSlidingTabStrip Implementation Guide

Question

I am trying to use this library in my application: https://github.com/astuetz/PagerSlidingTabStrip

I read the documents, but I didn’t understand anything. I have two snippets, so I want to place two tabs in my application. Where can I put the viewpager xml file?

Where I put this block of code:

// Initialize the ViewPager and set an adapter ViewPager pager = (ViewPager) findViewById(R.id.pager); pager.setAdapter(new TestAdapter(getSupportFragmentManager())); // Bind the tabs to the ViewPager PagerSlidingTabStrip tabs = (PagerSlidingTabStrip) findViewById(R.id.tabs); tabs.setViewPager(pager); 

Just the main activity or all fragments and main activity? (I have the same question for xml viewpager) Can someone explain to me how I can implement this for my application step by step?

Ps: https://github.com/astuetz/PagerSlidingTabStrip/tree/master/sample This is sample code.

Answer 1

step by step

I just do it for two tabs as you requested!

0) Add the library to the build path

1) Create two of your fragments

 public class FragmentA extends Fragment { @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { return inflater.inflate(R.layout.fragment_a,container,false); } } 

and

 public class FragmentB extends Fragment { @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { return inflater.inflate(R.layout.fragment_b,container,false); } } 

and their layouts, for example, can be:

 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#FFFF00"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textAppearance="?android:attr/textAppearanceLarge" android:text="This is Fragment A" android:id="@+id/textView" android:gravity="center" android:layout_alignParentTop="true" android:layout_alignParentLeft="true" android:layout_alignParentRight="true" android:layout_alignParentBottom="true" /> </RelativeLayout> 

2) Create a MainActivity layout:

 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" > <com.astuetz.PagerSlidingTabStrip android:id="@+id/tabs" android:layout_width="match_parent" android:layout_height="48dip" /> <android.support.v4.view.ViewPager android:id="@+id/pager" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_below="@+id/tabs" tools:context=".MainActivity" /> </RelativeLayout> 

3) Create your own viewpager adapter

 public class MyPagerAdapter extends FragmentPagerAdapter { public MyPagerAdapter(FragmentManager fm) { super(fm); } @Override public CharSequence getPageTitle(int position) { return (position == 0)? "Tab 1" : "Tab2" ; } @Override public int getCount() { return 2; } @Override public Fragment getItem(int position) { return return (position == 0)? new FragmentA() : new FragmentB() ; } } 

3) Assign an adapter to your viewpager and viewpager for PagerSlidingTabStrip in MainActivity

  @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ViewPager pager = (ViewPager) findViewById(R.id.pager); pager.setAdapter(new MyAdapter(getSupportFragmentManager())); // Bind the tabs to the ViewPager PagerSlidingTabStrip tabs = (PagerSlidingTabStrip) findViewById(R.id.tabs); tabs.setViewPager(pager); } 

4) Run

Answer 2

Your layout file will display tabs at the top and ViewPager at the bottom, as shown in the code snippet below:

 <com.astuetz.PagerSlidingTabStrip android:id="@+id/tabs" app:pstsShouldExpand="true" app:pstsTextAllCaps="true" android:layout_width="match_parent" android:layout_height="48dp"> </com.astuetz.PagerSlidingTabStrip> <android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@android:color/white" /> 

Create fragment

create a fragment [res / layout / fragment_page.xml] and copy and paste this code

 <TextView android:id="@+id/tvTitle" android:text="Fragment #X" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" /> 

In PageFragment.java, define the inflation logic for the fragmented section of the contents of the tab:

 public class PageFragment extends Fragment { private int mPage; public static final String ARG_PAGE = "ARG_PAGE"; public static PageFragment newInstance(int page) { Bundle args = new Bundle(); args.putInt(ARG_PAGE, page); PageFragment fragment = new PageFragment(); fragment.setArguments(args); return fragment; } @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); mPage = getArguments().getInt(ARG_PAGE); } // Inflate the fragment layout we defined above for this fragment // Set the associated text for the title @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View view = inflater.inflate(R.layout.fragment_page, container, false); TextView tvTitle = (TextView) view.findViewById(R.id.tvTitle); tvTitle.setText("Fragment #" + mPage); return view; } 

Deploy FragmentPagerAdapter

The next thing to do is implement an adapter for your ViewPager that controls the tab order.

 public class SampleFragmentPagerAdapter extends FragmentPagerAdapter{ final int PAGE_COUNT = 3; private String tabTitles[] = new String[] { "Tab1", "Tab2", "Tab3" }; public SampleFragmentPagerAdapter(FragmentManager fm) { super(fm); } @Override public int getCount() { return PAGE_COUNT; } @Override public Fragment getItem(int position) { return PageFragment.newInstance(position + 1); } @Override public CharSequence getPageTitle(int position) { // Generate title based on item position return tabTitles[position]; }} 

Setting Sliding Tabs

Finally, we need to attach our ViewPager to the SampleFragmentPagerAdapter, and then configure the sliding tabs using a two-step process:

In the onCreate () method of your activity, find the ViewPager and plug in the adapter.

Set ViewPager to PagerSlidingTabStrip to connect tabbed pager.

 public class MainActivity extends FragmentActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); // Get the ViewPager and set it PagerAdapter so that it can display items ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager); viewPager.setAdapter(new SampleFragmentPagerAdapter(getSupportFragmentManager())); // Give the PagerSlidingTabStrip the ViewPager PagerSlidingTabStrip tabsStrip = (PagerSlidingTabStrip) findViewById(R.id.tabs); // Attach the view pager to the tab strip tabsStrip.setViewPager(viewPager); }} 

And this is the result

for more information check out the following link

Luck