Search

ActionBarSherlock Custom Menu List Navigation Fragments

Last Updated: May 23, 2013

In this tutorial, you will learn how to create an ActionBarSherlock Custom Menu List Navigation Fragments in your Android application. A menu list navigation allows the user to easily navigate between fragments or activities. We will create a custom menu list navigation using ActionBarSherlock Library and on menu item click will show different fragments. So lets begin…

Prepare your project by importing the ActionBarSherlock Library. Refer to Implementing ActionBarSherlock in Android tutorial.

Create a new project in Eclipse File > New > Android Application Project. Fill in the details and name your project ABSNavList.

Application Name : ABSNavList

Project Name : ABSNavList

Package Name : com.androidbegin.absnavlist

Open your MainActivity.java and paste the following code.

MainActivity.java

package com.androidbegin.absnavlist;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentTransaction;
import android.widget.ListView;

import com.actionbarsherlock.app.ActionBar;
import com.actionbarsherlock.app.ActionBar.OnNavigationListener;
import com.actionbarsherlock.app.SherlockFragmentActivity;

public class MainActivity extends SherlockFragmentActivity {
	// Declare Variables
	ListView list;
	NavListAdapter adapter;
	String[] title;
	String[] subtitle;
	int[] icon;
	Fragment fragment1 = new Fragment1();
	Fragment fragment2 = new Fragment2();
	Fragment fragment3 = new Fragment3();

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);

		// Generate title
		title = new String[] { "Title Fragment 1", "Title Fragment 2",
				"Title Fragment 3" };

		// Generate subtitle
		subtitle = new String[] { "Subtitle Fragment 1", "Subtitle Fragment 2",
				"Subtitle Fragment 3" };

		// Generate icon 
		icon = new int[] { R.drawable.action_about, R.drawable.action_settings,
				R.drawable.collections_cloud };

		// Pass results to NavListAdapter Class
		adapter = new NavListAdapter(this, title, subtitle, icon);

		// Hide the ActionBar Title
		getSupportActionBar().setDisplayShowTitleEnabled(false);

		// Create the Navigation List in your ActionBar
		getSupportActionBar().setNavigationMode(ActionBar.NAVIGATION_MODE_LIST);

		// Listen to navigation list clicks
		ActionBar.OnNavigationListener navlistener = new OnNavigationListener() {

			@Override
			public boolean onNavigationItemSelected(int position, long itemId) {
				FragmentTransaction ft = getSupportFragmentManager()
						.beginTransaction();
				// Locate Position
				switch (position) {
				case 0:
					ft.replace(android.R.id.content, fragment1);
					break;
				case 1:
					ft.replace(android.R.id.content, fragment2);
					break;
				case 2:
					ft.replace(android.R.id.content, fragment3);
					break;
				}
				ft.commit();
				return true;
			}

		};
		// Set the NavListAdapter into the ActionBar Navigation
		getSupportActionBar().setListNavigationCallbacks(adapter, navlistener);
	}
}

In this activity, we have created some sample titles, subtitles and icons into a string and integer arrays and passed it into NavListAdapter to display it on a listview as a menu. On listview menu click will display the selected fragment.

We have prepared some sample icons for this tutorial. Insert your downloaded sample icons into your res > drawable-hdpi.

Sample Icons

[wpfilebase tag=file id=47 tpl=download-button /]

Next, create a custom Navigation View Adapter class. Go to File > New > Class and name it NavListAdapter.java. Select your package named com.androidbegin.absnavlist and click Finish.

Open your NavListAdapter.java and paste the following code.

NavListAdapter.java

package com.androidbegin.absnavlist;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;

public class NavListAdapter extends BaseAdapter {

	// Declare Variables
	Context context;
	String[] mTitle;
	String[] mSubTitle;
	int[] mIcon;
	LayoutInflater inflater;

	public NavListAdapter(Context context, String[] title, String[] subtitle,
			int[] icon) {
		this.context = context;
		this.mTitle = title;
		this.mSubTitle = subtitle;
		this.mIcon = icon;
	}

	@Override
	public int getCount() {
		return mTitle.length;
	}

	@Override
	public Object getItem(int position) {
		return mTitle[position];
	}

	@Override
	public long getItemId(int position) {
		return position;
	}

	public View getView(int position, View convertView, ViewGroup parent) {
		// Declare Variables
		TextView txtTitle;
		TextView txtSubTitle;

		inflater = (LayoutInflater) context
				.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
		View itemView = inflater.inflate(R.layout.nav_list_item, parent, false);

		// Locate the TextViews in nav_list_item.xml
		txtTitle = (TextView) itemView.findViewById(R.id.title);
		txtSubTitle = (TextView) itemView.findViewById(R.id.subtitle);

		// Set the results into TextViews
		txtTitle.setText(mTitle[position]);
		txtSubTitle.setText(mSubTitle[position]);

		return itemView;
	}

	@Override
	public View getDropDownView(int position, View convertView, ViewGroup parent) {
		// Declare Variables
		TextView txtTitle;
		TextView txtSubTitle;
		ImageView imgIcon;

		inflater = (LayoutInflater) context
				.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
		View dropdownView = inflater.inflate(R.layout.nav_dropdown_item, parent,
				false);

		// Locate the TextViews in nav_dropdown_item.xml
		txtTitle = (TextView) dropdownView.findViewById(R.id.title);
		txtSubTitle = (TextView) dropdownView.findViewById(R.id.subtitle);

		// Locate the ImageView in nav_dropdown_item.xml
		imgIcon = (ImageView) dropdownView.findViewById(R.id.icon);

		// Set the results into TextViews
		txtTitle.setText(mTitle[position]);
		txtSubTitle.setText(mSubTitle[position]);

		// Set the results into ImageView
		imgIcon.setImageResource(mIcon[position]);

		return dropdownView;
	}

}

