Belajar Membuat Custom Dialog Android di Android Studio

Melanjutkan series saya tentang tutorial dasar membuat aplikasi Android untuk Pemula, setelah sebelumnya saya membahas tentang cara membuat Alert Dialog di Android. Kali ini kita akan belajar membuat alert dialog, namun dengan layout custom. Dengan layout custom berarti kita bisa menampilkan apa saja yang kita inginkan pada dialog tersebut, sesuai dengan layout yang kita buat.

Tutorial Membuat Custom Dialog di Android menggunakan Android Studio

Seperti biasa, sebelum lanjut ke tutorial saya sarankan untuk membaca artikel-artikel di bawah ini terlebih dahulu :

Pre-requisites

Setelah kalian selesai membuat project hello world di Android Studio. Maka untuk membuat custom dialog di Android, langkah-langkahnya adalah sebagai berikut.

Pertama-tama kita akan membuat layout custom untuk dialog tersebut, namanya adalah

layout_customdialog.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">

    <ImageView
        android:id="@+id/iv_icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dp" />

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

    <Button
        android:id="@+id/bt_ok"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/iv_icon"
        android:layout_margin="5dp"
        android:text=" Oke " />

</RelativeLayout>

 

Jika sudah kita akan menambahkan sebuah tombol pada activity_main.xml, isikan kode seperti di bawah ini

<?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:background="@drawable/bgcn"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/bt_showdialog"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Show Custom Dialog" />

</LinearLayout>

Pada MainActivity.java, ketika tombol tersebut diklik akan menampilkan dialog Android. Dan dialog itu akan menggunakan layout custom yang sebelumnya telah kita buat. Masukkan kode berikut di MainActivity.java :

package id.web.twoh.twoh_android_layoutbasic;

import android.app.Dialog;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.TextView;

/**
 * Created by Hafizh Herdi on 1/20/2017.
 */

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Button btShow = (Button) findViewById(R.id.bt_showdialog);
        btShow.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                /**
                 * Initiate Custom Dialog
                 */
                final Dialog dialog = new Dialog(MainActivity.this);
                dialog.setContentView(R.layout.layout_customdialog);
                dialog.setTitle("TWOH.Co");

                /**
                 * Mengeset komponen dari custom dialog
                 */
                TextView text = (TextView) dialog.findViewById(R.id.tv_desc);
                text.setText("TWOH's Engineering custom dialog sample");
                ImageView image = (ImageView) dialog.findViewById(R.id.iv_icon);
                image.setImageResource(R.mipmap.ic_launcher);

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

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

Demo

Mari kita jalankan aplikasinya untuk melihat demonya.

Custom dialog di Android

Bisa dilihat di gambar di atas, ketika tombol show dialog diklik maka akan muncul custom dialog kita yang berisi icon, custom message, dan custom button.

That’s all ! Semoga membantu. 🙂 Jangan lupa untuk clone project nya sebagai Android Studio module di GitHub saya, dengan terlebih dahulu follow dan star project tersebut. Silahkan bertanya di bagian komentar jika ada yang kurang jelas. 😀





Download aplikasi kami di Google Play Store


Tutorial Menarik Lainnya :

2 Comments

  1. setyawan March 28, 2018
    • Hafizh Herdi March 28, 2018

Leave a Reply

Do NOT follow this link or you will be banned from the site!