Swipable Navigation Tabs using ActionBarCompat library

August 29, 2013
By

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”

Create new Android application project

Figure 1 : Create new Android application project


2. Configure the application

Configure the application project

Figure 2 : Configure the application project


3. Design application launcher icon

Design application launcher icon

Figure 3 : Design application launcher icon


4. Create a blank activity

Create a blank activity

Figure 4 : Create a blank activity


5. Enter MainActivity Details

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

Screenshot of the application

Figure 6 : Screenshot of the application


16. Download Source Code


How to hire me?

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


Android Knowledge Quiz

Ready to test your knowledge in Android? Take this quiz :



3 Responses to Swipable Navigation Tabs using ActionBarCompat library

  1. Nicky Larson on September 9, 2013 at 6:54 pm

    Hi, sorry but your project contains more fail…

  2. KL Amit Suri on September 20, 2013 at 3:19 pm

    Great work Mr. George like always, i was waiting for this tutorial, as usual easy to use and understand, keep it up.

    But i am requesting you to please update this tutorial by using themes, styles and colors to make ActionBar background fancy and tab as well, like: Orange background for Action Bar & Orange color of Tab selection [by default light blue in this program], in short want to know how to design ActionBar, TabBar with colors, themes and drawables.

    @NickyLarson nothing wrong here, you just need to put efforts, some steps to import v7compact to use this great tutorial:

    You need to do next: 1) File->Import (android-sdk\extras\android\support\v7). Choose “appcompat” 2) Project-> properties->Android. In the section library “Add” and choose “appCompat” 3) That is all!

    Thanks Mr. George

  3. Aidil on December 8, 2013 at 10:58 am

    How do i create the tab below the App Icon?

Leave a Reply to KL Amit Suri Cancel reply

Your email address will not be published. Required fields are marked *

Be friend at g+

Subscribe for Lastest Updates

FBFPowered by ®Google Feedburner