Tutorial Cara Membuat Alert Dialog Sederhana di Android

Di Android terdapat beberapa jenis pop-up dialog, ada Toast, SnackBar, dan ada juga AlertDialog. Alert Dialog adalah sebuah pop up yang muncul pada saat-saat tertentu dan berfungsi untuk memberi info pada pengguna, berbentuk kotak. Pada tutorial ini kita akan membuat Alert Dialog sederhana / bawaan dari Android, AlertDialog basic ini berisi icon (default-nya kosong), title dialog, pesan yang ingin disampaikan dialog itu, dan tombol “Yes” atau “No” yang bisa dicustom.

Membuat Alert Dialog Android menggunakan Android Studio

Langsung saja, untuk menampilkan Alert Dialog di Android, tahap-tahapnya sebagai berikut :

  1. Pertama-tama gunakan AlertDialog.Builder untuk membuat interface dari kotak dialog itu, seperti title, pesan yang ingin ditampilkan, tombol, tombol click listener, dan icon.
  2. Kemudian, menggunakan builder tersebut kita akan membuat object AlertDialog baru.
  3. Gunakan fungsi AlertDialog.show() untuk menampilkan dialog. Selesai.

Oke, pertama-tama buatlah sebuah project baru di Android Studio terlebih dahulu, cara-caranya ada di sini.

Setelah itu buka file layout xml, activity_main.xml, dan isikan kode berikut (layout hanya berisi satu buah tombol).

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:gravity="center_vertical|center_horizontal"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/bt_alert"
        android:layout_width="wrap_content"
        android:text="Munculkan Alert Dialog"
        android:elevation="0dp"
        android:layout_height="wrap_content" />

</LinearLayout>

Kemudian pada MainActivity.java, isikan kode berikut :

/**
 * Created by Hafizh Herdi on 1/7/2017.
 */

public class MainActivity extends AppCompatActivity {

    private Button btAlert;

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

        btAlert = (Button) findViewById(R.id.bt_alert);
        btAlert.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                showDialog();
            }
        });
    }

    private void showDialog(){
        AlertDialog.Builder alertDialogBuilder = new AlertDialog.Builder(
                this);

        // set title dialog
        alertDialogBuilder.setTitle("Keluar dari aplikasi?");

        // set pesan dari dialog
        alertDialogBuilder
                .setMessage("Klik Ya untuk keluar!")
                .setIcon(R.mipmap.ic_launcher)
                .setCancelable(false)
                .setPositiveButton("Ya",new DialogInterface.OnClickListener() {
                    public void onClick(DialogInterface dialog,int id) {
                        // jika tombol diklik, maka akan menutup activity ini
                        TWOHAlertDialog.this.finish();
                    }
                })
                .setNegativeButton("Tidak",new DialogInterface.OnClickListener() {
                    public void onClick(DialogInterface dialog, int id) {
                        // jika tombol ini diklik, akan menutup dialog
                        // dan tidak terjadi apa2
                        dialog.cancel();
                    }
                });

        // membuat alert dialog dari builder
        AlertDialog alertDialog = alertDialogBuilder.create();

        // menampilkan alert dialog
        alertDialog.show();
    }
}

Jika sudah, jangan lupa untuk menambahkan import-import yang kurang. Kemudian bisa langsung dijalankan project aplikasinya.

Oh iya, kode diatas untuk memunculkan dialog dengan dua tombol action, “Yes” or “No”, untuk membuat dialog dengan satu tombol, bisa menggunakan fungsi berikut :

.setNeutralButton("Ok", new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialogInterface, int i) {
                        // do something
                    }
                })

 

Atau kalian juga memanggil ketiga fungsi tersebut untuk membuat Alert Dialog dengan tiga buah tombol, “Yes”, “No” dan “Netral”, namun hal ini jarang dipakai.

Demo

Alert Dialog demo

Jika dijalankan, maka seperti itulah tampilan aplikasinya. Sebelah kanan adalah Alert Dialog dengan dua tombol “Yes” dan “No”, tengah satu tombol netral “Ok” dan sebelah kiri memunculkan tiga-tiganya.

That’s all ! Semoga membantu. 🙂 Jangan lupa untuk clone project nya sebagai Android Studio module di GitHub saya, dengan terlebih dahulu follow dan star project tersebut. Silahkan bertanya di bagian komentar jika ada yang kurang jelas.



Download aplikasi kami di Google Play Store


Leave a Reply