Android ActionBar and Option Menus
What is the action bar?
The action bar (ActionBar) is located at the top of the activity. It can display the activity title, icon, actions which can be triggered, additional views and other interactive items. It can also be used for navigation in your application.
The action bar is enabled for devices which specify a target SDK of API version 11 or higher. It is possible to disable the action bar via the used theme, but the default Android themes have it enabled.
Applications with a target SDK version less than API 11 use the options menu if such a button is present on the device. The option menu is displayed if the user presses the Option button. The action bar is superior to the options menu, as the action bar is clearly visible, while the options menu is only shown on request. In case of the options menu, the user may not recognize that options are available in the application.
What is the option menus?
Android Option Menus are the primary menus of android. They can be used for settings, search, delete item etc.
We inflate the menu by calling the inflate() method of MenuInflater class. To perform event handling on menu items, you need to override onOptionsItemSelected() method of Activity class.
Note : Both actionbar and option menus can be customized.
Example
In this example i will demonstrate you how to work on action bar and option menus and also custom action bar and option menus.
VIDEO DEMO
Let’s get start by creating a project in Eclipse IDE.
1. Create a new project in Eclipse by navigating to File ⇒ New Android ⇒ Application Project and fill required details. (I kept my main activity name as MainActivity.java)
2. Open your your AndroidManifest.xml file and make your “MainActivity” as Launcher activity and some extra stuffs like meta data that is going to be use in actionbar.
|
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 |
<?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.actionbar_and_menus" android:versionCode="1" android:versionName="1.0" > <uses-sdk android:minSdkVersion="8" android:targetSdkVersion="22" /> <application android:allowBackup="true" android:icon="@drawable/ic_launcher" android:label="@string/app_name" android:theme="@style/AppTheme" > <activity android:name=".MainActivity" android:label="@string/app_name" > <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> <activity android:name="com.actionbar_and_menus.CustomMenu" android:label="@string/second_activity" android:parentActivityName=".MainActivity" > <meta-data android:name="android.support.PARENT_ACTIVITY" android:value=".MainActivity" /> </activity> <activity android:name="com.actionbar_and_menus.CustomActionBar" android:parentActivityName=".MainActivity" > <meta-data android:name="android.support.PARENT_ACTIVITY" android:value=".MainActivity" /> </activity> </application> </manifest> |
3. Create a layout file for MainActivtiy.java under res ⇒ layout folder. I named the layout file as activity_main.xml. In this layout i made three buttons for different actions.
|
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 |
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="fill_parent" android:layout_height="fill_parent" android:gravity="center" android:orientation="vertical" android:padding="10dp" > <Button android:id="@+id/show_hide_actionbar" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_margin="5dp" android:padding="10dp" android:text="@string/hide" /> <Button android:id="@+id/custom_menu" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_margin="5dp" android:padding="10dp" android:text="@string/custom_menu_activity" /> <Button android:id="@+id/custom_actionbar" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_margin="5dp" android:padding="10dp" android:text="@string/custom_actionbar_activity" /> </LinearLayout> |
4. Now, add the following code in MainActivity.java. In this class we set logo, title, subtitle and implement actionbar option menus and do something on menu selecting and also showing and hiding on first button pressed.
|
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 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 |
package com.actionbar_and_menus; import android.content.Intent; import android.os.Bundle; import android.support.v4.view.MenuItemCompat; import android.support.v7.app.ActionBar; import android.support.v7.app.ActionBarActivity; import android.support.v7.widget.SearchView; import android.view.Menu; import android.view.MenuItem; import android.view.View; import android.view.View.OnClickListener; import android.widget.Button; import android.widget.Toast; public class MainActivity extends ActionBarActivity implements OnClickListener { ActionBar actionBar; Button show_hide_actionbar; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); // Getting actionbar actionBar = getSupportActionBar(); // Setting up logo over actionbar actionBar.setDisplayUseLogoEnabled(true); actionBar.setDisplayShowHomeEnabled(true); actionBar.setLogo(R.drawable.androhub_logo); // setting actionbar title // actionBar.setTitle("Main Activity"); // setting actionbar subtitle actionBar.setSubtitle("Sub Title"); show_hide_actionbar = (Button) findViewById(R.id.show_hide_actionbar); // Implementing click listener over all buttons show_hide_actionbar.setOnClickListener(this); findViewById(R.id.custom_menu).setOnClickListener(this); findViewById(R.id.custom_actionbar).setOnClickListener(this); } @Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.main, menu); // Finding search menu item final MenuItem searchItem = menu.findItem(R.id.search); SearchView searchView = (SearchView) MenuItemCompat .getActionView(searchItem); // Setting hint over search menu searchView.setQueryHint("Search here...."); // Calling query listener on search menu SearchView.OnQueryTextListener textListener = new SearchView.OnQueryTextListener() { @Override public boolean onQueryTextSubmit(String query) { // Showing text that is entered in search menu Toast.makeText(MainActivity.this, query, Toast.LENGTH_SHORT) .show(); return false; } @Override public boolean onQueryTextChange(String newText) { return true; } }; // Implementing query listener searchView.setOnQueryTextListener(textListener); return true; } // Implementing click listeners over all menu icons and displaying there // texts @Override public boolean onOptionsItemSelected(MenuItem item) { switch (item.getItemId()) { case R.id.search: Toast.makeText(MainActivity.this, item.getTitle(), Toast.LENGTH_SHORT).show(); break; case R.id.save: Toast.makeText(MainActivity.this, item.getTitle(), Toast.LENGTH_SHORT).show(); break; case R.id.attachment: Toast.makeText(MainActivity.this, item.getTitle(), Toast.LENGTH_SHORT).show(); break; case R.id.email: Toast.makeText(MainActivity.this, item.getTitle(), Toast.LENGTH_SHORT).show(); break; } return super.onOptionsItemSelected(item); } @Override public void onClick(View view) { switch (view.getId()) { case R.id.show_hide_actionbar: // Checking if actionbar is visible or not and according to it // hiding and showing the actionbar and changing text of button if (actionBar.isShowing()) { actionBar.hide(); show_hide_actionbar.setText(R.string.show); } else { actionBar.show(); show_hide_actionbar.setText(R.string.hide); } break; // Starting a new activity case R.id.custom_menu: startActivity(new Intent(MainActivity.this, CustomMenu.class)); break; case R.id.custom_actionbar: startActivity(new Intent(MainActivity.this, CustomActionBar.class)); break; } } } |
5. Create a new layout file naming custom_actionbar_menu.xml for custom menu. In this layout we take one textview and one edittext according to menus that we want to display for demo i am taking two widgets only.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<?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:orientation="horizontal" > <TextView android:id="@+id/custom_text_menu" android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center" android:padding="5dp" android:text="@string/custom_menu" android:textColor="#ff00" /> <EditText android:id="@+id/custom_edittext_menu" android:layout_width="wrap_content" android:layout_height="wrap_content" android:hint="@string/enter" android:padding="5dp" /> </LinearLayout> |
6. Now create a java file naming CustomMenu.java for custom menus that is started on button click from MainActivity.java and add the following code. In this activity i am going to show how to inflate custom menu over actionbar and implement click listeners over them.
|
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 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 |
package com.actionbar_and_menus; import android.os.Bundle; import android.support.v4.view.MenuItemCompat; import android.support.v7.app.ActionBar; import android.support.v7.app.ActionBarActivity; import android.view.Menu; import android.view.MenuItem; import android.view.View; import android.view.View.OnClickListener; import android.view.View.OnFocusChangeListener; import android.widget.LinearLayout; import android.widget.Toast; public class CustomMenu extends ActionBarActivity { ActionBar actionBar; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); // Using the same layout but hiding all widgets setContentView(R.layout.activity_main); findViewById(R.id.show_hide_actionbar).setVisibility(View.GONE); findViewById(R.id.custom_menu).setVisibility(View.GONE); findViewById(R.id.custom_actionbar).setVisibility(View.GONE); actionBar = getSupportActionBar(); // Showing a back button over actionbar actionBar.setDisplayHomeAsUpEnabled(true); } @Override public boolean onCreateOptionsMenu(Menu menu) { // Inflating actionbar custom menu getMenuInflater().inflate(R.menu.custom_menu, menu); // Finding id of custom menu MenuItem custom = menu.findItem(R.id.custom); // Getting actionview of the menu item LinearLayout custom_layout = (LinearLayout) MenuItemCompat .getActionView(custom); // Implementing click listners over custom menu textview and showing a // toast custom_layout.findViewById(R.id.custom_text_menu).setOnClickListener( new OnClickListener() { @Override public void onClick(View arg0) { Toast.makeText(CustomMenu.this, "Text Menu pressed.", Toast.LENGTH_SHORT).show(); } }); // Implementing focus listener over edittext and showing a toast custom_layout.findViewById(R.id.custom_edittext_menu) .setOnFocusChangeListener(new OnFocusChangeListener() { @Override public void onFocusChange(View arg0, boolean focus) { if (focus) { Toast.makeText(CustomMenu.this, "Edit Text Focused.", Toast.LENGTH_SHORT) .show(); } else { Toast.makeText(CustomMenu.this, "Edit Text Focused changed.", Toast.LENGTH_SHORT).show(); } } }); return super.onCreateOptionsMenu(menu); } @Override public boolean onOptionsItemSelected(MenuItem item) { switch (item.getItemId()) { // Over riding actionbar back button and showing a toast case android.R.id.home: Toast.makeText(CustomMenu.this, "Home button pressed.", Toast.LENGTH_SHORT).show(); break; } return super.onOptionsItemSelected(item); } @Override public void onBackPressed() { // Over riding back pressed button and showing a toast Toast.makeText(CustomMenu.this, "Back button pressed.", Toast.LENGTH_SHORT).show(); super.onBackPressed(); } } |
7. For, custom actionbar create an new layout naming custom_actionbar.xml. In this layout i made one textview with an icon for custom actionbar title and icon.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<?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="wrap_content" android:orientation="horizontal" > <TextView android:id="@+id/custom_actionbar_title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:drawableLeft="@drawable/androhub_logo" android:drawablePadding="5dp" android:drawableStart="@drawable/androhub_logo" android:gravity="center_vertical" android:text="@string/custom_actionbar_title" android:textColor="#ffffff" android:textSize="18sp" /> </LinearLayout> |
8. Now, finally make a new java class for custom actionbar naming CustomActionBar.java and add the following code. In this class i am going to show how inflate custom actionbar and implement click listener on title.
|
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 61 |
package com.actionbar_and_menus; import android.content.Context; import android.os.Bundle; import android.support.v7.app.ActionBar; import android.support.v7.app.ActionBarActivity; import android.view.LayoutInflater; import android.view.View; import android.view.View.OnClickListener; import android.widget.Toast; public class CustomActionBar extends ActionBarActivity { ActionBar actionBar; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); // Using the same layout but hiding all widgets setContentView(R.layout.activity_main); findViewById(R.id.show_hide_actionbar).setVisibility(View.GONE); findViewById(R.id.custom_menu).setVisibility(View.GONE); findViewById(R.id.custom_actionbar).setVisibility(View.GONE); actionBar = getSupportActionBar(); // Setting back button on actionbar actionBar.setDisplayHomeAsUpEnabled(true); // Disabling the title over actionbar since we are using custom layout // for it actionBar.setDisplayShowTitleEnabled(false); // Layout inflater service for custom layout LayoutInflater inflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE); // Inflating layout View view = inflater.inflate(R.layout.cusotm_actionbar, null); // Implementing click listeners over actionbar custom title i.e textview // and showing a toast view.findViewById(R.id.custom_actionbar_title).setOnClickListener( new OnClickListener() { @Override public void onClick(View arg0) { Toast.makeText(CustomActionBar.this, "Custom title clicked.", Toast.LENGTH_SHORT) .show(); } }); // setting custom view over actionbar actionBar.setCustomView(view); // enabling custom view actionBar.setDisplayShowCustomEnabled(true); } } |
9. Finally, you are all set and run the app and you will get the output as shown in video.
Thanks. 