Membuat Custom Dialog Box Pada AIDE

Kali ini kita akan membahas tentang cara membuat custom dialog box pada AIDE, yang merupakan kelanjutan atau pilihan lain dari pembuatan dialog box yang telah dibahas pada pertemuan sebelumnya.

Baca:

Jadi sekarang sudah terdapat beberapa pilihan dalam memberikan informasi atau melakukan konfirmasi kepada pengguna aplikasi melalui dialog box. Jika pada artikel sebelumnya kita hanya membuat fungsi untuk memanggil dialog box bawaan android, dialog box yang akan dibuat ini sedikit berbeda dengan dialog box pada bawaan android, sebab dalam pembuatannya kita akan membutuhkan layout yang tampilannya dapat dibuat sesuai kebutuhan dan keinginan.

Disini kita akan membuat dua buah dialog box dengan fungsi yang berbeda, yaitu dialog box untuk memberikan informasi dan dialog box untuk melakukan konfirmasi. Untuk tahap awal ini sebaiknya ikuti dulu langkah-langkahnya, jika sudah berhasil silahkan melakukan modifikasi dan improvisasi.

Langkah-langkah membuat custom dialog box pada AIDE

Berikut ini merupakan langkah-langkah dalam membuat custom dialog box pada AIDE.

Buat project baru

Seperti biasanya jalankan aplikasi AIDE pada android dan buatlah project baru dengan atribut berikut ini.

Name : CustomDialog

Package name : com.custom.dialog

Buat layout utama

Buka file main.xml dan sesuaikan kodenya seperti dibawah ini.


<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_height="match_parent"
 android:layout_width="match_parent">

 <LinearLayout
  android:layout_height="wrap_content"
  android:layout_width="match_parent"
  android:orientation="horizontal"
  android:id="@+id/mainLinearLayout1"
  android:layout_alignParentTop="true"
  android:gravity="center_horizontal">

  <ImageView
   android:layout_height="250dp"
   android:layout_width="250dp"
   android:src="@drawable/clogo"/>

 </LinearLayout>

 <Button
  android:layout_height="60dp"
  android:layout_width="match_parent"
  android:text="Buka Custom Dialog"
  android:layout_below="@id/mainLinearLayout1"
  android:id="@+id/bt_showdialog"
  android:layout_marginTop="30dp"
  android:layout_marginLeft="20dp"
  android:layout_marginRight="20dp"/>

 <Button
  android:layout_height="60dp"
  android:layout_width="match_parent"
  android:text="Keluar"
  android:layout_below="@id/bt_showdialog"
  android:layout_marginTop="15dp"
  android:id="@+id/bt_keluar"
  android:layout_marginLeft="20dp"
  android:layout_marginRight="20dp"/>

</RelativeLayout>

Pada layout utama ini terdapat dua buah tombol yang masing-masing berfungsi untuk memanggil atau menampilkan dialog box. Tampilannya akan seperti gambar screenshot diatas.

Buat layout baru

Didalam folder layout buat dua buah file beri nama custom_dialog.xml dan dialog_keluar.xml, kemudian masukkan kode dibawah ini pada masing-masing file tersebut.

custom_dialog.xml


<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:orientation="vertical">

 <RelativeLayout
  android:layout_height="wrap_content"
  android:layout_width="match_parent"
  android:id="@+id/customdialogRelativeLayout1"
  android:layout_alignParentTop="true">

  <ImageView
   android:id="@+id/icon"
   android:layout_width="25dp"
   android:layout_height="25dp"
   android:layout_margin="5dp"
   android:layout_marginTop="10dp"/>

  <TextView
   android:padding="5dp"
   android:id="@+id/teks"
   android:layout_width="fill_parent"
   android:layout_height="wrap_content"
   android:layout_margin="5dp"
   android:layout_toRightOf="@+id/icon"/>

 </RelativeLayout>

 <LinearLayout
  android:layout_height="wrap_content"
  android:layout_width="match_parent"
  android:orientation="horizontal"
  android:id="@+id/customdialogLinearLayout1"
  android:layout_below="@+id/customdialogRelativeLayout1"
  android:gravity="bottom|right"
  android:weightSum="2">

  <LinearLayout
   android:layout_height="match_parent"
   android:layout_width="wrap_content"
   android:orientation="horizontal"
   android:layout_weight="1"
   android:gravity="center">

   <ImageView
    android:layout_height="100dp"
    android:layout_width="200dp"
    android:src="@drawable/clogo"/>

  </LinearLayout>

  <LinearLayout
   android:layout_height="match_parent"
   android:layout_width="wrap_content"
   android:orientation="horizontal"
   android:layout_weight="1"
   android:gravity="bottom|right">

   <Button
    android:id="@+id/btn_ok"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="5dp"
    android:text="OK"
    android:layout_alignParentRight="true"
    android:layout_marginLeft="100dp"/>

  </LinearLayout>

 </LinearLayout>

</RelativeLayout>

dialog_keluar.xml


