Android Overflow Menu on Action Bar Toolbar with Icons Tutorial

The android overflow menu also known as Option Menu is used to show a list of vertical menus with icons inside it. Overflow menu is place above on android application screen at the top right side of it. User can itself customize the over flow menu icons. So in this tutorial we would going to create customized Overflow menu with multiple icons. So let’s get started 🙂 .

Contents in this project Overflow Menu on Action Bar Toolbar Tutorial :

1. Open the build.gradle( Module:app ) file of your project.

2. Add compile ‘com.android.support:design:26.0.0-alpha1’ inside the dependencies block.

3. Download All 5 icons from below and paste it into res -> drawable folder. These are the Overflow menu icons.

4. Now open res -> values -> styles.xml file and replace your code with mine.

<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>

        <!-- Must Add for toolbar  -->
        <item name="windowNoTitle">true</item>

    </style>

</resources>

5. Create a menu file inside res -> menu -> toolbar_main_menu.xml .

Code for toolbar_main_menu.xml file.

<?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/ADD"
        android:title="Add now"
        android:icon="@drawable/ic_add_circle_black"
        app:showAsAction="never"
        />
    <item
        android:id="@+id/CALL_BACK"
        android:title="Call Back"
        android:icon="@drawable/ic_call_black"
        app:showAsAction="never"
        />
    <item
        android:id="@+id/CAMERA"
        android:title="Camera"
        android:icon="@drawable/ic_camera_alt_black"
        app:showAsAction="never"
        />
    <item
        android:id="@+id/CART"
        android:title="CART"
        android:icon="@drawable/ic_shopping_cart_black"
        app:showAsAction="never"
        />
    <item
        android:id="@+id/VIDEO"
        android:title="Video"
        android:icon="@drawable/ic_videocam_black"
        app:showAsAction="never"
        />
</menu>

6. Code for activity_main.xml file.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    >

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        >

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            >
        </android.support.v7.widget.Toolbar>

    </android.support.design.widget.AppBarLayout>

</LinearLayout>

7. Code for MainActivity.java file .

package com.android_examples.overflowmenu_android_examplescom;
import android.graphics.Color;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.view.menu.MenuBuilder;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuInflater;
import android.view.MenuItem;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    Toolbar toolbar ;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        toolbar = (Toolbar)findViewById(R.id.toolbar);

        toolbar.setTitle("Android Overflow Menu Icon Tutorial");

        toolbar.setTitleTextColor(Color.WHITE);

        setSupportActionBar(toolbar);

    }

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

        if(menu instanceof MenuBuilder){

            MenuBuilder menuBuilder = (MenuBuilder) menu;
            menuBuilder.setOptionalIconsVisible(true);
        }

        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {

        switch (item.getItemId()) {
            case R.id.ADD:
                Toast.makeText(getApplicationContext(),"Add Clicked",Toast.LENGTH_LONG).show();
                return true;

            case R.id.CALL_BACK:
                Toast.makeText(getApplicationContext(),"Call Back Clicked",Toast.LENGTH_LONG).show();
                return true;

            case R.id.CAMERA:
                Toast.makeText(getApplicationContext(),"Camera Clicked",Toast.LENGTH_LONG).show();
                return true;

            case R.id.CART:
                Toast.makeText(getApplicationContext(),"Cart Clicked",Toast.LENGTH_LONG).show();
                return true;

            case R.id.VIDEO:
                Toast.makeText(getApplicationContext(),"Video Clicked",Toast.LENGTH_LONG).show();
                return true;

            default:

                super.onOptionsItemSelected(item);

        }
        return true;

    }
}

Screenshots :