astuetz / PagerSlidingTabStrip

An interactive indicator to navigate between the different pages of a ViewPager
139 stars 44 forks source link

Adding Fragment or Activity to tabs #219

Open haleyngonadi opened 9 years ago

haleyngonadi commented 9 years ago

HI. I have just gotten this working, it is amazing. I'm wondering if I can show a new fragment or activity under a tab? Thanks!

theBlbDan commented 9 years ago

Absolutely. I use a FragmentStatePagerAdapter, which is pretty much a ViewPager, for one of my projects. Thus, each tab is a new fragment.

Bind my adapter to the tabs

MyPagerAdapter mViewPagerAdapter = new MyPagerAdapter(getChildFragmentManager());
mViewPager.setAdapter(mViewPagerAdapter);

// Bind the tabs to the ViewPager
PagerSlidingTabStrip tabs = (PagerSlidingTabStrip) v.findViewById(R.id.tabs);
tabs.setShouldExpand(true);
tabs.setViewPager(mViewPager);

A real primitive approach for the adapter, one new fragment per tab

    /*
     * Set up the ViewPager
     * There will be three unique fragments to invoke
     * Page 0:  tab1.java
     * Page 1:  tab2.java
     * Page 2:  tab3.java
     */
    public static class MyPagerAdapter extends FragmentStatePagerAdapter {

        public MyPagerAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int position) {
            Fragment fragment;

            switch(position) {
                case 2:
                    fragment = new tab1();
                    break;
                case 1:
                    fragment = new tab2();
                    break;
                case 0:
                default:
                    fragment = new tab3();
            };
            return fragment;
        }

        @Override
        public int getCount() {
            return 3;
        }

        @Override
        public CharSequence getPageTitle(int position) {
            return new String[] {
                    "tab1",
                    "tab2",
                    "tab3"
                }[position];
        }
    }
haleyngonadi commented 9 years ago

You're so amazing! That looks like it will work for sure. Let me try it out. Thank you so much.

haleyngonadi commented 9 years ago

Hey @theBlbDan, I'm using this in a fragment so I tried changing the code a bit but it just crashes.

   @Override
   public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

    View root = inflater.inflate(R.layout.fragment_videos, container, false);

    tabs = (PagerSlidingTabStrip) root.findViewById(R.id.tabs);
    pager = (ViewPager) root.findViewById(R.id.pager);
    adapter = new SampleFragmentPagerAdapter();

    pager.setAdapter(adapter);
    tabs.setViewPager(pager);

    return root;
}

   public class SampleFragmentPagerAdapter extends PagerAdapter {
    // private final String[] TITLES = { "Random", "Music Videos", "Live Performances", };

    public SampleFragmentPagerAdapter() {
        super();
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return new String[] {
                "tab1",
                "tab2",
                "tab3"
        }[position];
    }

   @Override
   public int getCount() {
       return 3;
   }

    @Override
    public Fragment getItem(int position) {
        // looks a little bit messy here
        Fragment fragment;

        switch(position) {
            case 2:
                fragment = new tab1();
                break;
            case 1:
                fragment = new tab2();
                break;
            case 0:
            default:
                fragment = new tab3();
        };
        return fragment;
    }

   @Override
   public boolean isViewFromObject(View v, Object o) {
       return v == ((View) o);
   }

}

Error:(82, 9) error: method does not override or implement a method from a supertype is the error from @Override public Fragment getItem(int position) {

theBlbDan commented 9 years ago

Read your documentation to make sure you're overriding the appropriate methods. You'll notice that I am using a FragmentStatePagerAdapter class, you are using a PagerAdapter.

alexdao commented 9 years ago

Hi theBlbDan, could you help me out? When I implement it the way you have, the tabs don't show up on my device. It just displays a blank page.

@Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { super.onCreate(savedInstanceState); View rootView = inflater.inflate(R.layout.fragment_candidatelist, container, false);

    tabs = (PagerSlidingTabStrip) rootView.findViewById(R.id.tabs);
    pager = (ViewPager) rootView.findViewById(R.id.pager);
    adapter = new MyPagerAdapter(getChildFragmentManager());
    pager.setAdapter(adapter);

    /**
    final int pageMargin = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 4, getResources()
            .getDisplayMetrics());
    pager.setPageMargin(pageMargin);*/

    tabs.setShouldExpand(true);
    tabs.setViewPager(pager);

    /**Toast.makeText(getActivity().getApplicationContext(), "Your toast message.",
            Toast.LENGTH_SHORT).show();*/

    // Inflate the layout for this fragment
    return inflater.inflate(R.layout.fragment_candidatelist, container, false);
}

public static class MyPagerAdapter extends FragmentStatePagerAdapter {

    public MyPagerAdapter(FragmentManager fm) {
        super(fm);
    }

    @Override
    public Fragment getItem(int position) {
        Fragment fragment;
        switch(position) {
            case 2:
                fragment = new DemocratFragment();
                break;
            case 1:
                fragment = new IndependentFragment();
                break;
            case 0:
            default:
                fragment = new RepublicanFragment();
        };
        return fragment;
    }

    @Override
    public int getCount() {
        return 3;
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return new String[] {
                "Democrat",
                "Republican",
                "Independent"
        }[position];
    }
}
ajans commented 9 years ago

Hi @alexdao You are getting a blank page, because in your onCreateView, you are undoing the viewpager-binding by the following statement, thus inflating the layout anew and returning it to the fragment-manager:

return inflater.inflate(R.layout.fragment_candidatelist, container, false);

So replace it with

return rootView;
nitindec06 commented 9 years ago

Hello can any one help me i m using FragmentStatePagerAdapter class in for swipe when I am coming back to the tabs from next fragment by pressing back button all the tabs are empty and sliding of viewpager is gone