Belajar Membuat Menu Popup pada Android Studio


Assalamualaikum Waramatullahi Wabarakatuh.

Menu Popup adalah sekumpulan aksi yang dipasangkan pada sebuah View, jenis menu ini dapat diakses oleh user, dengan cara mengklik View tersebut, contohnya pada sebuah Button, ketika Button tersebut diklik, maka akan menampilkan daftar pilihan yang tersedia. Menu Popup ini tersedia dan juga diperkenlkan sejak API Level 11 (HONEYCOMB).


Pada tutorial ini, kita akan belajar, bagaimana cara membuat serta menggunakan Menu Popup pada Aplikasi Android, menggunakan Android Studio. Untuk itu mari kita simak tutorial berikut ini.

Materi lainnya yang direkomendasikan:

Belajar Membuat Menu Popup pada Android Studio

Buka aplikasi Android Studio kalian, Buat Project Baru.

Buka file activity_main.xml pada project kalian, pada contoh berikut ini, kita akan menggunakan sebuah Button, sebagai objek percobaan untuk Menu Popup.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="8dp"
    android:background="#FFF5F5F5"
    tools:context="android.cianjur.developer.net.basicandroid.MainActivity">

    <Button
        android:id="@+id/popup"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="Pilih Menu Makanan" />
    
</RelativeLayout>
Disini kita perlu membuat menunya terlebih dahulu, caranya : Klik kanan pada direktori res > New > Android resource directory, seperti pada gambar berikut ini.


Selanjutnya pilih menu pada Resource type, lalu setelah itu klik Ok.


Disana akan telihat direktori baru bernama menu, klik kanan pada direkotr tersebut, pilih New > Menu resource file, lalu berinama, misalnya "contoh_menu".


Selanjutnya kita akan membuat beberapa menu dengan menggunakan kode xml, untuk membuatnya, kita perlu menambahkan tag <item> dan juga beberapa atribut tambahan lalinnya, seperti id, title, dsb. Contohnya seperti ini:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:id="@+id/menu1"
        android:title="Ayam Goreng"/>

    <item android:id="@+id/menu2"
        android:title="Mie Rebus"/>

    <item android:id="@+id/menu3"
        android:title="Bakso"/>

    <item android:id="@+id/menu4"
        android:title="Mie Ayam"/>

</menu>
Selanjutnya kita buka file MainActivity.java. Lalu masukan source code berikut ini:
package android.cianjur.developer.net.basicandroid;

/*
 Dibuat Oleh WILDAN M ATHOILLAH
 */

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
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 implements PopupMenu.OnMenuItemClickListener {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Button showMenu = findViewById(R.id.popup);
        showMenu.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                //Membuat Instance/Objek dari PopupMenu
                PopupMenu popupMenu = new PopupMenu(MainActivity.this, view);
                popupMenu.setOnMenuItemClickListener(MainActivity.this);
                popupMenu.inflate(R.menu.contoh_menu);
                popupMenu.show();
            }
        });
    }

    //Menthod ini digunakan untuk menangani kejadian saat MenuPopup diklik
    @Override
    public boolean onMenuItemClick(MenuItem menuItem) {
        switch (menuItem.getItemId()){
            case R.id.menu1:
                Toast.makeText(getApplicationContext(),"Anda Memesan Ayam Goreng",Toast.LENGTH_SHORT).show();
                break;
            case R.id.menu2:
                Toast.makeText(getApplicationContext(),"Anda Memesan Mie Rebus",Toast.LENGTH_SHORT).show();
                break;
            case R.id.menu3:
                Toast.makeText(getApplicationContext(),"Anda Memesan Bakso",Toast.LENGTH_SHORT).show();
                break;
            case R.id.menu4:
                Toast.makeText(getApplicationContext(),"Anda Memesan Mie Ayam",Toast.LENGTH_SHORT).show();
                break;

        }
        return true;
    }
}
Penjelasan:

Pada Button tersebut, kita membuat sebuah Instance/Objek dari PopupMenu dengan parameter 2 parameter yaitu: Instance Activiy dan Instance View yang akan dikaitkan dengan PopupMenu.

Selelah itu menambahkan listener untuk Menu/Item supaya bisa diklik, dengan menggunakan fungsi setOnMenuItemClickListener(), dengan parameter berupa Instance Activity kita saat ini.

Lalu menautkan menu yang sudah kita buat tadi, dengan menggunakan fungsi inflate(), dan menampilkan menu tersebut menggunakan fungsi show().

Dengan menggunakan fungsi onMenuItemClick(), kita dapat menangani kejadian pada saat menu Popup diklik, pada method tersebut kita menggunakan statement switch untuk menentukan kejadian pada masing-masing opsi dengan mendapatkan id pada setiap menu item, jika salah satu menu diklik, maka akan tampil pesan singkat menggunakan Toast.

Demo:



Terimakasih atas kunjungannya, semoga tutorial yang saya berikan bisa bermanfaat untuk kalian semua, selebihnya, mohon maaf bila ada kesalahan.

Wassalamualaikum Warahmatullahi Wabarakatuh.

Wildan M Athoillah
Wildan M Athoillah Blogger dan spesialis pembuat aplikasi android.