Android PopupMenu Tutorial

View more Tutorials:

1- Android Popup Menu

In Android, Popup Menu is a floating menu that you can create and anchor it to any View. In terms of its interface and use, there is no difference as opposed to a Context Menu.
You can use  Android Resource File (XML) to design the interface of a PopupMenu. However, the  PopupMenu of an application is quite simple, so creating a PopupMenu completely from Java code is also a good choice (See more in the example below).
Note: Some attributes of the  <item> (Menu Item) have no effect when placed in a Popup Menu, for example:
  • app:showAsAction
  • android:icon  (Not work in Android 3.0+/API 11+)

2- An example of the Popup Menu

On  Android Studio, create a new project.
  • Name: PopupMenu
  • Package name: org.o7planning.popupmenuexample
Note: Since  Android 3.0 (API 11)PopupMenu have no longer supported  icons. However, you can copy some  icons below into the drawable folder to support older Android devices, or you can just skip this step.
icon_upload.png icon_bookmark.png icon_share.png
The main interface of the application is very simple with 2 Buttons. When users click on  Button1, a PopupMenu will be displayed and anchored into Button2.
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="Check Me"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="24dp"
        android:text="PopupMenu will anchor on me"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button1" />
</androidx.constraintlayout.widget.ConstraintLayout>
On  Android Studio, select:
  • File > New > Android Resource File
  • File name: layout_popup_menu.xml
  • Resource type: Menu
On  Android Studio, design the interface of the Popup Menu:
Later, set  ID, Title and Icon for the  Menu Items:
layout_popup_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/menuItem_upload"
        android:icon="@drawable/icon_upload"
        android:title="Upload" />
    <item
        android:id="@+id/menuItem_bookmark"
        android:icon="@drawable/icon_bookmark"
        android:title="Bookmark" />
    <item
        android:id="@+id/menuItem_share"
        android:icon="@drawable/icon_share"
        android:title="Share">
        <menu>
            <item
                android:id="@+id/menuItem_facebook"
                android:title="Facebook" />
            <item
                android:id="@+id/menuItem_instagram"
                android:title="Instagram" />
        </menu>
    </item>
</menu>
MainActivity.java
package org.o7planning.popupmenuexample;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.util.Log;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.Button;
import android.widget.PopupMenu;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity  {

    public static final String LOG_TAG =  "PopupMenuExample";

    private Button button1;
    private Button button2;

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

        this.button1 = (Button) findViewById(R.id.button1);
        this.button2 = (Button) findViewById(R.id.button2);

        this.button1.setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View v) {
                button1Clicked( );
            }
        });
    }

    // User click on the Button 1.
    private void button1Clicked( )  {
        // When user click on the Button 1, create a PopupMenu.
        // And anchor Popup to the Button 2.
        PopupMenu popup = new PopupMenu(this, this.button2);
        popup.inflate(R.menu.layout_popup_menu);

        Menu menu = popup.getMenu();
        // com.android.internal.view.menu.MenuBuilder
        Log.i(LOG_TAG, "Menu class: " + menu.getClass().getName());

        // Register Menu Item Click event.
        popup.setOnMenuItemClickListener(new PopupMenu.OnMenuItemClickListener() {
            @Override
            public boolean onMenuItemClick(MenuItem item) {
                return menuItemClicked(item);
            }
        });

        // Show the PopupMenu.
        popup.show();
    }

    // When user click on Menu Item.
    // @return true if event was handled.
    private boolean menuItemClicked(MenuItem item) {
        switch (item.getItemId()) {
            case R.id.menuItem_bookmark:
                Toast.makeText(this, "Bookmark", Toast.LENGTH_SHORT).show();
                break;
            case R.id.menuItem_upload:
                Toast.makeText(this, "Upload", Toast.LENGTH_SHORT).show();
                break;
            case R.id.menuItem_facebook:
                Toast.makeText(this, "Share Facebook", Toast.LENGTH_SHORT).show();
                break;
            case R.id.menuItem_instagram:
                Toast.makeText(this, "Share Instagram", Toast.LENGTH_SHORT).show();
                break;
            default:
                Toast.makeText(this, item.getTitle(), Toast.LENGTH_SHORT).show();
                break;
        }
        return true;
    }
}

 
You can also create a PopupMenu by using Java code only:
// Create a PopupMenu using Java.
public void createPopupMenu(Context activity, View anchorView ) {
    // Create a PopupMenu and anchor it on a View.
    PopupMenu popupMenu = new PopupMenu(activity, anchorView);

    Menu menu = popupMenu.getMenu();

    // groupId, itemId, order, title
    MenuItem menuItemUpload = menu.add(1, 1, 1, "Upload");
    MenuItem menuItemBookmark = menu.add(2, 2, 2, "Bookmark");
    menuItemUpload.setIcon(R.drawable.icon_upload);
    menuItemBookmark.setIcon(R.drawable.icon_bookmark);

    // groupId, itemId, order, title
    SubMenu subMenuShare=  menu.addSubMenu(3, 3, 3, "Share");
    subMenuShare.setIcon(R.drawable.icon_share);

    subMenuShare.add(4, 31, 1, "Google" );
    subMenuShare.add(5, 32, 2, "Instagram");
}

View more Tutorials: