Spinner menu

The spinner menu is a navigation mode that allows you to switch from one view to another using a drop down menu.
The advantage of using the spinner menu consists in a more compact design because it does not require a dedicated tab bar, but it uses the bar already commonly used for the title and the logo of the application.
According to the Google guidelines for action bar the spinner menu should be used to show different views that show the same data but arranged and filtered in a different way (calendar by day, week or month) or that show the same data type (for example, the contents of multiple accounts).
The following is an example implementation of a spinner menu to show 2 fragments.

1. create an Android project without a starting Activity
2. edit the file AndroidManifest.xml
   
   XHTML

   <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="eu.lucazanini.spinnermenu" android:versionCode="1" android:versionName="1.0"> <uses-sdk android:minSdkVersion="14" android:targetSdkVersion="15" /> <application android:label="@string/app_name" android:icon="@drawable/ic_launcher" android:theme="@style/AppTheme"> <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>

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

   <manifest xmlns:android="http://schemas.android.com/apk/res/android"     package="eu.lucazanini.spinnermenu"     android:versionCode="1"     android:versionName="1.0">       <uses-sdk android:minSdkVersion="14" android:targetSdkVersion="15" />       <application android:label="@string/app_name"         android:icon="@drawable/ic_launcher"         android:theme="@style/AppTheme">         <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>

3. edit the file res/values/strings.xml
   
   XHTML

   <resources> <string name="app_name">Spinner Menu</string> <string name="body1">one</string> <string name="body2">two</string> <string-array name="labelMenu"> <item >Tab 1</item> <item >Tab 2</item> </string-array> </resources>

   1 2 3 4 5 6 7 8 9

   <resources> <string name="app_name">Spinner Menu</string> <string name="body1">one</string> <string name="body2">two</string> <string-array name="labelMenu"> <item >Tab 1</item> <item >Tab 2</item> </string-array> </resources>

4. create the 2 resources for the layouts res/layout/tab1.xml and res/layout/tab2.xml
   
   XHTML

   <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/tab1" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:gravity="center"> <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:text="@string/body1" /> </LinearLayout>

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

   <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"     android:id="@+id/tab1"     android:layout_width="match_parent"     android:layout_height="match_parent"     android:orientation="vertical"     android:gravity="center">       <TextView         android:id="@+id/textView1"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:layout_gravity="center"         android:text="@string/body1" />   </LinearLayout>

   
   
   XHTML

   <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/tab2" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:gravity="center"> <TextView android:id="@+id/textView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:text="@string/body2" /> </LinearLayout>

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

   <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"     android:id="@+id/tab2"     android:layout_width="match_parent"     android:layout_height="match_parent"     android:orientation="vertical"     android:gravity="center">       <TextView         android:id="@+id/textView2"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:layout_gravity="center"         android:text="@string/body2" />   </LinearLayout>

5. create the class eu/lucazanini/spinnermenu/MainActivity.java
   
   Java

   package eu.lucazanini.spinnermenu; import android.app.ActionBar; import android.app.Activity; import android.app.FragmentTransaction; import android.os.Bundle; import android.widget.ArrayAdapter; public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); final ActionBar actionBar = getActionBar(); // Specify that a dropdown list should be displayed in the action bar. actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_LIST); // Hide the title actionBar.setDisplayShowTitleEnabled(false); actionBar.setDisplayUseLogoEnabled(false); // Specify a SpinnerAdapter to populate the dropdown list. ArrayAdapter<String> spinnerMenu = new ArrayAdapter<String>( actionBar.getThemedContext(), android.R.layout.simple_list_item_1, getResources() .getStringArray(R.array.labelMenu)); actionBar.setListNavigationCallbacks( spinnerMenu, // Provide a listener to be called when an item is selected. new ActionBar.OnNavigationListener() { public boolean onNavigationItemSelected(int position, long id) { // Take action here, e.g. switching to the // corresponding fragment. FragmentTransaction tx = getFragmentManager() .beginTransaction(); switch (position) { case 0: tx.replace(android.R.id.content, new Tab1Fragment()); break; case 1: tx.replace(android.R.id.content, new Tab2Fragment()); break; default: break; } tx.commit(); return true; } }); } }

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60

   package eu.lucazanini.spinnermenu;   import android.app.ActionBar; import android.app.Activity; import android.app.FragmentTransaction; import android.os.Bundle; import android.widget.ArrayAdapter;   public class MainActivity extends Activity {       @Override     protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState);   final ActionBar actionBar = getActionBar();   // Specify that a dropdown list should be displayed in the action bar. actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_LIST);   // Hide the title actionBar.setDisplayShowTitleEnabled(false); actionBar.setDisplayUseLogoEnabled(false);   // Specify a SpinnerAdapter to populate the dropdown list. ArrayAdapter<String> spinnerMenu = new ArrayAdapter<String>( actionBar.getThemedContext(), android.R.layout.simple_list_item_1, getResources() .getStringArray(R.array.labelMenu));   actionBar.setListNavigationCallbacks(   spinnerMenu,   // Provide a listener to be called when an item is selected. new ActionBar.OnNavigationListener() {     public boolean onNavigationItemSelected(int position,     long id) { // Take action here, e.g. switching to the // corresponding fragment. FragmentTransaction tx = getFragmentManager() .beginTransaction();   switch (position) { case 0:     tx.replace(android.R.id.content, new Tab1Fragment());     break; case 1:     tx.replace(android.R.id.content, new Tab2Fragment());     break; default:     break; }   tx.commit();   return true;     } });     } }

   
   in this class you can see:
   • you enable the NAVIGATION_MODE_LIST for the action bar
   • you hide the title to get more space for the menu
   • you create an object of the class ArrayAdapter that implements the interface SpinnerAdapter using an array of strings defined in a resource file
6. create the classses eu/lucazanini/spinnermenu/Tab1Fragment.java and eu/lucazanini/spinnermenu/Tab2Fragment.java
   
   Java

   package eu.lucazanini.spinnermenu; import android.app.Fragment; import android.os.Bundle; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.LinearLayout; public class Tab1Fragment extends Fragment { @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { return (LinearLayout) inflater.inflate(R.layout.tab1, container, false); } }

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

   package eu.lucazanini.spinnermenu;   import android.app.Fragment; import android.os.Bundle; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.LinearLayout;   public class Tab1Fragment extends Fragment {       @Override     public View onCreateView(LayoutInflater inflater, ViewGroup container,     Bundle savedInstanceState) { return (LinearLayout) inflater.inflate(R.layout.tab1, container, false);     }   }

   
   
   Java

   package eu.lucazanini.spinnermenu; import android.app.Fragment; import android.os.Bundle; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.LinearLayout; public class Tab2Fragment extends Fragment { @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { return (LinearLayout) inflater.inflate(R.layout.tab2, container, false); } }

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

   package eu.lucazanini.spinnermenu;   import android.app.Fragment; import android.os.Bundle; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.LinearLayout;   public class Tab2Fragment extends Fragment {       @Override     public View onCreateView(LayoutInflater inflater, ViewGroup container,     Bundle savedInstanceState) { return (LinearLayout) inflater.inflate(R.layout.tab2, container, false);     }   }

7. launch the app
   

References:
Spinners
Action Bar
Implementing Lateral Navigation