Fragments on ViewPager

Note: This writing is about on using fragments inside ViewPager and TabLayouts.

*İlgili yazıya Türkçe olarak linkten erişebilirsiniz.

While using ViewPager, we can use different structures for title-content relation which are Actionbar, TabLyout, PagerTabStrip, PagerTitleStrip.

For PagerTabStrip and PagerTitleStrip, there is a reported bug for Android 23.0.0. I does not seen the title at first. Anyway, if you want to use any of them, this writing is very qualified and understandable.

You can add TabLoyout and ViewPager to your layout file as below.

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">
    <android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
    <ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"></ViewPager>
</LinearLayout>

To able to use Fragments on ViewPager, there is FragmentPagerAdapter which is on support lib. You can implement them in your Activity as below.

TabLayout tabLayout = (TabLayout)findViewById(R.id.tabLayout);
 ViewPager viewPager = (ViewPager)findViewById(R.id.viewPager);
 viewPager.setAdapter(new CustomFragmentPagerAdapter(getSupportFragmentManager()));
 viewPager.setCurrentItem(2);
 tabLayout.setupWithViewPager(viewPager);
 tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
     @Override
     public void onTabSelected(TabLayout.Tab tab) {
         // TODO : Something
     }
     @Override
     public void onTabUnselected(TabLayout.Tab tab) {
     }
     @Override
     public void onTabReselected(TabLayout.Tab tab) {
     }
 });
viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
    }
    @Override
    public void onPageSelected(int position) {
        // TODO : Something
    }
    @Override
    public void onPageScrollStateChanged(int state) {
    }
});
private class CustomFragmentPagerAdapter extends FragmentPagerAdapter{
    Fragment1 fragment1;
    Fragment2 fragment2;
    Fragment3 fragment3;
    public  CustomFragmentPagerAdapter(android.support.v4.app.FragmentManager fm){
        super(fm);
    }
    @Override
    public Fragment getItem(int position) {
        if(position == 0){
            if(fragment1 == null){
                fragment1 = Fragment1.getInstance();
            }
            return  fragment1;
        }else if(position == 1){
            if(fragment2 == null){
                fragment2 = Fragment2.getInstance();
            }
            return fragment2;
        }else if(position == 2){
            if(fragment3 == null){
                fragment3 = Fragment3.getInstance();
            }
            return fragment3;
        }else{
            return null;
        }
    }
    @Override
    public CharSequence getPageTitle(int position) {
        return "Title - " + String.valueOf(position);
    }
    @Override
    public int getCount() {
        return 3;
    }
}

The important point here is that you see only one fragment on the page but actually, the next and previous fragments has been created at the same time, too. If there is case that you have to update after a service call or something like this, you should create the fragments empty at first. And maybe you can add a method to your fragment that you can reach after tab selection or page scroll.

On the other hand, even the fragments stays as instance, at backend, when you scroll to another fragment or you can touch to another tab, it is being destroyed. At this case, it means when you scroll again same fragment, its layout will be reload again. If you need to do anything different, you should use onViewCreated method which is called after layout inflated.

You can download the sample code from this address. Good luck :)