ActionBar/ActionBarSherlock Tabs

Navigation Tabs:

ActionBar supports built-in Tabs or drop-down lists that you can use to change the Fragment is currently  visible. We are going to work with ActionBarSherlock library so we can have backwards compatibility.

Note 1 :  Either Tabs or drop-down lists but not both in ActionBar.

Note 2 :  Every Tab is associated with one Fragment. To change Fragments by using the Tabs,  perform a FragmentTransaction each time a Tab is selected.

Display Tabs :  

actionbar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS); actionbar.setDisplayShowTitleEnabled(false);

Add Tabs :

You can add Tabs with the addTab() method. The first Tab added is the selected one therefore the visible.
Code is like below :

Tab tab = actionbar.newTab()                                .setText(R.string.text_tab_1)                                .setTabListener(new TabListener<myfragment>( this, "text", myFragment.class ) ); actionbar.addTab(tab);

Implement ActionBar.TabListener :

We 're going to split it into 3 parts :

1. First part the implementation of the Fragments.
2. Second part the implementation of ActionBar.TabListener 
3. Third part is to add the Tabs using the TabListener we created before.

The result we expect is the screenshot below :

1) Fragments 
Fragment class is just a basic Fragment class in which we only inflate the layout :

public class Fragment_1 extends Fragment { @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View view = inflater.inflate( R.layout.fragment_1 , container, false); return view; //returns view } // ********** declare INTERFACE ***************** // }

And the corresponding XML layout :

<?xml version="1.0" encoding="utf-8"?> <linearlayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:gravity="center" android:orientation="vertical" > <textview android:id="@+id/textView1" android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center" android:text="Tab 1"/> <button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button" > </Button> </LinearLayout>

We repeat this process for Fragment_2.

2) TabListener 
TabListener's implementation is the most difficult part of the work.

public class TabListener<t extends Fragment> implements com.actionbarsherlock.app.ActionBar.TabListener { private final Activity mActivity; private final String mTag; private final Class<t> mClass; private Fragment mFragment; // Constructor ********* public TabListener(Activity activity, String tag, Class<t> cls) { mActivity = activity; mTag = tag; mClass = cls; } /* The following are each of the ActionBar.TabListener callbacks */ public void onTabSelected(Tab tab, FragmentTransaction ft) { // Check if the fragment is already initialized if (mFragment == null) { // If not, instantiate and add it to the activity mFragment = Fragment.instantiate(mActivity, mClass.getName()); ft.add(android.R.id.content, mFragment, mTag); //ft.add(android.R.id.content, mFragment, mTag); } else { // If it exists, simply attach it in order to show it ft.attach(mFragment); } } @Override public void onTabUnselected(Tab tab, FragmentTransaction ft) { if (mFragment != null) { // Detach the fragment, because another one is being attached ft.detach(mFragment); } } @Override public void onTabReselected(Tab tab, FragmentTransaction ft) { // TODO Auto-generated method stub } }

Our constructor is  public TabListener(Activity activity, String tag, Class<T> clz)  where activity is the host Activity, tag is the identifier Tag of the fragment and cls the Fragment's class so we can instantiate the fragment.

Callbacks in this Interface will handle the event. Specifically when a Tab is clicked then onTabSelected() will execute the Fragment transaction and add the fragment to the Activity.

In our case the Tab content will fill the activity's layout, so our activity doesn't needs a layout. Each fragment is placed in the default root ViewGroup, which we can refer to with the android.R.id.content ID.

3) MainActivity
Because we have to deal with Fragments our MainActivity  will extend FragmentActivity ( or just Activity for Android 3.0 and up ) but in our case with ActionBarSherlock will extend the SherlockFragmentActivity.



public class ABStest extends SherlockFragmentActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); //setContentView(R.layout.activity_abstest); // no need for layout... ActionBar actionbar = getSupportActionBar(); actionbar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS); actionbar.addTab(actionbar.newTab() .setText("TAB 1") .setTabListener(new TabListener<fragment_1>(this, "tab1", Fragment_1.class))); actionbar.addTab(actionbar.newTab() .setText("TAB 2") .setTabListener(new TabListener<fragment_2>(this, "tab2", Fragment_2.class))); } }

All we are doing here is to get the ActionBar item, and add Tabs with the addTab() method.
We set a TabListener for each Tab by calling the setTabListener().
Also we set the tab's title and/or icon with setText() and/or setIcon().

That's all ! Check all the code and/or fork the project from github here so you can see by yourself how it works. 

ActionBarSherlock configuration

1.
I'm creating a custom Theme, let's call it TestABS with parent the HOLO Theme ( in our case Sherlock ).
So now in my styles.xml I add the line :
<style name="Theme.TestABS" parent="@style/Theme.Sherlock"></style> 

2.
Later I'll edit Manifest file like this :

<activity
      android:name=".MainActivity"
      android:label="@string/app_name"
      android:theme="@style/Theme.TestABS"
      android:logo="@drawable/ad_logo">

3.
When Activity starts, the system adds ActionBar and the overflow menu by calling onCreateOptionsMenu().
This method inflates an XML resource which defines the menu items. This files is in the folder /res/menu. In those items on the XML file I have to add the android:showAsAction keyword, so now the items will appear as Action Items in my ActionBar and not Options Menu.

So a simple item should be like :

    <item
        android:id="@+id/menu_settings"
        android:orderInCategory="100"
        android:showAsAction="ifRoom"
        android:title="Text Here" />



This works as long as I have an ActionBar in my Activity( When do I have an ActionBar ? When I add   android:theme="@style/Theme.HOLO" in my manifest file for android 3.0 and greater. For lower versions I need Theme.Sherlock . In both cases I can declare mine custom theme like I did above with TestABS ).


Links :
1) Adding ActionBarSherlock to your Project
2) Adding Items to the ActionBar 
3) The Overflow menu ( As a rule of thumb you should always use ifRoom, if you want the icon to be part of your action bar and you should use never if you want the item to always be part of the overflow menu. )