Hi All,
In this post I am going to explain all about swipe tabs in android with an awesome example. You all might have used facebook in your android phones right. In that you might have noticed a swipe tabs view layout for post page, notifications, etc... Likewise you can design your swipeable tabs in android which brings high user experience and ease to use and navigation and high technological one. Just have a glance on the source code examples below. Here in this example you can see a screen with two swipeable tabs songs and videos. Very easy to build swipe tabs in android and enjoy with the example below.
1. Android Manifest XML file
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.android.swipetabs"
android:versionCode="1"
android:versionName="1.0" >
<uses-sdk
android:minSdkVersion="7"
android:targetSdkVersion="17" />
<application
android:allowBackup="true"
android:icon="@drawable/ic_launcher"
android:label="@string/app_name"
android:theme="@style/AppTheme" >
<activity
android:name="com.android.swipetabs.MainActivity"
android:label="@string/app_name" >
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
2. Android main activity layout file xml
<android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v4.view.ViewPager>
3. Songs activity layout file 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:orientation="vertical">
<TextView android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="songs"
android:textSize="20dp"
android:layout_centerInParent="true"/>
</RelativeLayout>
4. Videos activity layout file 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:orientation="vertical">
<TextView android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="videos"
android:textSize="20dp"
android:layout_centerInParent="true"/>
</RelativeLayout>
5. MainActivity Java file
package com.android.swipetabs;
import com.android.swipetabs.adapter;
import com.android.swipetabs.R;
import android.app.ActionBar;
import android.app.ActionBar.Tab;
import android.app.FragmentTransaction;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;
public class MainActivity extends FragmentActivity implements
ActionBar.TabListener {
private ViewPager pager;
private adapter adapter;
private ActionBar action;
private String[] tabs = { "songs", "videos" };
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
pager = (ViewPager) findViewById(R.id.pager);
action = getActionBar();
adapter = new adapter(getSupportFragmentManager());
pager.setAdapter(adapter);
action.setHomeButtonEnabled(false);
action.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
for (String tab_name : tabs) {
action.addTab(action.newTab().setText(tab_name)
.setTabListener(this));
}
//on swipe tabs functionality
pager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageSelected(int position) {
action.setSelectedNavigationItem(position);
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
@Override
public void onPageScrollStateChanged(int arg0) {
}
});
}
@Override
public void onTabReselected(Tab tab, FragmentTransaction ft) {
}
@Override
public void onTabSelected(Tab tab, FragmentTransaction ft) {
// on tab selected
// show respected fragment view
pager.setCurrentItem(tab.getPosition());
}
@Override
public void onTabUnselected(Tab tab, FragmentTransaction ft) {
}
}
6. Adapter java file
package com.android.swipetabs;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
public class adapter extends FragmentPagerAdapter {
public adapter(FragmentManager fgmt) {
super(fgmt);
// TODO Auto-generated constructor stub
}
@Override
public Fragment getItem(int index) {
switch (index) {
case 0:
// Games fragment activity
return new songs();
case 1:
// Movies fragment activity
return new videos();
}
return null;
}
@Override
public int getCount() {
// get item count - equal to number of tabs
return 2;
}
}
7. songs java file
package com.android.swipetabs;
import com.android.swipetabs.R;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class songs extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View rootView = inflater.inflate(R.layout.songs, container, false);
return rootView;
}
}
8. Videos java file
package com.android.swipetabs;
import com.android.swipetabs.R;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class videos extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View rootView = inflater.inflate(R.layout.videos, container, false);
return rootView;
}
}