Adding Navigation Tabs containing listview to Action Bar in Android

July 18, 2012
By

Action bar is a container and is visible at the top of the screen. It can contain the items such as application icon, title of the activity, navigation tabs, key actions and options menu. Action bar is introduced in Android version 3.0 ( API Level 11 ) . In this article, we will see how to add navigation tabs to the action bar. This application is developed in Eclipse 3.7.2 and is tested in Android Virtual Device with API level 14.

If you want to add navigational tabs and action bar in pre Honeycomb (API level < 11 )  versions also, see the article “Adding Navigation tabs containing listview to Action Bar in Pre Honeycomb versions using Sherlock library“.

In order to create navigation tabs using tabhost and fragments, see the article “Creating Navigation tabs using TabHost and Fragments in Android“.

This application creates two tabs, one for “Android” and the other for “Apple”. On clicking on “Android” tab, a list of Android’s code names will be listed in listview. On clicking on “Apple” tab, a list of ios’s  code names will be listed in listview.


1. Create a new Android project namely “ActionBarNavTab”

New Android Project

Figure 1 : New Android Project


2. Select Android Build target

Select Android Build Target

Figure 2 : Select Android Build Target


3. Enter application details

Enter Application Details

Figure 3 : Enter Application Details


4. src/in/wptrafficanalyzer/actionbarnavtab/CustomTabListener.java


package in.wptrafficanalyzer.actionbarnavtab;

import android.app.ActionBar.Tab;
import android.app.ActionBar.TabListener;
import android.app.Activity;
import android.app.Fragment;
import android.app.FragmentTransaction;

public class CustomTabListener<T extends Fragment> implements TabListener {
    private Fragment mFragment;
    private final Activity mActivity;
    private final String mTag;
    private final Class<T> mClass;

    public CustomTabListener(Activity activity, String tag, Class<T> clz){
        mActivity = activity;
        mTag = tag;
        mClass = clz;
    }

    @Override
    public void onTabReselected(Tab tab, FragmentTransaction ft) {
        // Nothing special to do here for this application
    }

    @Override
    public void onTabSelected(Tab tab, FragmentTransaction ft) {
        if(mFragment==null){
            mFragment = Fragment.instantiate(mActivity, mClass.getName());
            ft.add(android.R.id.content,mFragment, mTag);
        }else{
            ft.attach(mFragment);
        }
    }

    @Override
    public void onTabUnselected(Tab tab, FragmentTransaction ft) {
        if(mFragment!=null)
            ft.detach(mFragment);
    }
}


5. Download the given below file and extract to drawable-ldpi


6. Download the given below file and extract to drawable-mdpi


7. Download the given below file and extract to drawable-hdpi


8. Create a new folder drawable in res and create a new file namely android.xml with the given below code

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:state_selected="true"
        android:state_pressed="false"
        android:drawable="@drawable/android_selected" />
    <item
        android:drawable="@drawable/android_unselected" />
</selector>

9. Create new file namely apple.xml in res/drawable directory created in the above step and add the given below code

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:state_selected="true"
        android:state_pressed="false"
        android:drawable="@drawable/apple_selected" />

    <item
        android:drawable="@drawable/apple_unselected" />
</selector>


10. src/in/wptrafficanalyzer/actionbarnavtab/AndroidFragment.java


package in.wptrafficanalyzer.actionbarnavtab;

import android.app.ListFragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ListView;

/** This is a listfragment class */
public class AndroidFragment extends ListFragment {

    /** An array of items to display in ArrayList */
    String android_versions[] = new String[]{
        "Jelly Bean",
        "IceCream Sandwich",
        "HoneyComb",
        "Ginger Bread",
        "Froyo"
    };

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        /** Creating array adapter to set data in listview */
        ArrayAdapter<String> adapter = new ArrayAdapter<String>(getActivity().getBaseContext(), android.R.layout.simple_list_item_multiple_choice, android_versions);

        /** Setting the array adapter to the listview */
        setListAdapter(adapter);

        return super.onCreateView(inflater, container, savedInstanceState);
    }

    @Override
    public void onStart() {
        super.onStart();

        /** Setting the multiselect choice mode for the listview */
        getListView().setChoiceMode(ListView.CHOICE_MODE_MULTIPLE);
    }

}


11. src/in/wptrafficanalyzer/actionbarnavtab/AppleFragment.java


package in.wptrafficanalyzer.actionbarnavtab;

import android.app.ListFragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ListView;

/** This is a listfragment class */
public class AppleFragment extends ListFragment {

    /** An array of items to display in ArrayList */
    String apple_versions[] = new String[]{
        "Mountain Lion",
        "Lion",
        "Snow Leopard",
        "Leopard",
        "Tiger",
        "Panther",
        "Jaguar",
        "Puma"
    };

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        /** Creating array adapter to set data in listview */
        ArrayAdapter<String> adapter = new ArrayAdapter<String>(getActivity().getBaseContext(), android.R.layout.simple_list_item_multiple_choice, apple_versions);

        /** Setting the array adapter to the listview */
        setListAdapter(adapter);

        return super.onCreateView(inflater, container, savedInstanceState);
    }

    @Override
    public void onStart() {
        super.onStart();

        /** Setting the multiselect choice mode for the listview */
        getListView().setChoiceMode(ListView.CHOICE_MODE_MULTIPLE);
    }

}


12. src/in/wptrafficanalyzer/actionbarnavtab/MainActivity.java


package in.wptrafficanalyzer.actionbarnavtab;

import android.app.ActionBar;
import android.app.ActionBar.Tab;
import android.app.Activity;
import android.os.Bundle;

public class MainActivity extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        ActionBar actionBar = getActionBar();
        actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);

        actionBar.setDisplayShowTitleEnabled(true);

        /** Creating ANDROID Tab */
        Tab tab = actionBar.newTab()
            .setText("Android")
            .setTabListener(new CustomTabListener<AndroidFragment>(this, "android", AndroidFragment.class))
            .setIcon(R.drawable.android);

        actionBar.addTab(tab);

        /** Creating APPLE Tab */
        tab = actionBar.newTab()
            .setText("Apple")
            .setTabListener(new CustomTabListener<AppleFragment>(this, "apple", AppleFragment.class))
            .setIcon(R.drawable.apple);

        actionBar.addTab(tab);
    }
}


13. Application in Execution

Application in Portrait Mode

Figure 4 : Application in Portrait Mode

Application in Landscape Mode

Figure 5 : Application in Landscape Mode


14. Download


15. Reference

http://developer.android.com/guide/index.html



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 :



Tags: , , , ,

6 Responses to Adding Navigation Tabs containing listview to Action Bar in Android

  1. Sam on November 23, 2012 at 8:21 am

    Is there any way to get rid of the checkboxes so it’s just a regular listview? And would there also be a way to make it so when i click on an item in the listview, it takes me to a different page? Thanks!

  2. Jerry on December 7, 2012 at 11:52 am

    very nice tuturial. I have a question, how to get the user selected value from the listview?

  3. Widi on April 5, 2013 at 12:44 pm

    nice tutorial, its work

  4. Lea on July 26, 2013 at 2:38 pm

    Hey, thank you very much for the tutorial, it works perfectly :)

  5. Kingston on November 12, 2013 at 5:40 pm

    Could you add an Option to swipe over through the tabs like in play store?

    Or xould you just explain how to do that?

    Thanks a lot :D

  6. raghu on December 27, 2013 at 10:47 pm

    i want to make this full screen, how can i make it full screen without hiding actionbar. Kindly help me

Leave a Reply

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

Be friend at g+

Subscribe for Lastest Updates

FBFPowered by ®Google Feedburner