<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:orientation="vertical">

 <LinearLayout
  android:layout_height="150dp"
  android:layout_width="match_parent"
  android:id="@+id/LinearLayout1"
  android:gravity="center_horizontal">

  <ImageView
   android:layout_height="wrap_content"
   android:layout_width="wrap_content"
   android:src="@drawable/clogo"/>

 </LinearLayout>

 <LinearLayout
  android:layout_height="wrap_content"
  android:layout_width="match_parent"
  android:orientation="horizontal"
  android:weightSum="2.0"
  android:layout_below="@id/LinearLayout1">

  <Button
   android:layout_height="wrap_content"
   android:layout_width="10dp"
   android:text="TIDAK"
   android:layout_margin="5dp"
   android:id="@+id/btn_no"
   android:layout_weight="1.0"/>

  <Button
   android:id="@+id/btn_yes"
   android:layout_width="10dp"
   android:layout_height="wrap_content"
   android:layout_margin="5dp"
   android:text="YA"
   android:layout_alignParentRight="true"
   android:layout_weight="1.0"/>

 </LinearLayout>

</RelativeLayout>

Buat file gambar

Buka folder res dan buat folder baru didalamnya, beri nama drawable kemudian masukkan sebuah file gambar didalamnya yang bernama clogo.

Kedua layout diatas membutuhkan file gambar yang dimasukkan kedalam folder drawable yaitu clogo.png atau clogo.jpg agar tidak terjadi error saat melakukan build project.

Membuat kode java

Sekarang saatnya membuat kode java untuk aplikasi. Kode java ini berisi perintah untuk membuat dialog box dan perintah untuk memanggil atau menampilkan dialog box tersebut. Buka file MainActivity.java dan buat kodenya seperti berikut ini.


package com.custom.dialog;

import android.app.*;
import android.os.*;
import android.view.*;
import android.widget.*;

public class MainActivity extends Activity 
{
    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
  
  Button btnShow = (Button) findViewById(R.id.bt_showdialog);
  btnShow.setOnClickListener(new View.OnClickListener() 
   {
    @Override
    public void onClick(View v)
    {
     /* Inisiasi Custom Dialog */
     final Dialog dialog = new Dialog(MainActivity.this);
     dialog.setContentView(R.layout.custom_dialog);
     dialog.setTitle("www.caraliyo.com");
     dialog.setCancelable(false);

     /* Mengeset komponen dari custom dialog */
     TextView text = (TextView) dialog.findViewById(R.id.teks);
     text.setText("Ini adalah custom dialog yang menggunakan layout.");
     ImageView image = (ImageView) dialog.findViewById(R.id.icon);
     image.setImageResource(R.drawable.ic_launcher);

     Button dialogButton = (Button) dialog.findViewById(R.id.btn_ok);
     /* Jika tombol diklik, tutup dialog */
     dialogButton.setOnClickListener(new View.OnClickListener() {
       @Override
       public void onClick(View v)
       {
        dialog.dismiss();
       }
      });

     dialog.show();

    }
   });


  Button btnKeluar = (Button) findViewById(R.id.bt_keluar);
  btnKeluar.setOnClickListener(new View.OnClickListener() 
   {
    @Override
    public void onClick(View v)
    {

     // Inisiasi Dialog Keluar
     final Dialog dialog = new Dialog(MainActivity.this);
     dialog.setContentView(R.layout.dialog_keluar);
     dialog.setTitle("Yakin ingin keluar ?");
     dialog.setCancelable(false);

     Button dialogButton = (Button) dialog.findViewById(R.id.btn_yes);

     // Jika tombol diklik, keluar aplikasi
     dialogButton.setOnClickListener(new View.OnClickListener() {
       @Override
       public void onClick(View v)
       {
        finish();
       }
      });

     Button dialogButtonNo = (Button) dialog.findViewById(R.id.btn_no);

     // Jika tombol diklik, tutup dialog
     dialogButtonNo.setOnClickListener(new View.OnClickListener() {
       @Override
       public void onClick(View v)
       {
        dialog.dismiss();
       }
      });

     dialog.show();

    }
   });
  
    }
}

Sudah terdapat komentar atau catatan pada masing-masing bagian dalam kode java diatas agar mudah dipahami sehingga tidak membutuhkan penjelasan lagi.

Jalankan aplikasi

Setelah selesai pembuatan layout dan perintah javanya, sekarang saatnya untuk build project dan menjalankan aplikasinya. Jika tidak terdapat kesalahan dalam pembuatannya, maka aplikasi akan tampak seperti gambar diatas dengan custom dialog box seperti pada gambar dibawah ini.

Selanjutnya silahkan melakukan modifikasi dan improvisasi sesuai keinginan atau kebutuhan. Demikianlah pembahasan tentang cara membuat custom dialog box pada AIDE.

Jika mengalami kendala dalam pembuatannya atau tidak ingin repot membuatnya, saya sudah menyediakan file project yang dapat diperoleh melalui link dibawah.

Download Project

Apabila Anda mendownload file project ini dan setelah melakukan build ternyata aplikasinya tidak terbuka atau tidak dapat dijalankan, coba hapus folder build yang terdapat didalam project, kemudian lakukan kembali build project sampai aplikasinya dapat dijalankan.

Sekian dan semoga bermanfaat.
Inilah caraliyo.