openplanning

Hướng dẫn và ví dụ Android PopupMenu

  1. Android Popup Menu
  2. Ví dụ Popup Menu

1. Android Popup Menu

Trong Android, Popup Menu là một menu nổi (floating menu), bạn có thể tạo ra nó và neo (anchor) nó vào một View bất kỳ. Về mặt giao diện và cách sử dụng nó không có gì khác biệt so với một Context Menu.
Bạn có thể sử dụng Android Resource File (XML) để thiết kế giao diện của một PopupMenu. Tuy nhiên PopupMenu của một ứng dụng thường khá đơn giản, vì vậy tạo ra một PopupMenu hoàn toàn từ mã Java cũng là lựa chọn tốt (Xem thêm trong ví dụ bên dưới).
Chú ý: Một vài thuộc tính (attribute) của <item> (Menu Item) không có tác dụng khi nó được đặt trong một Popup Menu, chẳng hạn:
  • app:showAsAction
  • android:icon (Not work in Android 3.0+/API 11+)

2. Ví dụ Popup Menu

Trên Android Studio tạo mới một project.
  • File > New > New Project > Empty Activity
    • Name: PopupMenu
    • Package name: org.o7planning.popupmenuexample
    • Language: Java
Chú ý: Bắt đầu từ Android 3.0 (API 11), PopupMenu không hỗ trợ các Icon, tuy nhiên bạn có thể copy các Icon dưới đây vào thư mục drawable để hỗ trợ các thiết bị Android cũ, hoặc bỏ qua bước này.
icon_upload.png
icon_bookmark.png
icon_share.png
Giao diện chính của ứng dụng rất đơn giản, bao gồm 2 Button, khi người dùng nhấn vào Button1, một PopupMenu sẽ hiển thị và được neo (anchor) vào 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>
Trên Android Studio chọn:
  • File > New > Android Resource File
  • File name: layout_popup_menu.xml
  • Resource type: Menu
Trên Android Studio thiết kế giao diện cho Popup Menu:
Sét đặt ID, Title, Icon cho các Menu Item:
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;
    }
}
Bạn cũng có thể tạo ra một PopupMenu hoàn toàn bằng mã Java:
// 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");
}

Các hướng dẫn lập trình Android

Show More