In this article, we will see how to develop an Android application containing swipable navigation tabs.
In order to enable swiping between tabs, we are making use ViewPager in this application.
This application is developed in Eclipse ( 4.2.0 ) with Android SDK ( 22.0.5 ) and ADT plugin ( 22.0.5 ) .
1. Create new Android application project namely “ActionBarCompatNavTabSwipe”
Figure 1 : Create new Android application project
2. Configure the application
Figure 2 : Configure the application project
3. Design application launcher icon
Figure 3 : Design application launcher icon
4. Create a blank activity
Figure 4 : Create a blank activity
5. Enter MainActivity Details
Figure 5 : Enter MainActivity details
6. Update the file res/values/strings.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">ActionBarCompatNavTabSwipe</string>
<string name="action_settings">Settings</string>
<string name="hello_world">Hello world!</string>
<string name="fragment1">Fragment1</string>
<string name="fragment2">Fragment2</string>
</resources>
7. Create a layout file for Fragment1 in the file res/layout/fragment1.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" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="@string/fragment1" />
</RelativeLayout>
8. Create a layout file for Fragment2 in the file res/layout/fragment2.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" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="@string/fragment2" />
</RelativeLayout>
9. Update the layout file res/layout/activity_main.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<android.support.v4.view.ViewPager
android:id="@+id/pager"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>
10. Create a class Fragment1 in the file src/in/wptrafficanalyzer/actionbarcompatnavtabswipe/Fragment1.java
package in.wptrafficanalyzer.actionbarcompatnavtabswipe;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuInflater;
import android.view.View;
import android.view.ViewGroup;
public class Fragment1 extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
return inflater.inflate(R.layout.fragment1, null);
}
}
11. Create a class Fragment2 in the file src/in/wptrafficanalyzer/actionbarcompatnavtabswipe/Fragment2.java
package in.wptrafficanalyzer.actionbarcompatnavtabswipe;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuInflater;
import android.view.View;
import android.view.ViewGroup;
public class Fragment2 extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
return inflater.inflate(R.layout.fragment2, null);
}
}
12. Create a class MyFragmentPagerAdapter in the file src/in/wptrafficanalyzer/actionbarcompatnavtabswipe/MyFragmentPagerAdapter.java
package in.wptrafficanalyzer.actionbarcompatnavtabswipe;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
public class MyFragmentPagerAdapter extends FragmentPagerAdapter{
final int PAGE_COUNT = 2;
/** Constructor of the class */
public MyFragmentPagerAdapter(FragmentManager fm) {
super(fm);
}
/** This method will be invoked when a page is requested to create */
@Override
public Fragment getItem(int arg0) {
Bundle data = new Bundle();
switch(arg0){
/** tab1 is selected */
case 0:
Fragment1 fragment1 = new Fragment1();
return fragment1;
/** tab2 is selected */
case 1:
Fragment2 fragment2 = new Fragment2();
return fragment2;
}
return null;
}
/** Returns the number of pages */
@Override
public int getCount() {
return PAGE_COUNT;
}
}
13. Update the class MainActivity in the file src/in/wptrafficanalyzer/actionbarcompatnavtabswipe/MainActivity.java
package in.wptrafficanalyzer.actionbarcompatnavtabswipe;
import android.os.Bundle;
import android.support.v4.app.FragmentManager;
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 {
private ViewPager mPager;
ActionBar mActionbar;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
/** Getting a reference to action bar of this activity */
mActionbar = getSupportActionBar();
/** Set tab navigation mode */
mActionbar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
/** Getting a reference to ViewPager from the layout */
mPager = (ViewPager) findViewById(R.id.pager);
/** Getting a reference to FragmentManager */
FragmentManager fm = getSupportFragmentManager();
/** Defining a listener for pageChange */
ViewPager.SimpleOnPageChangeListener pageChangeListener = new ViewPager.SimpleOnPageChangeListener(){
@Override
public void onPageSelected(int position) {
super.onPageSelected(position);
mActionbar.setSelectedNavigationItem(position);
}
};
/** Setting the pageChange listener to the viewPager */
mPager.setOnPageChangeListener(pageChangeListener);
/** Creating an instance of FragmentPagerAdapter */
MyFragmentPagerAdapter fragmentPagerAdapter = new MyFragmentPagerAdapter(fm);
/** Setting the FragmentPagerAdapter object to the viewPager object */
mPager.setAdapter(fragmentPagerAdapter);
mActionbar.setDisplayShowTitleEnabled(true);
/** Defining tab listener */
ActionBar.TabListener tabListener = new ActionBar.TabListener() {
@Override
public void onTabUnselected(Tab tab, FragmentTransaction ft) {
}
@Override
public void onTabSelected(Tab tab, FragmentTransaction ft) {
mPager.setCurrentItem(tab.getPosition());
}
@Override
public void onTabReselected(Tab tab, FragmentTransaction ft) {
}
};
/** Creating fragment1 Tab */
Tab tab = mActionbar.newTab()
.setText("Tab1")
.setTabListener(tabListener);
mActionbar.addTab(tab);
/** Creating fragment2 Tab */
tab = mActionbar.newTab()
.setText("Tab2")
.setTabListener(tabListener);
mActionbar.addTab(tab);
}
}
14. Update the configuration file AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="in.wptrafficanalyzer.actionbarcompatnavtabswipe"
android:versionCode="1"
android:versionName="1.0" >
<uses-sdk
android:minSdkVersion="8"
android:targetSdkVersion="17" />
<application
android:allowBackup="true"
android:icon="@drawable/ic_launcher"
android:label="@string/app_name"
android:theme="@style/Theme.AppCompat" >
<activity
android:name="in.wptrafficanalyzer.actionbarcompatnavtabswipe.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>
15. Screenshot of the application
Figure 6 : Screenshot of the application
16. Download Source Code
I am George Mathew, working as software architect and Android app developer at wptrafficanalyzer.in
You can hire me on hourly basis or on project basis for Android applications development.
For hiring me, please mail your requirements to info@wptrafficanalyzer.in.
My other blogs
store4js.blogspot.com
