Cara Menambahkan Item dan Icon pada Alert Dialog


Assalamualaikum Warahmatullahi Wabarakatuh.

Berikut ini merupakan lanjutan dari tutorial sebelumnya, yaitu Membuat Alert Dialog pada Aplikasi Android. Pada tutorial ini, kita akan belajar cara menambahkan sebuah icon serta item yang akan menjadi opsi pilihan untuk user, item pada Alert Dialog akan terlihat seperti list/daftar item yang bisa discroll ke atas dan kebawah.

Cara Menambahkan Item dan Icon pada Alert Dialog


Materi Lainnya Yang Direkomendasikan:

Cara Menambahkan Item dan Icon pada Alert Dialog

Pertama kita akan membuat sebuah iconnya terlebih dahulu, kalian dapat membuatnya sendiri dengan ukuran 32x32 pixel atau mengambil icon yang sudah disediakan pada Android Studio.

Di tutorial ini kita akan menggunakan icon yang terdapat pada Android Studio, caranya klik kanan pada direktori res > new > Image Asset.

membuat icon untuk alert dialog

Setelah selesai membuat icon, selanjutnya kita akan mengimplementasikannya pada alert dialog, selain itu, kita juga akan membuat Item list pada alert dialog tersebut.

Disini kita akan menggunakan sebuah Button pada ActivityMain, buka activity_main.xml, lalu tambahkan Button menggunakan kode xml, seperti berikut ini:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    android:layout_margin="8dp"
    tools:context="android.cianjur.developer.net.basicandroid.MainActivity">

    <Button
        android:id="@+id/food"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="Menu Makanan" />
    
</RelativeLayout>

Selanjutnya buka file MainActiviy.java pada project, jika kalian sudah membuat Alert Dialog mengikuti tutorial yang saya berikan sebelumnya, sekarang kita akan mengubah source code tersebut menjadi seperti berikut ini:

package android.cianjur.developer.net.basicandroid;

import android.content.DialogInterface;
import android.support.v7.app.AlertDialog;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity{

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Button menu = findViewById(R.id.food);
        menu.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                ShowDialog();
            }
        });
    }

    private void ShowDialog(){
        final String[] makanan = {"Mie Ayam","Bakso","Ayam Goreng","Nasi Goreng","Sate"};
        AlertDialog.Builder alert = new AlertDialog.Builder(this);
        alert.setTitle("Pilih Menu Makanan")
                .setIcon(R.drawable.ic_notificaion)
                .setItems(makanan, new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialogInterface, int i) {
                        switch (i){
                            case 0:
                                Toast.makeText(getApplicationContext(),"Anda Memesan "+makanan[0],Toast.LENGTH_SHORT).show();
                                break;
                            case 1:
                                Toast.makeText(getApplicationContext(),"Anda Memesan "+makanan[1],Toast.LENGTH_SHORT).show();
                                break;
                            case 2:
                                Toast.makeText(getApplicationContext(),"Anda Memesan "+makanan[2],Toast.LENGTH_SHORT).show();
                                break;
                            case 3:
                                Toast.makeText(getApplicationContext(),"Anda Memesan "+makanan[3],Toast.LENGTH_SHORT).show();
                                break;
                            case 4:
                                Toast.makeText(getApplicationContext(),"Anda Memesan "+makanan[4],Toast.LENGTH_SHORT).show();
                                break;
                        }
                    }
                })
                .setCancelable(false);
        alert.show();
    }
}

Penjelasan:

Pertama kita mendeklarasikan variable Array didalamnya terdapat menu yang akan kita tampilkan, lalu untuk menambahkan icon, kita menggunakan fungsi setIcon() yang terdapat pada Alert Dialog dan untuk menambahkan item, kita menggunakan fungsi setItem() dengan OnClickListner().

Didalam OnClickListener tersebut, kita menambahkan aksi pada masing-masing menu yang di klik berdasarkan posisi No Index Array.

Demo:


Screenshot_item dan icon example pada AlertDialog1  Screenshot_item dan icon example pada AlertDialog2 Screenshot_item dan icon example pada AlertDialog3

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

Wassalamualaikum Warahmatullahi Wabarakatuh.

Berlangganan update artikel terbaru via email:

0 Response to "Cara Menambahkan Item dan Icon pada Alert Dialog"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel