Belajar Cara Membuat Custom Dialog di Android Studio

Assalamualaikum Warahmatullahi Wabarakatuh.

Di kesempatan kali ini saya akan membahas salah satu materi material desain android, yaitu Membuat Custom Dialog, custom dialog hampir sama dengan AlertDialog yang pada umumnya sering kalian gunakan.

Yang membedakan Alert Dialog dan Custom Dialog yaitu pada Custom Dialog kita dapat menggunakan custom layout yang dapat kita edit-edit tampilan Dialognya, misalnya menambahkan Button atau menambahkan Icon, dsb.

Materi lainnya yang direkomendasikan:

• Cara Membuat Custom Toolbar Material Design
• Tutorial Membuat Navigation Drawer di Android Studio
• Cara Membuat Swipe Refresh Material Design
• Membuat Animasi dan Sub Menu pada Floating Action Button
• Cara Membuat TabLayout di Android Material Design

Disini kita akan membuat project sederhana yang menampilkan Custom Dialog pada layar Activity. didalam aplikasi tersebut, Custom Dialog tersebut akan muncul saat user menakan Tombol yang sudah kita siapkan.

Belajar Cara Membuat Custom Dialog di Android Studio

1) Buka aplikasi Android Studio kalian, Buat Project Baru.

2) Masukan kedua library berikut ini kedalam dependencies kalian, didalam file build.gradle (app).

implementation 'com.android.support:appcompat-v7:27.1.1'
implementation 'com.android.support:design:27.1.1'

3) Berikutnya kita akan membuat custom layout untuk Dialog yang akan kita tampilkan. Sebagai contoh disini kita akan menggunakan ImageView, TextView dan Button. Buat desainnya seperti 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">

    <ImageView
        android:id="@+id/logo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:layout_margin="5dp"
        app:srcCompat="@mipmap/ic_launcher"
        tools:ignore="ContentDescription" />

    <TextView
        android:id="@+id/dialog"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/logo"
        android:layout_alignTop="@+id/logo"
        android:layout_margin="5dp"
        android:layout_toEndOf="@+id/logo"
        android:layout_toRightOf="@+id/logo"
        android:gravity="left|center"
        android:text="WILDAN TECHNO ART - Contoh Custom Dialog"
        android:textSize="16sp"
        android:textStyle="bold" />

    <Button
        android:id="@+id/ok"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignEnd="@+id/dialog"
        android:layout_alignRight="@+id/dialog"
        android:layout_below="@+id/logo"
        android:text="OK" />

</RelativeLayout>

View:

4) Pada activity_main.xml kalian, disini kita cukup menambahkan Button untuk menampilkan pesan custom dialog pada user.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    tools:context="android.cianjur.developer.net.materialdesignexample.MainActivity">

    <Button
        android:id="@+id/showDialog"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="false"
        android:layout_centerVertical="false"
        android:text="Show Dialog" />
    
</RelativeLayout>

View:

5) Buka class MainActivity.java, disini kita akan implementasikan Custom Dialog pada sebuah Button, saat user menekan Button tersebut, maka akan muncul pesan Dialog yang sudah kita custom sebelumnya

package android.cianjur.developer.net.materialdesignexample;

import android.app.Dialog;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;

public class MainActivity extends AppCompatActivity {

    //Deklarasi Variable
    private Button ShowDialog;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ShowDialog = findViewById(R.id.showDialog);
        ShowDialog.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                final Dialog dialog = new Dialog(MainActivity.this);

                //Memasang Title / Judul pada Custom Dialog
                dialog.setTitle("Contoh Custom Dialog");

                //Memasang Desain Layout untuk Custom Dialog
                dialog.setContentView(R.layout.custom_design);

                //Memasang Listener / Aksi saat tombol OK di Klik
                Button DialogButton = dialog.findViewById(R.id.ok);
                DialogButton.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        dialog.dismiss();
                    }
                });

                dialog.show();
            }
        });
    }
}

Demo:

Sekian dari saya, mohon maaf bila ada kesalahan, jika ada yang ingin ditanyaka, silakan isi kolom komentar dibawah ini.

Wassalamualaikum Warahmatullahi Wabarakatuh.

Berbagi :