Android Option Menu with Icon (Adding Icon to Menu Item and App Bar)

android_learners_hub

Previous

Index📑

📗How to add an Image Icon in App Bar?

📙How to add Image Icon in Menu Items and Sub Menu Items?

How to add an Image Icon in App Bar?

You can create an Image icon menu with the help of "android:icon "attribute (in menu.xml file) .You also have to write app:showAsAction="ifRoom" with android:icon="@drawable/icon_name" inside  <item> tag. Then, your icon will display on App bar. The Menu Item with the attribute of app:showAsAction="ifRoom" will be displayed on the App Bar if there is enough space for it. As soon as it appears on the App Bar, you won't see it on the Overflow Menu. The Menu Item with the attribute of  app:showAsAction="always" will always be shown on the App Bar, and you will not see it on the Overflow Menu.In short android:showAsAction="value"  define  when and how the item should appear as an action item in the app bar. The image below describes the value of this attribute.

   

Code for menu.xml file

Output

How to add Image Icon in Menu Items and Sub Menu Items?

Step 1 Go to theme.xml and  theme.xml(night).

Change the parent theme to parent="Theme.AppCompat.Light.NoActionBar" in both files.

<style name="Theme.Menu_Android" parent="Theme.AppCompat.Light.NoActionBar">

Step 2 Now, open activity_main.xml file and add toolbar in it to create app bar. You can also drag and drop it from Containers in Palette.

Code for activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    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"
    tools:context=".MainActivity">

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="?attr/colorPrimary"
        android:minHeight="?attr/actionBarSize"
        android:theme="?attr/actionBarTheme" />
</LinearLayout>

Step 3 Create a resource file for creating menus I am here using the Option menu app that I created recently. I will add Image Icon in it. I will use the Image from vector asset (go to res --> new --> vector asset --> select image-->next -->finish).

Here, we have total 4 menu items in which 1 is root (3+1=4) , we also have 2 sub menus shown as below. The root menu will contain rest 3 menu and 2 sub menus.

Code  for option_menu.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:id="@+id/menu_0"
        android:icon="@drawable/ic_baseline_create_24"
        android:title="create"
        app:showAsAction="ifRoom">

    </item>
<item android:id="@+id/menu"
    android:title=""
    android:icon="@drawable/menu"
    app:showAsAction="always"
    >
    <menu>
    <item
        android:id="@+id/menu_1"
        android:title="New Menu"
        android:icon="@drawable/ic_baseline_plus_one_24"
        app:showAsAction="ifRoom"
        />
    <item
        android:id="@+id/menu_2"
        android:icon="@drawable/ic_baseline_settings_24"
        android:title="Settings"
        app:showAsAction="ifRoom">
        <menu>
            <item android:id="@+id/sub_menu1"
                  android:title="Text Size"
                  android:icon="@drawable/textsize"
                 app:showAsAction="ifRoom"
                  ></item>
            <item android:id="@+id/sub_menu2"
                android:title="Text Style"
                android:icon="@drawable/text_style"
                app:showAsAction="ifRoom"></item>
        </menu>
    </item>
    <item
        android:id="@+id/menu_3"
        android:title="Exit"
        android:icon="@drawable/ic_exit"
        app:showAsAction="ifRoom"
        />
    </menu>
</item>
    </menu>

Step 4 Now its time to add Toolbar , inflate menu file and create respond to user action in java file.

package com.example.menu_android;

import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.Toolbar;

import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //declare the toolbar and give the toolbar the ability to have those options menu show up
        Toolbar mToolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(mToolbar);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // inflate option_menu.xml file
        getMenuInflater().inflate(R.menu.option_menu,menu);
        return super.onCreateOptionsMenu(menu);
    }

    @Override
    public boolean onOptionsItemSelected(@NonNull MenuItem item) {
        // respond to user action by showing toast messages.
        switch(item.getItemId()){
                case R.id.menu_1:
                Toast.makeText(this, "New Menu is selected.",Toast.LENGTH_LONG).show();
                return true;

                case R.id.menu_3:
                Toast.makeText(this, "Exit is selected.",Toast.LENGTH_LONG).show();
                return true;

                case R.id.sub_menu1:
                Toast.makeText(this, "Text Size is selected.",Toast.LENGTH_LONG).show();
                return true;

                case R.id.sub_menu2:
                Toast.makeText(this, "Text Style is selected.",Toast.LENGTH_LONG).show();
                return true;

                default:
                return super.onOptionsItemSelected(item);

        }


    }
}

Output :  When we run above example using an android virtual device (AVD) we will get a result like as shown below.