Tutorial Cara Membuat Custom Dialog di Android Studio

Android Najwa - Selamat dini hari Sobat, udah lama banget nih gak posting tutorial. Karna kesibukan dunia nyata. xixixi. Oke. Tengah malam yang ini saya akan melanjutkan dari materi sebelumnya yaitu Tutorial Cara Membuat Progress Dialog di Android Studio. Dimana kali ini kita akan membuat sebuah contoh custom dari sebuah tampilan dialog yang kita sebut dengan nama "Custom Dialog" di Android Studio.

Custom Dialog Android

Apa itu Custom Dialog?

Custom dialog merupakan dialog yang di kostumisasi dari sebuah antarmuka. Berikut ini merupakan contoh sederhana custom dialog. Perlu diketahui custom dialog berbeda dengan Intent Karna Custom Dialog dapat tampil interface nya tanpa perpindahan activity baru. Liat contoh dibawah ini :

Contoh Sederhana Antarmuka awal dan dialog yang akan dipanggil

Ketika penguan menekan tombol “Coba Custom Dialog” maka aplikasi akan menampilkan

pesan dialog yang isinya "Ini adalah Custom Dialog". Bagaimana cara membuat Dialog yang dikostumisasi?

Tutorial Cara Membuat Custom Dialog

Langkah 1 : Jalankan Android Studio.exe kalian seperti biasa, lalu buatlah project baru dengan seperti berikut.

• Application Name : Custom Dialog
• Package Name : androidnajwa.com
• Minimum Required SDK : API 15 Andorid 4.0.3 (IceCreamSandwich)

Buat Project Baru

Langkah 2 :  Pilih saja Blank Activity lalu klik Next dan Finish

Add Activity

Langkah 3 : Untuk membuat antarmuka halaman utama (activity_main.xml) seperti diatas tadi dapat dilakukan dengan “Drag and Drop” dari komponen yang tersedia atau langsung menuliskan script XML. Untuk script XML dapat dituliskan seperti berikut.

<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:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Coba Custom Dialog"
        android:id="@+id/button"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="73dp" />
</RelativeLayout>

Langkah 4 : Selanjutnya untuk membuat interface dialog (dialog.xml) seperti gambar diawal tadi dapat dilakukan dengan cara klik kanan pada -> res -> layout, lalu pilih New ->Layout -> Layout XML File. Selanjutnya buat layout baru dengan nama dialog.xml dengan pilihan layout lalu desainlah interfacenya seperti langkah sebelumnya.

<?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:layout_height="match_parent">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:text="Ini adalah Custom Dialog"
        android:id="@+id/textView"
        android:layout_gravity="center_horizontal" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="OK"
        android:id="@+id/button2"
        android:layout_gravity="center_horizontal" />
</LinearLayout>

Langkah 5 : Bukalah MainActivity.java lalu edit seperti berikut ini

 package com.androidnajwa.customdialog;

import android.app.Activity;
import android.app.Dialog;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;

public class MainActivity extends Activity {
    Button btnDialog;
    Dialog dia;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        btnDialog = (Button) findViewById(R.id.button);
        btnDialog.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                cobaCustomDialog();
            }
        });
    }

    //method untuk membuat halaman menjadi dialog
    public void cobaCustomDialog(){
        dia = new Dialog(MainActivity.this);
        dia.setContentView(R.layout.dialog);
        dia.setTitle("Judul Dialog");
        dia.setCancelable(false);
        dia.show();

        //memanggil button but yang ada pada dialog
        Button but = (Button) dia.findViewById(R.id.button2);
        but.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                dia.dismiss(); //keluar dialog
            }
        });
    }

}
 

Sampai tahap disini sudah selesai. Sekarang lakukan testing, dengan cara menekan Shift+F10.

(1) Hasil Custom Dialog

Ketika kalian menekan tombol Coba Costum Dialog maka akan tampil hasil nya sebagai berikut

(2) Hasil Custom Dialog

Nah, itulah hasil dari penggunaan Custom Dialog yang nanti nya akan muncul Popup baru tanpa berpindah aktivity. Gimana? Mudah Bukan? Untuk dikembangkan lagi juga bisa asal kalian bisa memahaminya.

Demikian Tutorial Cara Membuat Custom Dialog di Android Studio Ada Pertanyaan silakan komentar dihalaman Komentar.Terima Kasih Atas Kunjungan di Android Najwa.

Link Download Klik Disini

Catatan : Silakan Klik Gambar dibawah ini untuk mendapatkan Password RAR.

Tweet