Membuat Menu Beserta Icon Menggunakan Alert Dialog

Menu Beserta Icon Pada Item-item Menggunakan Alert Dialog

Pada postingan sebelum-sebelumnya, sudah di tutorialkan mengenai cara membuat Alert Dialog itu sendiri dan juga membuat Options Menu itu sendiri di blog ini. Dan sekarang yang akan di tutorialkan bagaimana cara membuat Menu beserta Icon pada setiap item nya dengan menggunakan Alert Dialog. Disini kita akan membutuhkan sebuah class baru dan adapter untuk menerapkan nya.

Class baru ini dapat di buat langsung pada file java activity atau bisa juga di tempatkan sendiri pada file java baru. Pada contoh ini, kita akan membuat class nya dengan menggunakan file java baru. Namun, bagi Anda yang ingin lebih detail mengenai hal ini, nanti akan di contohkan penempatan nya pada file activity, atau MainActivity.java pada tutorial ini.



Disini kita menggunakan 5 buah icon emoji yang di unduh dari website penyedia icon lalu di letakkan pada folder drawable melalui Vector Asset Maker. Mengenai pembuatan icon dari luar Android studio, Anda dapat melihat nya  pada postingan ini jika belum familiar. Kemudian pada layout activity_main hanya akan ada sebuah komponen Button yang akan memunculkan Alert Dialog yang berisi menu pilihan tersebut.

Gambar 1 : Menu Dengan Icon menggunakan Alert Dialog

Membuat Menu Menggunakan Alert Dialog

Gambar di atas adalah hasil dari tutorial ini. Pada setiap item yang di klik nanti nya akan menampilkan pesan toast pada tutorial ini. Mari kita mulai dari activity_main.xml, dengan membuat sebuah tombol. Berikut ini isi dari activity_main tutorial ini :

<?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"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/menuEmoji"
        android:layout_width="140dp"
        android:layout_height="30dp"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="50dp"
        android:text="Menu Emoji"
        android:background="@android:color/holo_green_dark"
        android:foreground="?android:attr/selectableItemBackground"
        android:textSize="20sp"
        android:textStyle="bold"
        tools:ignore="UnusedAttribute" />

</RelativeLayout>

Efek klik pada sebuah tombol akan hilang jika di berikan atribut android:background, sehingga pada tombol di atas di tambahkan atribut android:foreground untuk memberikan efek perubahan warna saat tombol di klik.

Sekarang ke tahap membuat file java baru untuk class yang pada contoh ini di berikan nama ItemManis.java. Untuk membuat sebuah file java baru, klik kanan pada MainActivity.java > New > Java Class, isikan nama nya lalu klik OK. Perbedaan nya, jika sebuah class di buat pada file java activity, maka class tersebut hanya bisa di pakai untuk activity tersebut. Sedangkan jika sebuah class di buat khusus pada file java baru, maka bisa di gunakan untuk semua activity yang ada. Berikut isi dari ItemManis.java tersebut :

package com.gwnbs.proyekkeempat;

import androidx.annotation.NonNull;

public class ItemManis {
    private final String text;
    final int icon;

    ItemManis(String text, Integer icon) {
        this.text = text;
        this.icon = icon;
    }
    @NonNull
    @Override
    public String toString() {
        return text;
    }
}

Tahap terakhir koding di MainActivity.java, semuanya di lakukan di dalam metode onCreate. Pertama-tama membuat metode click listener untuk tombol nya, lalu di dalam metode onClick View pada click listener tersebut lah semua implementasi di buat. Untuk metode klik pada setiap icon, disini menggunakan metode switch case. Selengkapnya pada MainActivity.java di bawah ini :

package com.gwnbs.proyekkeempat;

import android.content.DialogInterface;
import android.os.Bundle;
import android.view.Gravity;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.Button;
import android.widget.ListAdapter;
import android.widget.TextView;
import android.widget.Toast;

