Android Swipe View with Tab Layout

In my previous post “Android Tab Layout”, I showed you how to use TabHost to display a Tab layout. Unfortunately, TabHost is deprecated by android in favor of fragments.

Instead of using TabHost, you can create the Android Swipe View with Tab Layout. With Swipe View, user can navigate between sibling screens with a horizontal finger gesture.

This post will show you how to create a tab layout with swipe views for switching between tabs.

A - Layout Overview of Android Swipe View with Tab Layout demo

As you can see in the picture below, Tab is a part of ActionBar. The main layout is a ViewPager and in each individual pager views, we use Fragment.

B - Create new project

Firstly, create a new project. Remember to choose the Theme’s value is Holo Light with Dark Action Bar.

Cause we’re going to use Fragment and ActionBar Tab, extend MainActivity from FragmentActivity and implement this class from the TabListener too.

When implement the TabListener, you have to add some parents methods: onTabReselected, onTabSelected and onTabUnselected.

public class MainActivity extends FragmentActivity implements TabListener {

    @Override 
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState); 
        setContentView(R.layout.activity_main); 
    } 

    @Override 
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present. 
        getMenuInflater().inflate(R.menu.main, menu); 
        return true; 
    } 

    @Override 
    public void onTabReselected(Tab tab, FragmentTransaction ft) {
        // TODO Auto-generated method stub 

    } 

    @Override 
    public void onTabSelected(Tab tab, FragmentTransaction ft) {
        // TODO Auto-generated method stub 

    } 

    @Override 
    public void onTabUnselected(Tab tab, FragmentTransaction ft) {
        // TODO Auto-generated method stub 

    } 

}

C - Implement Swipe View

Add the ViewPager control into main layout:

<?xml version="1.0" encoding="utf-8"?> 
<android.support.v4.view.ViewPager 
        xmlns:android="http://schemas.android.com/apk/res/android" 
        android:id="@+id/view_pager" 
        android:layout_width="match_parent" 
        android:layout_height="match_parent" > 

</android.support.v4.view.ViewPager>

To bind child views that represent each page, you have to assign a PagerAdapter to this ViewPager.

There’re 2 type of adapter you can use:

• FragmentPageAdapter: best choice for a fixed, small number of pages
• FragmentStatePagerAdapter: used for undetermined number of pages, minimize memory usage

In this case, I choose FragmentPageAdapter.

Create PagerViewAdapter class that extends from FragmentPageAdapter. 

Implement derived methods:

• getItem(): return the Fragment that associates with current tab
• getCount(): return the total tabs

public class PagerViewAdapter extends FragmentPagerAdapter {

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

    @Override 
    public Fragment getItem(int index) {
        switch (index) { 
        case 0: 
            return new FirstTabFragment();
        case 1: 
            return new SecondTabFragment();
        case 2: 
            return new ThirdTabFragment();
        default: 
            return new FirstTabFragment();
        } 
    } 

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

}

D - Create Fragments for each ViewPager item

Create 3 fragments for 3 tabs. Each fragment contains a TextView that describes content of current tab. I only show the layout and code of the FirstTabFragment. Two remained is almost the same, you can look at it in the source code (download link is at the end of this post).

Note: You need to be carefull with automatic imports.   Eclipse automaticly imported android.app.Fragment for me, while you need to have android.support.v4.app.Fragment if you don’t want to get errors in the getItem method in your adapter.

Layout - first_tab_fragment.xml:

<?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="#CCCC00"> 

    <TextView 
        android:id="@+id/textView1" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:text="First Tab Content" 
        android:layout_centerHorizontal="true" 
        android:layout_centerVertical="true" 
        android:textAppearance="?android:attr/textAppearanceMedium" /> 

</RelativeLayout>

  Code - FirstTabFragment.java:

public class FirstTabFragment extends Fragment {

    @Override 
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {         
        View view = inflater.inflate(R.layout.first_tab_fragment, container, false);        
        return view; 
    } 
}

E - Add Tabs to ActionBar

To add Tabs to ActionBar, you must enable NAVIGATION_MODE_TABS in MainActivity first:

final ActionBar actionBar = getActionBar(); 
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);

  Then, add tabs to ActionBar:

@Override 
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState); 
    setContentView(R.layout.activity_main); 

    final ActionBar actionBar = getActionBar(); 
    actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS); 

    // Add tabs to ActionBar and set tab title     
    for (int i = 0; i < 3; i++) {
        actionBar.addTab(actionBar.newTab().setText("Tab " + (i + 1)).setTabListener(this)); 
    } 
}

  Next, create a ViewPagerAdapter instance and assign it to the ViewPager:

ViewPager viewPager = (ViewPager)findViewById(R.id.view_pager); 
PagerViewAdapter adapter = new PagerViewAdapter(getSupportFragmentManager());
viewPager.setAdapter(adapter);

  Finally, implement onTabSelected method to set the appropriate view base on tab index:

@Override 
public void onTabSelected(Tab tab, FragmentTransaction ft) {
    viewPager.setCurrentItem(tab.getPosition()); 
}

  Run project and enjoy the result

F - Download source code

https://drive.google.com/file/d/0Bw3dwdSezn6fRlBvWHQ2TFlYcUE/edit?usp=sharing