Sliding Tab Bottom Example

This Android tutorial is to help create bottom tab layout with swipe views in an Android application. Swipe views in a bottom tab layout are for convenience for the user. Swipe adds a real world feel to the tabs. In a previous tutorial we saw about creating a bottom tab layout in an Android application. In an another tutorial we saw about creating swipe views in Android. Now all we are going to do is combine the both and create a simple app that has tabs and swipe able views.

1. MainActivity.java

package com.tutorialsee;

import com.tutorialsee.R;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.Window;
import android.widget.TabHost;
import android.widget.TabHost.OnTabChangeListener;

public class MainActivity extends FragmentActivity implements OnTabChangeListener, OnPageChangeListener {

private TabsPagerAdapter mAdapter;
private ViewPager mViewPager;
private TabHost mTabHost;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
mViewPager = (ViewPager) findViewById(R.id.viewpager);

// Tab Initialization
initialiseTabHost();
mAdapter = new TabsPagerAdapter(getSupportFragmentManager());
// Fragments and ViewPager Initialization

mViewPager.setAdapter(mAdapter);
mViewPager.setOnPageChangeListener(MainActivity.this);
}

// Method to add a TabHost
private static void AddTab(MainActivity activity, TabHost tabHost, TabHost.TabSpec tabSpec) {
tabSpec.setContent(new MyTabFactory(activity));
tabHost.addTab(tabSpec);
}

// Manages the Tab changes, synchronizing it with Pages
public void onTabChanged(String tag) {
int pos = this.mTabHost.getCurrentTab();
this.mViewPager.setCurrentItem(pos);
}

@Override
public void onPageScrollStateChanged(int arg0) {
}

// Manages the Page changes, synchronizing it with Tabs
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
int pos = this.mViewPager.getCurrentItem();
this.mTabHost.setCurrentTab(pos);
}

@Override
public void onPageSelected(int arg0) {
}


// Tabs Creation
private void initialiseTabHost() {
mTabHost = (TabHost) findViewById(android.R.id.tabhost);
mTabHost.setup();

// TODO Put here your Tabs
MainActivity.AddTab(this, this.mTabHost, this.mTabHost.newTabSpec("ButtonTab").setIndicator("ButtonTab"));
MainActivity.AddTab(this, this.mTabHost, this.mTabHost.newTabSpec("ImageTab").setIndicator("ImageTab"));
MainActivity.AddTab(this, this.mTabHost, this.mTabHost.newTabSpec("TextTab").setIndicator("TextTab"));

mTabHost.setOnTabChangedListener(this);
}
}

2. TabsPagerAdapter.java

package com.tutorialsee;

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

public class TabsPagerAdapter extends FragmentPagerAdapter {

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

@Override
public Fragment getItem(int index) {

switch (index) {
case 0:
// Top Rated fragment activity
return new ButtonFragment();

case 1:
// Games fragment activity
return new ImageFragment();
case 2:
// Movies fragment activity
return new TextFragment();
case 3:
// Top Rated fragment activity
return new RadioFragment();
case 4:
// Games fragment activity
return new EditFragment();
}

return null;
}

@Override
public int getCount() {
// get item count - equal to number of tabs
return 5;
}
}