Android simple Tabs with Swipe Layout(ViewPager) Fragments Tutorial

By | September 5, 2015

Actionbar Tabs with ViewPager
In this tutorial we will see a simple example of android application having tabs with swiping screens. Previously we saw an example of just swiping views using ViewPager.

Now we will use ActionBar Tabs along with ViewPager in this tutorial.

Steps required for implementation:
1) Setting navigation mode of ActionBar to actionBar.NAVIGATION_MODE_TABS and adding tabs.
2) Adding onPageChangeListener on ViewPager to update tab selection when swiped on screen.
3) Adding TabListener to update ViewPager when a new tab is selected.

Just follow the tutorial on ViewPager and then simply modify the MainActivity.java to follow the above steps of implementation.

step-1)
Adding Tabs in ActionBar:

	final ActionBar actionBar = getSupportActionBar();
	actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
        for (int i = 0; i < mSamplePagerAdapter.getCount(); i++) {

			actionBar.addTab(actionBar.newTab()
					.setText(mSamplePagerAdapter.getPageTitle(i))
					.setTabListener(this));
		}
	

Add the above code in onCreate() method to add tabs in the ActionBar. mSamplePagerAdapter is an instance of SampleFragmentPagerAdapter class defined in ViewPager Tutorial.

Override getPageTitle() method in SampleFragmentPagerAdapter class to add titles for Tabs.

@Override
public CharSequence getPageTitle(int position) {
	if (position == 0) {
		return "One";	
	} else
		return "Two";

	}

Add onPageChangeListener in onCreate() to update Tabs selection on swiping the screen:

mViewPager.setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {
		@Override
		public void onPageSelected(int position) {
			actionBar.setSelectedNavigationItem(position);
		}
	});

Now implement the ActionBar.TabListener to your MainActivity.java and override onTabSelected() method to update ViewPager when tab is selected:

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

The final code for MainActivity.java will be as follows:

package com.tutorialsface.example.viewpager;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.app.FragmentTransaction;
import android.support.v4.view.ViewPager;
import android.support.v7.app.ActionBar;
import android.support.v7.app.ActionBar.Tab;
import android.support.v7.app.ActionBarActivity;

public class MainActivity extends ActionBarActivity implements
		ActionBar.TabListener {

	ViewPager mViewPager;
	SamplePagerAdapter mSamplePagerAdapter;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		final ActionBar actionBar = getSupportActionBar();
		actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
		mSamplePagerAdapter = new SamplePagerAdapter(
				getSupportFragmentManager());
		mViewPager = (ViewPager) findViewById(R.id.pager);
		mViewPager.setAdapter(mSamplePagerAdapter);
		mViewPager
				.setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {
					@Override
					public void onPageSelected(int position) {
						actionBar.setSelectedNavigationItem(position);
					}
				});
		for (int i = 0; i < mSamplePagerAdapter.getCount(); i++) {

			actionBar.addTab(actionBar.newTab()
					.setText(mSamplePagerAdapter.getPageTitle(i))
					.setTabListener(this));
		}

	}

	public class SamplePagerAdapter extends FragmentPagerAdapter {

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

		@Override
		public Fragment getItem(int position) {
			if (position == 0) {
				return new SampleFragment();
			} else
				return new SampleFragmentTwo();
		}

		@Override
		public int getCount() {
			// Show 2 total pages.
			return 2;
		}

		@Override
		public CharSequence getPageTitle(int position) {
			if (position == 0) {
				return "One";
			} else
				return "Two";

		}
	}

	@Override
	public void onTabReselected(Tab arg0, FragmentTransaction arg1) {

	}

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

	@Override
	public void onTabUnselected(Tab arg0, FragmentTransaction arg1) {
	}

}

Now run the application.
The Screenshot for the app:
Actionbar Tabs with ViewPager

Tab with ViewPager

7,311 total views, 3 views today

(Visited 2,012 times, 1 visits today)