In this custom listview adapter class, string arrays are passed into the NavListAdapter and set into the TextViews  and ImageViews followed by the positions.

Adapter Views

public View getView changes the view shown on the actionbar.

GetView

public View getDropDownView changes the view shown on the navigation list.

GetDropDownView

Next, create an XML graphical layout for your listview item. Go to res > layout > Right Click on layout > New > Android XML File

Name your new XML file nav_list_item.xml and paste the following code.

nav_list_item.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center_vertical|left"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/title"
        style="?attr/spinnerItemStyle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ellipsize="end"
        android:paddingLeft="0dp"
        android:singleLine="true" />

    <TextView
        android:id="@+id/subtitle"
        style="?attr/spinnerItemStyle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ellipsize="end"
        android:paddingLeft="0dp"
        android:singleLine="true"
        android:textAppearance="?attr/textAppearanceSmall" />

</LinearLayout>

Next, create an XML graphical layout for your dropdown item. Go to res > layout > Right Click on layout > New > Android XML File

Name your new XML file nav_dropdown_item.xml and paste the following code.

nav_dropdown_item.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    style="?attr/spinnerDropDownItemStyle"
    android:layout_width="match_parent"
    android:layout_height="?attr/dropdownListPreferredItemHeight"
    android:orientation="horizontal" >

    <ImageView
        android:id="@+id/icon"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:adjustViewBounds="true" />

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:gravity="center_vertical|left"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/title"
            style="?attr/spinnerDropDownItemStyle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:ellipsize="end"
            android:singleLine="true" />

        <TextView
            android:id="@+id/subtitle"
            style="?attr/spinnerDropDownItemStyle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:ellipsize="end"
            android:singleLine="true"
            android:textAppearance="?attr/textAppearanceSmall" />
    </LinearLayout>

</LinearLayout>

Next, create the first fragment. Go to File > New > Class and name it Fragment1.java. Select your package named com.androidbegin.absnavlist and click Finish.

Open your Fragment1.java and paste the following code.

Fragment1.java

package com.androidbegin.absnavlist;

import com.actionbarsherlock.app.SherlockFragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class Fragment1 extends SherlockFragment {
	@Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        View rootView = inflater.inflate(R.layout.fragment1, container, false);
        return rootView;
    }

}

Next, create the second fragment. Go to File > New > Class and name it Fragment2.java. Select your package named com.androidbegin.absnavlist and click Finish.

Open your Fragment2.java and paste the following code.

Fragment2.java

package com.androidbegin.absnavlist;

import com.actionbarsherlock.app.SherlockFragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class Fragment2 extends SherlockFragment {
	@Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        View rootView = inflater.inflate(R.layout.fragment2, container, false);
        return rootView;
    }

}

Next, create the third fragment. Go to File > New > Class and name it Fragment3.java. Select your package named com.androidbegin.absnavlist and click Finish.

Open your Fragment3.java and paste the following code.

Fragment3.java

package com.androidbegin.absnavlist;

import com.actionbarsherlock.app.SherlockFragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class Fragment3 extends SherlockFragment {
	@Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        View rootView = inflater.inflate(R.layout.fragment3, container, false);
        return rootView;
    }

}

Next, create an XML graphical layout for first fragment. Go to res > layout > Right Click on layout > New > Android XML File

Name your new XML file fragment1.xml and paste the following code.

fragment1.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" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="@string/Fragment1" />

</RelativeLayout>

Next, create an XML graphical layout for second fragment. Go to res > layout > Right Click on layout > New > Android XML File

Name your new XML file fragment2.xml and paste the following code.

fragment2.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" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="@string/Fragment2" />

</RelativeLayout>

Next, create an XML graphical layout for third fragment. Go to res > layout > Right Click on layout > New > Android XML File

Name your new XML file fragment3.xml and paste the following code.

fragment3.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" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="@string/Fragment3" />

</RelativeLayout>

Change the application name and fragment textview texts in strings.xml. Open your strings.xml and paste the following code. Go to res > values > strings.xml

strings.xml

<resources>

    <string name="app_name">ABS Navigation List</string>
    <string name="hello_world">Hello world!</string>
    <string name="menu_settings">Settings</string>
    <string name="title_activity_main">ABS Navigation List</string>
    <string name="Fragment1">This is Fragment 1</string>
    <string name="Fragment2">This is Fragment 2</string>
    <string name="Fragment3">This is Fragment 3</string>

</resources>

In your AndroidManifest.xml, we need to change the theme style to “Theme.Sherlock” and set your preferable Android minimum SDK version. Open your AndroidManifest.xml and paste the following code.

AndroidManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.androidbegin.absnavlist"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="7"
        android:targetSdkVersion="15" />

    <application
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/Theme.Sherlock" >
        <activity android:name=".MainActivity" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

Output:

ABS List Navigation Screenshot

Source Code

[purchase_link id=”7942″ text=”Purchase to Download Source Code” style=”button” color=”green”]

Latest comments

I'll be back with more tutorials next month. Cheers buddy

AndroidBegin

ActionBarSherlock Custom Menu List Navigation Fragments

Great question, I haven't figure it out yet. I'll try on the codes and let you know the results soon. :)

AndroidBegin

ActionBarSherlock Custom Menu List Navigation Fragments

I Have a question. How i can add button (3 vertical points) and inflate another menu for this button? Big thanks for this post!

Danil

ActionBarSherlock Custom Menu List Navigation Fragments

Try changing your app theme to thisandroid:theme="@style/Theme.Sherlock"

AndroidBegin

ActionBarSherlock Custom Menu List Navigation Fragments