Android Working and Navigating with action bar basics

ActionBar was introduced in Honeycomb (API Level 11), however with ActionBarSherlock Jake Wharton has done another of his excellent back-port libraries which enable you to add ActionBar support to 2.x devices as well.
In this article we’ll have a look at allowing the user to navigate though our app using the ActionBar.
Actionbar supports a couple of basic types of navigation, Tab-based and Dropdown-based.

Here are some for your inspiration(Pocketcast,cliffhanger,Runkeeper)  


    


Android version support below 3.0
Action bar is introduced in android 3.0 (API level 11), but if you want your app to support action bar in older versions too, then use Support Library to make it compatible with older versions (Android 2.1 and above)

The action bar provides several key functions:

• Provides a dedicated space for giving your app an identity and indicating the user's location in the app.
• Makes important actions prominent and accessible in a predictable way (such as Search).
• (with tabs or drop-down lists).

For more information about the action bar's interaction patterns and design guidelines, see the Action Bardesign guide.
Starting new Project
1. Create a new project in Eclipse from File --> New --> Android Application Project. While creating the project select Minimum SDK version to API 11 and select a theme with action bar.
------------------------------------------------------------------------------------------------------------
Here the important xml attributes should be known are
android:icon – Defines the icon of the action item.
android:title – Title for the icon.
android:showAsAction – Defines the visibility of the action item. It accepts following values.

ifRoom:Displays the icon if there is space available on the screen
never:Never places this icon on the action bar
always:Forces to display the icon always irrespective of space available. This way is not suggested.
withText:Displays a text along with the icon. Normally the text value defined by android:title will be displayed
collapseActionView:Defines the action layout associated with it. This action view defined using android:actionLayout or android:actionViewClass.
------------------------------------------------------------------------------------------------------------
Implementing tab navigation requires us to create some Fragment implementations which will be used for the content panel for each of the tabs. Each of these consists of a simple layout res/layout/frag1.xml:


 

<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_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="@string/frag1"/>

</RelativeLayout>



And a simple class which inflates this layout here’s Fragment1.java:
   
public class Fragment1 extends Fragment
{
    @Override
    public View onCreateView( LayoutInflater inflater,
        ViewGroup container,
        Bundle savedInstanceState )
    {
        return inflater.inflate( R.layout.frag1,
            container, false );
    }
}

The other class and layout are almost identical except the layout uses a different string resource for the text, and the class inflates the frag2 layout in stead of frag1. For a real app, these would obviously be more complex, but I am deliberately keeping the fragments simple so that we can focus on the navigation.

Next we have to create a android.app.ActionBar.TabListener instance as an inner class within MainActivity.java
   
private class MyTabListener
    implements ActionBar.TabListener
{
    private Fragment mFragment;
    private final Activity mActivity;
    private final String mFragName;

    public MyTabListener( Activity activity,
        String fragName )
    {
        mActivity = activity;
        mFragName = fragName;
    }

    @Override
    public void onTabReselected( Tab tab,
        FragmentTransaction ft )
    {
        // TODO Auto-generated method stub
    }

    @Override
    public void onTabSelected( Tab tab,
        FragmentTransaction ft )
    {
        mFragment = Fragment.instantiate( mActivity,
            mFragName );
        ft.add( android.R.id.content, mFragment );
    }

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

This is responsible for creating a fragment and adding it to android.R.id.content which is the main content area.

Finally, we need to implement this within the onCreate method of MainActivity.java
   
@Override
public void onCreate( Bundle savedInstanceState )
{
    super.onCreate( savedInstanceState );
        ActionBar ab = getActionBar();
    ab.setNavigationMode( ActionBar.NAVIGATION_MODE_TABS );

    Tab tab = ab.newTab()
        .setText( R.string.frag1 )
        .setTabListener(
            new MyTabListener( this,
                Fragment1.class.getName() ) );
    ab.addTab( tab );

    tab = ab.newTab()
        .setText( R.string.frag2 )
        .setTabListener(
            new MyTabListener( this,
                Fragment2.class.getName() ) );
    ab.addTab( tab );
}

This sets the required navigation mode, then creates and adds the two tabs with the string to display, and the classname of the relevant fragment. One thing to note: we do not call setContentView() as we normally would in onCreate(). This is because we are adding our Fragments directly to the content area by using android.R.id.content in our TabListener. If we want to do something a bit more complex, we can call setContentView() to add a custom layout, but we must change our TabListener to add the fragments to an emprty container within this custom layout instead. If we run this we get our tabs which switch between the two fragments that we created:

Tab Navigation
One thing to note is that, because there wasn’t much space, the tab controls were split on to a second line. On a larger device, or if we switch to lanscape mode, there will be more space, and the ActionBar will make use of this by combining everything on to a single line:

For landscape Mode:
On ICS (Android 4.0) and later, it is possible to control this using the uiOptions="splitActionBarWhenNarrow" attribute on this or elements in your manifest.

Whats next ?
An Complete Example With source on "How to create Tab Based Navigation With Swipeable views"

Like the post "please Susbcribe  to our Greeve to learn android and like and follow us on facebook & twitter."