Tabs with swipe effect on Android

Posted By : Ravi Sharma | 20-Nov-2013

android

Tabs with swipe effect on Android

Tabs are a very common UI in android and to write maintainable code one must use fragments instead of activity.

To bring that wow factor these tabs should be swipeable as well.

But there are few problems to make such an app for all android versions i.e. 2.1 and above.

This blog solves that problem by not only making fragments run on android 2.1 but also run the viewpager on 2.1 OS.

We will be using TabHost, here is the xml file

	<TabHost

	android:id="@android:id/tabhost"

	android:layout_width="fill_parent"

	android:layout_height="wrap_content" >

	

	        <LinearLayout

	            android:layout_width="fill_parent"

	            android:layout_height="wrap_content"

	            android:orientation="vertical" >

	

	            <TabWidget

	                android:id="@android:id/tabs"

	                android:layout_width="fill_parent"

	                android:layout_height="wrap_content"

	                android:layout_weight="0"

	                android:orientation="horizontal" />

	

	            <FrameLayout

	                android:id="@android:id/tabcontent"

	                android:layout_width="0dp"

	                android:layout_height="0dp"

	                android:layout_weight="0" />

	

	            <android.support.v4.view.ViewPager

	                android:id="@+id/viewpager"

	                android:layout_width="fill_parent"

	                android:layout_height="wrap_content"

	                android:layout_gravity="bottom" />

	        </LinearLayout>

	    </TabHost>

	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);

	        setContentView(R.layout.activity_main);

	

	        mViewPager = (ViewPager) findViewById(R.id.viewpager);

	

	        // Tab Initialization

	        initialiseTabHost();

	        mAdapter = new TabsPagerAdapter(getSupportFragmentManager());             

	        

	        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);

	    }

	}

Here we add tabs to this activity. In order to use viewpager, fragments on android 2.1 use support library and extend FragmentActivity. We have used Adapter class which extends FragmentPagerAdapter where the adapter provides fragment views to tabs.

	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();

	        }

	

	        return null;

	    }

	

	    @Override

	    public int getCount() {

	        // get item count - equal to number of tabs

	        return 3;

	    }

For each tab view we use seperate fragments.

	import android.os.Bundle;

	import android.support.v4.app.Fragment;

	import android.view.LayoutInflater;

	import android.view.View;

	import android.view.ViewGroup;

	import android.widget.TextView;

	

	public class ImageFragment extends Fragment {

	

	@Override

        public View onCreateView(LayoutInflater inflater, ViewGroup container,

	Bundle savedInstanceState) {

	

	View rootView = inflater.inflate(R.layout.fragment_image, container, false);

	return rootView;

	}

	}

Here is the output -