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.

Libretto

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

Sixtyfourmo

Thank you for this awesome guide.But I have a problem this problem in eclipse: Attribute is missing the Android namespace prefix for this line:tools:context=".MainActivity" How can I fix this ? – Above

it is not important delete tools:context :-) – Sixtyfourmo

Okay,I have one more question can you try use framelayout instead of relativelayout ? Because I have to use framelayout. – Above

But we can't use android:layout_below="@+id/tabs" in framelayout – Above

yes because each ViewGroup has its own policy to align their children in it, for example LinearLayout has orientation and RelativeLayout dose not, ListView dose not have anything, TableView has something else, you must see how that ViewGroup align its children, look at the doc. – Sixtyfourmo

Thank you,last question.pager.setVisibility(View.GONE); This is returning nullpointer exception.Do you know why ? I have to hide viewpager sometimes. – Above

No, I have to see your code and logcat ask it, I or others diffidently will help you. – Sixtyfourmo

Hi, I m getting PagerSlidingTabStrip cannot resolved symbole. which class i have to extend? – Bosky

+1 This post really helped me with the implementation of the pagersliding app. I was struggling for a bit. Now everything is working fine. – Phenylalanine

Can you please tell me how I can set a custom View here in place of title? I just want to replace text with text + icon. I had done it in my project but without using this lib. Now I need to use it. – Fromm

@AnshulTyagi sorry right now I can not help you, if you are in hurry ask on SO may be others help. – Sixtyfourmo

duplicated return at return return (position == 0)? new FragmentA() : new FragmentB() ; – Mauser

@Sixtyfourmo This example works very fine for me. Can you just give me an example of setting this layout in another fragment instead of Activity. I just want to put the whole thing into another fragment named FragmentHome. And HomeFragment will be attached to a MainActivity. – Grosvenor

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

Homeo