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.
public View getDropDownView
changes the view shown on the navigation list.
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:
Source Code
[purchase_link id=”7942″ text=”Purchase to Download Source Code” style=”button” color=”green”]
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