How to implement android TabLayout libarary design support with Swipe view

A bit late to the party, but for this you need to use a class ViewPager

and use fragments for each view (under the tab). then attach ViewPager

to your copy TabLayout

and bingo! you have your sciping tabLayout.

Here is my working code with two tabs:

MyActivity.java:

super.onCreate(savedInstanceState);
setContentView(R.layout.main_layout);
// Initializing tab and pager views
TabLayout tabLayout = (TabLayout) findViewById(R.id.my_tab_layout);
final ViewPager viewPager = (ViewPager) findViewById(R.id.my_view_pager);

// Making new tabs and adding to tabLayout
tabLayout.addTab(tabLayout.newTab().setText("First Tab"));
tabLayout.addTab(tabLayout.newTab().setText("Second Tab"));

// Adding fragments to a list
List<Fragment> fragments = new Vector<Fragment>();
fragments.add(Fragment.instantiate(this, MyFirstTabFragment.class.getName()));
fragments.add(Fragment.instantiate(this, MySecondTabFragment.class.getName()));

// Attaching fragments into tabLayout with ViewPager
viewPager.setAdapter(new SectionPagerAdapter(getSupportFragmentManager(), fragments));
tabLayout.setupWithViewPager(viewPager);

      

        
        
        
      

    

SectionPagerAdapter.java

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

import java.util.List;


public class SectionPagerAdapter extends FragmentPagerAdapter {
    private List<Fragment> fragments;

    public SectionPagerAdapter(FragmentManager fm, List<Fragment> fragments) {
        super(fm);
        this.fragments = fragments;
    }

    @Override
    public Fragment getItem(int position) {
        return this.fragments.get(position);
    }

    @Override
    public int getCount() {
        return this.fragments.size();
    }

    @Override
    public CharSequence getPageTitle(int position) {
        switch (position) {
            case 0:
                return "First Tab";
            case 1:
            default:
                return "Second Tab";
        }
    }
}

      

        
        
        
      

    

MyFirstTabFragment.java:

public class MyFirstTabFragment extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        // Declare your first fragment here
        return inflater.inflate(R.layout.my_first_fragment_layout, container, false);
    }
}

      

        
        
        
      

    

MySecondTabFragment.java:

public class MySecondTabFragment extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        // Declare your second fragment here
        return inflater.inflate(R.layout.my_second_fragment_layout, container, false);
    }
}

      

        
        
        
      

    

main_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="fill_parent"
              android:layout_height="fill_parent">

    <!-- Declare android.support.v7.widget.Toolbar or... here -->

    <android.support.design.widget.TabLayout
            android:id="@+id/my_tab_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>
    <android.support.v4.view.ViewPager
            android:id="@+id/my_view_pager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_below="@id/my_tab_layout"/>
</RelativeLayout>

      

        
        
        
      

    

my_first_fragment_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
          android:layout_width="fill_parent"
          android:layout_height="fill_parent">
    <!-- Declare first tab layout here -->
</RelativeLayout>

      

        
        
        
      

    

my_second_fragment_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
          android:layout_width="fill_parent"
          android:layout_height="fill_parent">
    <!-- Declare second tab layout here -->
</RelativeLayout>

      

        
        
        
      

    

NOTE: Here we use the ViewPager

, Fragment

, FragmentManager

and FragmentPagerAdapter

from v4 support libraries.

Hope it helps.