Rabu, 22 April 2020

Cara Buat Android AlertDialog Dengan Opsi List

Tags

android_alertdialog


AlertDialog adalah cara paling sederhana untuk mendapatkan respon dari pengguna dengan memberikan mereka daftar opsi untuk dipilih. Posting ini akan membahas bagaimana cara buat alert dialog box dengan opsi list menggunakan android studio.

Jika kita membaca dokumentasi resmi, disitu sudah diterangkan bahwa ada tiga jenis list yang dapat digunakan dengan AlertDialog di android:
  • Traditional single-choice list
  • Persistent single-choice list (tombol radio)
  • Persistent multiple-choice list (kotak centang)
Dalam Tutorial ini saya akan membuat demo untuk semua 3 jenis AlertDialog with option list.

Dasar untuk membuat Alert Dialog Box

// setup alert builder
 AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this);
        builder.setTitle("Choose an Option");

Buat AlertDialog dan tampilkan ke user

// add list
        String[] options = {"Option1", "Option2", "Option3", "Option4", "Option3"};

Traditional Single-Choice Android AlertDialog List

traditional_single_choice_android_alert_dialog_list


Cara menggunakan single-choice tradisional adalah dengan menggunakan setItems method.

Panggil function button klik di bawah ini:

public void TraditionallistDialog()
    {
        // setup alert builder
        AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this);
        builder.setTitle("Choose an Option");
        // buat array list
        String[] options = {"Option1", "Option2", "Option3", "Option4", "Option3"};
        //Pass array list di Alert dialog
        builder.setItems(options, new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialog, int which) {
                switch (which) {
                    case 0: // pilih opsi
                    case 1: // Konfigurasikan sesuai kebutuhan di sini
                    case 2:
                    case 3:
                    case 4:
                }
            }
        });
        // buat dan tampilkan alert dialog
        AlertDialog dialog = builder.create();
        dialog.show();
    }

Untuk Tradisional list, kita tidak perlu mengatur tombol positif, karena pengguna memilih daftar mana saja dari AlertDialog item dan akan secara otomatis dipilih dan AlertDialog ditutup.

Radio Button Single-Choice Android AlertDialog List

radio_button_single_choice_android_alertdialog_list


Kelebihan dari Radio button single-choice daripada list tradisional adalah user bisa memeriksa mana yang merupakan pilihan default dalam list sedangkan list Tradisional tidak ada pilihan default.

Cara membuat radio button list adalah dengan menggunakan setSingleChoiceItems.

Panggil function button klik di bawah ini:

public  void radiolistDialog()
    {
        // setup alert builder
        AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this);
        builder.setTitle("Choose a Option");
        // buat radio button list
        final String[] selectedoption = {"Option1", "Option2", "Option3", "Option4", "Option5"};
        int checkedItem = 1; // cow
        builder.setSingleChoiceItems(selectedoption, checkedItem, new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialog, int which) {
                // user check item
                Toast.makeText(MainActivity.this,"selected option: "+selectedoption[which],Toast.LENGTH_LONG).show();
                //di sini 'which' adalah posisi yang dipilih
            }
        });
       // tambah tombol OK dan Cancel
        builder.setPositiveButton("OK", new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialog, int which) {
                // user clicked OK
            }
        });
        builder.setNegativeButton("Cancel", null);
        // buat dan tampilkan alert dialog
        AlertDialog dialog = builder.create();
        dialog.show();
    }

Di radio button list kita dapat menerapkan 2 jenis tombol di kotak AlertDialog yaitu setPositiveButton () dan setNegativeButton () dengan tindakan yang berbeda.

Checkbox Choice Android AlertDialog List

checkbox_choice_android_alertdialog_list


Checkbox AlertDialog memungkinkan user dapat memilih beberapa opsi dari opsi yang diberikan.

Cara membuat checkbox list adalah dengan menggunakan setMultiChoiceItems.

public void checkboxlistDialog()
    {
        // setup alert builder
        AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this);
        builder.setTitle("Choose some Options ");
        // buat checkbox list
        String[] selectedoption = {"Option1", "Option2", "Option3", "Option4", "Option5"};
        final boolean[] checkedItems = {true, false, false, false, false};
        builder.setMultiChoiceItems(selectedoption, checkedItems, new DialogInterface.OnMultiChoiceClickListener() {
            @Override
            public void onClick(DialogInterface dialog, int which, boolean isChecked) {
                // user mencentang atau menghapus centang pada kotak
            }
        });
       // tambah tombol OK dan Cancel
        builder.setPositiveButton("OK", new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialog, int which) {
                // user klik OK
            }
        });
        builder.setNegativeButton("Cancel", null);
        // buat dan tampilkan alert dialog
        AlertDialog dialog = builder.create();
        dialog.show();
    }

