How to Implement Options Menu in Android?
In Android, there are three types of Menus available to define a set of options and actions in our android applications. Android Option Menus are the primary menus of android. They can be used for settings, searching, deleting items, etc. When and how this item should appear as an action item in the app bar is decided by the Show Action attribute.
How can we implement Option Menu?
There are two main methods/options we can follow to implement option menu:
- In Action Bar
- In Overflow menu
- Using “ifRoom”
i). Action Bar
app:showAsAction="always"always: This ensures that the menu will always show in the action bar.
Example:
<item
android:id="@+id/send"
android:icon="@android:drawable/ic_menu_send"
android:title="send"
app:showAsAction="always" />
ii). Overflow menu
app:showAsAction="never"never: This means that the menu will never show, and therefore will be available through the overflow menu.
Example:
<item
android:id="@+id/exit"
app:showAsAction="never"
android:title="exit" />
iii). Using “ifRoom”
app:showAsAction="ifRoom"never: The menu item will be displayed in the Action Bar if there is enough room. If there isn’t enough space, it will move to the overflow menu.
Example:
Implementation of Option Menu
Below is the complete code for implementing the Options Menu in Android is given below:
Step 1: Create a New Project in Android Studio
To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio.
The code for that has been given in both Java and Kotlin Programming Language for Android.
Step 2: Create Menu Directory and Menu file
First, we will create a menu director which will contain the menu file. Go to app > res > right-click > New > Android Resource Directory and give the Directory name and Resource type as menu.
Step 3: Setup Menu file
Now, we will create a menu_example file inside that menu resource directory. Go to app > res > menu > right-click > New > Menu Resource File and create a menu resource file and name it popup_menu. In the popup_menu file, we will add menu items. Below is the code snippet for the menu_example.xml file.
menu_example.xml:
<?xml version="1.0" encoding="utf-8"?>
<menu
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="@+id/send"
android:icon="@android:drawable/ic_menu_send"
android:title="send"
app:showAsAction="always" />
<item
android:id="@+id/gallery"
android:icon="@android:drawable/ic_menu_gallery"
android:title="gallery"
app:showAsAction="always" />
<item
android:id="@+id/call"
android:icon="@android:drawable/ic_menu_call"
android:title="call"
app:showAsAction="always" />
<item
android:id="@+id/calculator"
android:icon="@android:drawable/ic_menu_call"
android:title="calculator"
app:showAsAction="ifRoom" />
<item
android:id="@+id/exit"
android:icon="@android:drawable/ic_menu_call"
android:title="exit"
app:showAsAction="ifRoom" />
</menu>
Design UI:
Step 4: Setup MainActivity file
In the MainActivity file, we will add functionalities to each menu options. Here is the code for the MainActivity in both Java and Kotlin.
MainActivity File:
package org.geeksforgeeks.demo;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.Toast;
import androidx.appcompat.app.AppCompatActivity;
public class MainActivity extends AppCompatActivity
{
// Overriding onCreate Method
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
// Overriding onCreateOptionsMenu Method
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu_example, menu);
return true;
}
// Overriding onOptionsItemSelected Method
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId())
{
case R.id.send:
Toast.makeText(getApplicationContext(),
"Shows share icon", Toast.LENGTH_SHORT).show();
return true;
case R.id.gallery:
Toast.makeText(getApplicationContext(),
"Shows image icon", Toast.LENGTH_SHORT).show();
return true;
case R.id.call:
Toast.makeText(getApplicationContext(),
"Shows call icon", Toast.LENGTH_SHORT).show();
return true;
case R.id.calculator:
Toast.makeText(getApplicationContext(),
"Calculator menu", Toast.LENGTH_SHORT).show();
return true;
case R.id.exit:
finish();
return true;
default:
return super.onOptionsItemSelected(item);
}
}
}
package org.geeksforgeeks.demo
import android.os.Bundle
import android.view.Menu
import android.view.MenuItem
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
class MainActivity : AppCompatActivity() {
// Override onCreate Method
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
}
// Override onCreateOptionsMenu Method
override fun onCreateOptionsMenu(menu: Menu): Boolean {
menuInflater.inflate(R.menu.menu_example, menu)
return true
}
// Override onOptionsItemSelected Method
override fun onOptionsItemSelected(item: MenuItem): Boolean {
// Toast the Message according the click
when (item.itemId) {
R.id.send -> {
Toast.makeText(applicationContext,
"Shows share icon", Toast.LENGTH_SHORT).show()
return true
}
R.id.gallery -> {
Toast.makeText(applicationContext,
"Shows image icon", Toast.LENGTH_SHORT).show()
return true
}
R.id.call -> {
Toast.makeText(applicationContext,
"Shows call icon", Toast.LENGTH_SHORT).show()
return true
}
R.id.calculator -> {
Toast.makeText(applicationContext,
"calculator menu", Toast.LENGTH_SHORT).show()
return true
}
R.id.exit -> {
finish()
return true
}
}
return super.onOptionsItemSelected(item)
}
}
Step 4: Setup Themes file (Optional)
We can setup the themes.xml file to change the color of the Action Bar. Here is the code for themes.xml:
themes.xml:
<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name="Base.Theme.Demo" parent="Theme.Material3.DayNight">
<!-- Customize your light theme here. -->
<item name="android:statusBarColor">@android:color/holo_green_dark</item>
<item name="actionBarStyle">@style/AppTheme.ActionBar</item>
</style>
<style name="Theme.Demo" parent="Base.Theme.Demo" />
<style name="AppTheme.ActionBar" parent="Widget.AppCompat.Light.ActionBar">
<item name="background">@android:color/holo_green_light</item>
</style>
</resources>
