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”
Figure 1 : New Android Project
2. Select Android Build target
Figure 2 : Select Android Build Target
3. 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
Figure 4 : Application in Portrait Mode
Figure 5 : Application in Landscape Mode
14. Download
15. Reference
http://developer.android.com/guide/index.html
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
Ready to test your knowledge in Android? Take this quiz :
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!
very nice tuturial. I have a question, how to get the user selected value from the listview?
nice tutorial, its work
Hey, thank you very much for the tutorial, it works perfectly
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
i want to make this full screen, how can i make it full screen without hiding actionbar. Kindly help me
this tutorials dont work on old version of android. How to support and develop this tutorials
im new to android development.so im developing a android app with navigation bar.navigation bar has few items.when user click on those each item its going to another activity and its basically have two swipe views,those swipe views have list view…i want to develop this.thanks
Great tutorial
hlw sit hw can i create two column listview in one tab fragment
country capital
nepal ktm
germany berlin
i have an list view with tabhost activity and the list is generated from webservices,my problem is how to display the same list from service without using the fragments
I get an error in getActionBar
Attempt to invoke virtual method ‘void android.app.ActionBar.setNavigationMode(int)’ on a null object reference