Android ViewPagerTabStrip Fragments Tutorial

In this tutorial, you will learn how to create a PagerTabStrip in your Android application. PagerTabStrip is intended to be used as a child view of a ViewPager widget in your XML layout. PagerTabStrip is most often used with fragment, which is a convenient way to supply and manage the Lifecycle of each fragment. We will create a PagerTabStrip with custom titles and tabs and on flip left or right or tab click will show different fragments. So lets begin…

Create a new project in Eclipse File > New > Android Application Project. Fill in the details and name your project PagerTabStripTutorial.

Application Name : PagerTabStripTutorial

Project Name : PagerTabStripTutorial

Package Name : com.androidbegin.pagertabstriptutorial

Open your MainActivity.java and paste the following code.

MainActivity.java

package com.androidbegin.pagertabstriptutorial;

import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;

public class MainActivity extends FragmentActivity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		// Get the view from activity_main.xml
		setContentView(R.layout.activity_main);

		// Locate the viewpager in activity_main.xml
		ViewPager viewPager = (ViewPager) findViewById(R.id.pager);

		// Set the ViewPagerAdapter into ViewPager
		viewPager.setAdapter(new ViewPagerAdapter(getSupportFragmentManager()));
	}

}

In this activity, we have set the location and the ViewPagerAdapter into the ViewPager. Then pass the support fragment manager into ViewPagerAdapter to manage the fragments.

Next, create an XML graphical layout for the MainActivity. Go to res > layout > Right Click on layout > New > Android XML File

Name your new XML file activity_main.xml and paste the following code.

activity_main.xml




    

Next, create the first fragment tab. Go to File > New > Class and name it FragmentTab1.java. Select your package named com.androidbegin.pagertabstriptutorial and click Finish.

Open your FragmentTab1.java and paste the following code.

package com.androidbegin.pagertabstriptutorial;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class FragmentTab1 extends Fragment {

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		// Get the view from fragmenttab1.xml
		View view = inflater.inflate(R.layout.fragmenttab1, container, false);
		return view;
	}

}

Next, create the second fragment tab. Go to File > New > Class and name it FragmentTab2.java. Select your package named com.androidbegin.pagertabstriptutorial and click Finish.

Open your FragmentTab2.java and paste the following code.

FragmentTab2.java

package com.androidbegin.pagertabstriptutorial;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class FragmentTab2 extends Fragment {

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		// Get the view from fragmenttab2.xml
		View view = inflater.inflate(R.layout.fragmenttab2, container, false);
		return view;
	}

}

Next, create the third fragment tab. Go to File > New > Class and name it FragmentTab3.java. Select your package named com.androidbegin.pagertabstriptutorial and click Finish.

Open your FragmentTab3.java and paste the following code.

FragmentTab3.java

package com.androidbegin.pagertabstriptutorial;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class FragmentTab3 extends Fragment {

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		// Get the view from fragmenttab3.xml
		View view = inflater.inflate(R.layout.fragmenttab3, container, false);
		return view;
	}

}

Next, create a ViewPager Adapter class. Go to File > New > Class and name it ViewPagerAdapter.java. Select your package named com.androidbegin.pagertabstriptutorial and click Finish.

Open your ViewPagerAdapter.java and paste the following code.

ViewPagerAdapter.java

package com.androidbegin.pagertabstriptutorial;

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

public class ViewPagerAdapter extends FragmentPagerAdapter {

	final int PAGE_COUNT = 3;
	// Tab Titles
	private String tabtitles[] = new String[] { "Tab1", "Tab2", "Tab3" };
	Context context;

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

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

	@Override
	public Fragment getItem(int position) {
		switch (position) {

			// Open FragmentTab1.java
		case 0:
			FragmentTab1 fragmenttab1 = new FragmentTab1();
			return fragmenttab1;

			// Open FragmentTab2.java
		case 1:
			FragmentTab2 fragmenttab2 = new FragmentTab2();
			return fragmenttab2;

			// Open FragmentTab3.java
		case 2:
			FragmentTab3 fragmenttab3 = new FragmentTab3();
			return fragmenttab3;
		}
		return null;
	}

	@Override
	public CharSequence getPageTitle(int position) {
		return tabtitles[position];
	}
}

In this ViewPagerAdapter class, we have declared the number of ViewPager pages and on tab switch or flip will show different fragments.

Next, create an XML graphical layout for first fragment tab. Go to res > layout > Right Click on layout > New > Android XML File

Name your new XML file fragmenttab1.xml and paste the following code.

fragmenttab1.xml



    

Next, create an XML graphical layout for second fragment tab. Go to res > layout > Right Click on layout > New > Android XML File

Name your new XML file fragmenttab2.xml and paste the following code.

fragmenttab2.xml



    

Next, create an XML graphical layout for third fragment tab. Go to res > layout > Right Click on layout > New > Android XML File

Name your new XML file fragmenttab3.xml and paste the following code.

fragmenttab3.xml



    

Change the application name and fragment textview texts in strings.xml. Open your strings.xml and paste the following code. Go to res > values > strings.xml




    PagerTabStrip Tutorial
    Settings
    Hello world!
    This is Fragment 1
    This is Fragment 2
    This is Fragment 3

In your AndroidManifest.xml, no changes needed to be made

AndroidManifest.xml




    

    
        
            
                

                
            
        
    

Output:

PagerTabStrip ScreenShots

Source Code

[purchase_link id=”7991″ text=”Purchase to Download Source Code” style=”button” color=”green”]

Latest comments

How to change the font in header of view pager?

Ankit Arora

Android ViewPagerTabStrip Fragments Tutorial

how to change active and inactive tabstrip textview color??? i tried the following but it is not working fine, for(int i=0; i < title_strip.getChildCount()+1; i++){ View nextChild = title_strip.getChildAt(i); if (nextChild instanceof TextView) { if(position == i){ //Log.e("inside if ", String.valueOf(position)); TextView tv = (TextView) nextChild; tv.setTextColor(ContextCompat.getColor(getActivity(), R.color.selector_tv)); // tv.setTextColor(ContextCompat.getColor(getActivity(), R.color.black)); } else { //Log.e("inside else ", String.valueOf(position)); TextView tv = (TextView) nextChild; tv.setTextColor(ContextCompat.getColor(getActivity(), R.color.reverse_selector_tv)); } } Log.e("position = ", String.valueOf(position)); Log.e("Loop i = ", String.valueOf(i)); }

Aneesh Phenomtec

Android ViewPagerTabStrip Fragments Tutorial

Is it possible to click item tab and then it will show that fragment also?

Mohammad Rajob

Android ViewPagerTabStrip Fragments Tutorial

Very very helpful tutorial and made my day. Thanks once again for helping us dude :)

saeed rehman

Android ViewPagerTabStrip Fragments Tutorial