Android Overflow Menu on Action Bar Toolbar with Icons Tutorial

https://www.android-examples.com/category/android-examples-tutorials/

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 :