PagerSlidingTabStrip implement guide

Question

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

I read the documents but I didn't understand anything.I have two fragments so I want to place two tabs to my app.Where do I put the viewpager xml ?

Where do I put the this code block:

// 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 main activity or all fragments and main activity ? (I have same question for viewpager xml) Can anyone explain to me how can I implement this to my app step by step ?

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

Answer 1

step by step

I just make it for two tabs as you asked!

0) Add the library to your build path

1) Create your two 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 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 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 (position == 0)? new FragmentA() : new FragmentB() ;
   }
}

3) Assign adapter to your viewpager and the viewpager to the PagerSlidingTabStrip at the 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 have tabs on the top and a ViewPager on 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 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 fragment section of tab content:

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;
}

Implement FragmentPagerAdapter

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

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];
}}

Setup Sliding Tabs

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

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

Set the ViewPager on the PagerSlidingTabStrip to connect the pager with the tabs.

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's 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

Good Luck