import androidx.annotation.NonNull;
import androidx.appcompat.app.AlertDialog;
import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

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

        Button alertModif = findViewById(R.id.menuEmoji);
        alertModif.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                final ItemManis [] items = {
                        new ItemManis("Tertawa", R.drawable.ic_tertawa),
                        new ItemManis("Menangis", R.drawable.ic_menangis),
                        new ItemManis("Tersenyum", R.drawable.ic_tersenyum),
                        new ItemManis("Marah", R.drawable.ic_marah),
                        new ItemManis("Santai", R.drawable.ic_santai)
                };
                ListAdapter adapter = new ArrayAdapter<ItemManis>(MainActivity.this,
                        android.R.layout.select_dialog_item, android.R.id.text1, items) {
                    public View getView(int position, View counterView, @NonNull ViewGroup parent) {
                        View v = super.getView(position, counterView, parent);
                        TextView tv = v.findViewById(android.R.id.text1);
                        tv.setCompoundDrawablesWithIntrinsicBounds(items[position].icon,0,0,0);
                        int dp5 = (int) (10 * getResources().getDisplayMetrics().density + 0.5f);
                        tv.setCompoundDrawablePadding(dp5);
                        return v;
                    }};
                AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this);
                builder.setNegativeButton("CLOSE", new DialogInterface.OnClickListener() {
                    public void onClick(DialogInterface dialog, int which) {
                        dialog.dismiss();
                    }
                });
                builder.setTitle("DAFTAR EMOJI");
                builder.setAdapter(adapter, new DialogInterface.OnClickListener() {
                    public void onClick(DialogInterface dialog, int which) {
                        switch (which) {
                            case 0:
                                Toast t = Toast.makeText(getBaseContext(),
                                        "Tertawa lah sebelum tertawa dilarang",
                                        Toast.LENGTH_LONG);
                                t.setGravity(Gravity.CENTER,0,0);
                                t.show();
                                break;
                            case 1:
                                t = Toast.makeText(getBaseContext(),
                                        "Menangis lah sebelum menangis dilarang",
                                        Toast.LENGTH_LONG);
                                t.setGravity(Gravity.CENTER,0,0);
                                t.show();
                                break;
                            case 2 :
                                t = Toast.makeText(getBaseContext(),
                                        "Tersenyumlah lah sebelum tersenyum dilarang",
                                        Toast.LENGTH_LONG);
                                t.setGravity(Gravity.CENTER,0,0);
                                t.show();
                                break;
                            case 3 :
                                t = Toast.makeText(getBaseContext(),
                                        "Marah lah sebelum marah dilarang",
                                        Toast.LENGTH_LONG);
                                t.setGravity(Gravity.CENTER,0,0);
                                t.show();
                                break;
                            case 4 :
                                t = Toast.makeText(getBaseContext(),
                                        "Santai lah sebelum santai dilarang",
                                        Toast.LENGTH_LONG);
                                t.setGravity(Gravity.CENTER,0,0);
                                t.show();
                                break;
                        }
                    }
                });
                builder.show();
            }
        });
    }
}

Seperti yang terlihat di atas, di dalam metode onClick View pertama-tama menambahkan item-item untuk menu nya dengan memanggil class yang di buat tadi, lalu menentukan nama untuk item-itemnya, kemudian icon-icon dengan memanggil folder letak icon nya di sertai nama-nama icon nya.

Setelah itu menempatkan sebuah adapter menggunakan ListAdapter, menghubungkan MainActivity dengan layout yang akan memunculkan Menu Alert Dialog nanti nya. Kemudian membuat Alert Dialog itu sendiri, menghubungkan nya dengan adapter, terakhir membuat klik untuk masing-masing item nya.

Kembali ke ItemManis.java, seperti yang sudah di sampaikan di atas; seandainya jika Anda ingin menempatkan class tersebut pada MainActivity.java, Anda copy saja seluruh kode yang ada pada ItemManis.java mulai dari public class ItemManis hingga akhir lalu tempelkan di bagian terakhir pada MainActivity.java sebelum kurung kurawal terakhir. Setelah itu tambahkan static di depan public, sehingga akan menjadi public static class ItemManis.

Static berarti class tersebut menjadi statis atau tetap. Dalam hal kodingan ini, class tersebut menjadi hanya dapat di gunakan pada activity itu saja. Sekian dan terima kasih telah membaca. Jika ada pertanyaan silahkan di posting melalui kolom komentar atau kontak lain yang di sediakan.