How To Create Awesome Menu Icon in Android[2020]

menu icon in android

Welcome to our new post, In this post, we are going to learn how to create a menu Icon in android. If you are new to android development I recommend reading my other blog as well.
By the end of this post, you will able to create this type of menu Icon

Before starting the tutorial, What we are using for creating menu Icon is Android studio IDE, Emulator or real device for testing. So, let’s start our tutorial

Steps to create Menu Icon

Disabling Action Bar

Firstly, we need to remove the default action bar, and then we attach our ready-made toolbar to the app. So go to the Android then res and then values and then styles.xml

Android -> res -> values ->styles.xml

and then Change your parent theme to

Theme.AppCompat.Light.NoActionBar

Your styles.xml should look like this after do changing

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

</resources>

Now, we need to create a custom toolbar. Follow second step

Creating Menu Resource file

Now we need to create a menu resource file where we add menu items that we are using in the toolbar. Yes, First we create a menu file then items, and then we create a toolbar, and then we add a menu item in Toolbar.

So, go to the res then right-click and then new and then Android resource file and select menu from values column and give it any name. The menu folder contains all icons of the toolbar or navigation header.

res -> right click -> new -> Android resource file

creating menu file
Creating menu file

Creating Menu Icons

Now, we need to create some icons that we used in our menu. In this post I am going to create the 3 menu icons first is cart Icon second is Download and third is Log Out.

Now go to res folder then right click and then new and then vector asset, then pop up will open and click on clip art twice.

Now choose any three icons you want to show on the Toolbar menu. Here I am choosing these Icons

creating menu icons
creating menu icons

Adding Menu Items In Resource file

After creating the menu file and Menu Icons we need to add items in the menu file.

Creating menu items is very easy all you need to do is go to res then menu directory and then double click on our menu file. Now add following line of code

<?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/cart"
        android:title="Cart"
        android:icon="@drawable/locj"
        android:orderInCategory="1"
        app:showAsAction="ifRoom"/>
    <item
        android:id="@+id/on_way_status"
        android:title="Status"
        android:icon="@drawable/ic_assignment_returned_black_24dp"
        android:orderInCategory="1"
        app:showAsAction="ifRoom"/>
    <item
        android:id="@+id/log_out"
        android:title="Log Out"
        android:icon="@drawable/logout"
        android:orderInCategory="1"
        app:showAsAction="ifRoom"/>

</menu>

Explanation of Menu Item Code

Now, you will able to see following view in design view of android studio. But do you understand all the stuff.

Let me explain each line of code. The first parent tag is the menu under which we add our menu Items. Then we add three-item tag which represents the three items that we are using in our toolbar

<item
        android:id="@+id/cart"
        android:title="Cart"
        android:icon="@drawable/locj"
        android:orderInCategory="1"
        app:showAsAction="ifRoom"/>

First we add id to our item and then we give item a name by using

 android:title="Cart"

Then we give icon to our menu item as we created above using

android:icon="@drawable/locj"

locj is name of icon and drawable is folder where icon is present and then we use

 android:orderInCategory="1"

android:orderInCategory is an integer attribute that dictates the order in which the menu items will appear within the menu when it is displayed.

app:showAsAction="ifRoom"

This means only place this item in the app bar if there is room for it. If there is not room for all the items marked “ifRoom“, the items with the lowest orderInCategory values are displayed as actions, and the remaining items are displayed in the overflow menu

Creating Custom Toolbar

Now more than half of our work is completed, We need to create a toolbar and add our menu to toolbar. This is very easy and all you need to do is go to your activity_main.xml and paste this code.

  <androidx.appcompat.widget.Toolbar
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:id="@+id/toolbar"
        app:titleTextColor="#FFFFFF"
        android:background="#FF5722"
        app:menu="@menu/menu_toolbar" 
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>

Don’t worry, We explain each line of this code

Explanation of Custom Toolbar Code

What we have done is added a toolbar using this

<androidx.appcompat.widget.Toolbar/>

We set the width of the toolbar to width parent which means toolbar is going to fit with the width of the phone

android:layout_width="match_parent"

Then we set the height of toolbar equals to the height of action bar using the following line of code

android:layout_height="?attr/actionBarSize"

Now we give id to our toolbar and give a text color to our menu items and also give background

android:id="@+id/toolbar"
app:titleTextColor="#FFFFFF"
 android:background="#FF5722"

We set the menu resource file to the toolbar and then theme using the following line of command

app:menu="@menu/menu_toolbar" 
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"

Connecting Toolbar via Java code

Now, we are ready to attach our toolbar via java code. Go to your MainActivity.java file and then Create toolbar and action bar variable like this

 Toolbar toolbar;
    ActionBar actionBar;

Now, Inside your oncreate() method add this

toolbar = findViewById(R.id.toolbar);

setSupportActionBar(toolbar);
menu options
Menu Options

This add your toolbar as action bar. Till now we know, “how to create menu icon in android “

Click Listener on Menu Items

Now, you are able to see the items in the toolbar. But when you try to click them they don’t respond. We are going to sort out this.

You need to override two methods.

First Method is onCreateOptionsMenu() where you inflate your Menu Item like this in the MainActivity.java file

@Override
    public boolean onCreateOptionsMenu(Menu menu) {
        MenuInflater inflater = getMenuInflater();
        inflater.inflate(R.menu.menu, menu);
        return true;
    }

“Inflating” a view means taking the layout XML and parsing it to create the view and view group objects from the elements and their attributes specified within and then adding the hierarchy of those views and view groups to the parent ViewGroup.

Only we need to override the onOptionsItemSelected() method. This method called whenever an item from the menu is clicked.

@Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle item selection
        switch (item.getItemId()) {
            case R.id.cart:
               Log.d("cehck","In Search");
                return true;
            case R.id.log_out:
                      Toast.makeText(getApplicationContext(),"Profile",Toast.LENGTH_SHORT).show();
                return true;
            default:
                return super.onOptionsItemSelected(item);
        }
    }

Whenever you click any menu item, Android calls onOptionsMenu(), and then it matched Id of the menu item that is pressed with all items using switch statement and executes the code of case when it matches.

Conclusion

Finally, we learn how to create menu icon in android and attaching click listener to it. You can learn more about Toolbar here

Tagged :

Leave a Reply

Your email address will not be published. Required fields are marked *