Source Code Lengkap Alert Dialog With List of Options:

activitymain.xml for UI Design

<?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">
    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Alert Dialog box with List "
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.07" />
    <Button
        android:id="@+id/listdialog1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="48dp"
        android:text="Simple list"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.498"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView" />
    <Button
        android:id="@+id/radiolist"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="28dp"
        android:text="Radio button list"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.498"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/listdialog1" />
    <Button
        android:id="@+id/checkboxlist"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="40dp"
        android:text="Checkbox list"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.498"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/radiolist" />
</androidx.constraintlayout.widget.ConstraintLayout>

MainActivity.java

package ekarzaen.com.customalertdialog;
import androidx.appcompat.app.AlertDialog;
import androidx.appcompat.app.AppCompatActivity;
import android.content.DialogInterface;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity {
    Button simplelist,radiolist,checkboxlist;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        simplelist=(Button)findViewById(R.id.listdialog1);
        radiolist=(Button)findViewById(R.id.radiolist);
        checkboxlist=(Button)findViewById(R.id.checkboxlist);
     simplelist.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                simplelistDialog();
            }
        });
     radiolist.setOnClickListener(new View.OnClickListener() {
         @Override
         public void onClick(View view) {
             radiolistDialog();
         }
     });
     checkboxlist.setOnClickListener(new View.OnClickListener() {
         @Override
         public void onClick(View view) {
             checkboxlistDialog();
         }
     });
    }

    public void simplelistDialog()
    {
        // setup alert builder
        AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this);
        builder.setTitle("Choose an Option");
        // buat array list
        String[] options = {"Option1", "Option2", "Option3", "Option4", "Option3"};
        //Pass array list di Alert dialog
        builder.setItems(options, new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialog, int which) {
                switch (which) {
                    case 0: // pilih opsi
                    case 1: // Konfigurasikan sesuai kebutuhan di sini
                    case 2:
                    case 3:
                    case 4:
                }
            }
        });

        // buat dan tampilkan alert dialog
        AlertDialog dialog = builder.create();
        dialog.show();
    }

    public  void radiolistDialog()
    {
        // setup the alert builder
        AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this);
        builder.setTitle("Choose a Option");

        // buat radio button list
        final String[] selectedoption = {"Option1", "Option2", "Option3", "Option4", "Option5"};
        int checkedItem = 1; // cow
        builder.setSingleChoiceItems(selectedoption, checkedItem, new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialog, int which) {
                // user memeriksa item
                Toast.makeText(MainActivity.this,"selected option: "+selectedoption[which],Toast.LENGTH_LONG).show();
                //di sini 'which' adalah posisi yang dipilih
            }
        });

        // tambah tombol OK dan Cancel
        builder.setPositiveButton("OK", new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialog, int which) {
                // user klik OK
            }
        });
        builder.setNegativeButton("Cancel", null);

        // buat dan tampilkan alert dialog
        AlertDialog dialog = builder.create();
        dialog.show();
    }

   public void checkboxlistDialog()
    {
        // setup alert builder
        AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this);
        builder.setTitle("Choose some Options ");
        // buat checkbox list
        String[] selectedoption = {"Option1", "Option2", "Option3", "Option4", "Option5"};
        final boolean[] checkedItems = {true, false, false, false, false};
        builder.setMultiChoiceItems(selectedoption, checkedItems, new DialogInterface.OnMultiChoiceClickListener() {
            @Override
            public void onClick(DialogInterface dialog, int which, boolean isChecked) {
                // user mencentang atau menghapus centang pada kotak
            }
        });

        // tambah tombol OK dan Cancel
        builder.setPositiveButton("OK", new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialog, int which) {
                // user klik OK
            }
        });
        builder.setNegativeButton("Cancel", null);

        // buat dan tampilkan alert dialog
        AlertDialog dialog = builder.create();
        dialog.show();
    }
}


EmoticonEmoticon