Dialog biasanya digunakan sebagai elemen antarmuka pengguna dalam aplikasi Android untuk berinteraksi dengan pengguna, seperti menampilkan informasi, meminta konfirmasi, atau memberikan opsi. Pada tutorial kali ini kita akan mempelajari cara membuat kotak dialog custom di Android menggunakan bahasa Java atau Kotlin.
Siapkan Proyek Android
Pertama, pastikan Anda telah membuat proyek Android yang berfungsi di Android Studio. Jika tidak, buka Android Studio dan buat proyek baru. Pilih template “Aktivitas Kosong” dan tentukan nama proyek dan bahasa pemrograman pilihan Anda (Java atau Kotlin).
Tambahkan Tata Letak Dialog Kustom
Kotak dialog khusus memungkinkan Anda mendesain antarmuka sesuai kebutuhan Anda. Untuk melakukan ini, Anda perlu membuat file tata letak XML baru untuk digunakan oleh kotak dialog.
Membukares/tata letakfolder dan buat file XML baru, mis.custom_dialog.xml。
Dalam file ini, tentukan tata letak kotak dialog. Berikut ini contoh tata letak dengan dua tombol dan teks:
xml
Salin kode
<?xml versi=”1.0″ pengkodean=”utf-8″?>
<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:orientasi=”vertikal”
android:padding=”16dp”
android:latar belakang=”#FFFFFF”
android:layout_gravity=”pusat”>
<Tampilan Teks
android:id=”@+id/dialogTeks”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”Apakah Anda yakin ingin melanjutkan?”
android:ukuranteks=”18sp”
android:layout_marginBottom=”20dp”/>
<Tata Letak Linier
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:orientasi=”horizontal”
android:gravity=”akhir”>
<Tombol
android:id=”@+id/btnBatal”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”Batal”/>
<Tombol
android:id=”@+id/btnOk”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:teks=”Oke”
android:layout_marginLeft=”10dp”/>
</Tata Letak Linier>
</Tata Letak Linier>
Tambahkan Logika Dialog di Aktivitas Utama
Setelah membuat tata letak dialog khusus, Anda dapat memanggil dialog di aktivitas utama Anda.
MembukaAktivitas Utama.javaatauAktivitas Utama.kt, dan tambahkan kode berikut untuk menampilkan dialog khusus saat pengguna mengklik tombol.
Salin kode
impor Android.os.Bundle;
impor android.view.View;
impor android.widget.Tombol;
impor android.widget.TextView;
impor androidx.appcompat.app.AlertDialog;
impor androidx.appcompat.app.AppCompatActivity;
impor android.view.LayoutInflater;
kelas publik MainActivity memperluas AppCompatActivity {
@Mengesampingkan
protected void onCreate(Paket yang disimpanInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Tombol showDialogButton = findViewById(R.id.showDialogButton);
showDialogButton.setOnClickListener(Tampilan baru.OnClickListener() {
@Mengesampingkan
public void onClick(Lihat v) {
showCustomDialog();
}
});
}
kekosongan pribadi showCustomDialog() {
Inflater LayoutInflater = getLayoutInflater();
Lihat dialogView = inflater.inflate(R.layout.custom_dialog, null);
AlertDialog.Builder dialogBuilder = new AlertDialog.Builder(ini);
dialogBuilder.setView(dialogView);
TextView dialogText = dialogView.findViewById(R.id.dialogText);
Tombol btnCancel = dialogView.findViewById(R.id.btnCancel);
Tombol btnOk = dialogView.findViewById(R.id.btnOk);
dialog AlertDialog terakhir = dialogBuilder.create();
dialog.show();
btnCancel.setOnClickListener(Tampilan baru.OnClickListener() {
@Mengesampingkan
public void onClick(Lihat v) {
dialog.dismiss();
}
});
btnOk.setOnClickListener(Tampilan baru.OnClickListener() {
@Mengesampingkan
public void onClick(Lihat v) {
// Jalankan logika tombol OK
dialog.dismiss();
}
});
}
}
Kotlin:
kotlin
Salin kode
impor Android.os.Bundle
impor android.view.LayoutInflater
impor android.view.View
impor Android.widget.Tombol
impor android.widget.TextView
impor androidx.appcompat.app.AlertDialog
impor androidx.appcompat.app.AppCompatActivity
kelas MainActivity : AppCompatActivity() {
ganti kesenangan onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.aktivitas_main)
val showDialogButton: Tombol = findViewById(R.id.showDialogButton)
showDialogButton.setOnClickListener {
tampilkanDialog Khusus()
}
}
kesenangan pribadi showCustomDialog() {
val inflater = layoutInflater
val dialogView: Lihat = inflater.inflate(R.layout.custom_dialog, null)
val dialogBuilder = AlertDialog.Builder(ini)
dialogBuilder.setView(dialogView)
val dialogText: TextView = dialogView.findViewById(R.id.dialogText)
val btnCancel: Tombol = dialogView.findViewById(R.id.btnCancel)
val btnOk: Tombol = dialogView.findViewById(R.id.btnOk)
val dialog = dialogBuilder.create()
dialog.tampilkan()
btnCancel.setOnClickListener {
dialog.dismiss()
}
btnOk.setOnClickListener {
// Jalankan logika tombol OK
dialog.dismiss()
}
}
}
Tambahkan Tombol ke Dialog Panggilan
adaaktivitas_main.xml, Anda dapat menambahkan tombol yang memicu tampilan kotak dialog khusus.
xml
Salin kode
<Tombol
android:id=”@+id/showDialogButton”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”Tampilkan kotak dialog”
android:layout_centerInParent=”benar”/>
Uji Aplikasinya
Sekarang Anda dapat menjalankan aplikasinya di emulator atau perangkat Android. Saat Anda mengklik tombol Tampilkan Dialog, dialog khusus akan ditampilkan dengan dua tombol: “Batal” dan “OK”. Mengklik tombol ini akan menutup dialog.
Kesimpulan
Membuat kotak dialog khusus di Android memberi Anda fleksibilitas untuk merancang antarmuka pengguna sesuai dengan kebutuhan aplikasi Anda. Dengan menggunakanAlertDialog.Builderdan tata letak XML khusus, Anda dapat membuat kotak dialog yang lebih interaktif dan menarik. Selain itu, Anda dapat memodifikasi lebih lanjut kotak dialog sesuai kebutuhan Anda, seperti mengambil input pengguna atau menampilkan pesan khusus.
