Android Tutorial Membuat custom Alert Dialog

Membuat Alert Dialog sangatlah mudah. Alert Dialog biasanya digunakan untuk menyampaikan pesan atau informasi yang muncul pada layar gadget Android. Pada tutorial ini Custom Alert Dialog akan dugunakan untuk form pengisian biodata dan hasilnya akan ditampilkan pada TextView.

 
Buat project baru di Android Studio File ⇒ New Project. Kemudian pilih Blank Activity dan melanjutkannya hingga selesai.
 
activity_main.xml
Layout container untuk floating action button.

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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"
    android:fitsSystemWindows="true"
    tools:context="com.dedykuncoro.customalertdialog.MainActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

    </android.support.design.widget.AppBarLayout>

    <include layout="@layout/content_main" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        android:src="@android:drawable/ic_menu_edit" />

</android.support.design.widget.CoordinatorLayout>

 

 
content_main.xml
Layout untuk menampilkan hasil inputan dari dialog.

<?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"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.dedykuncoro.customalertdialog.MainActivity"
    tools:showIn="@layout/activity_main">

    <TextView
        android:id="@+id/txt_hasil"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textStyle="bold"
        android:textSize="20dp"
        android:text="Tekan Floating Action Button Untuk Memunculkan Dialog."/>

</RelativeLayout>

 
Buat layout baru dengan nama form_biodata.xml, buka folder res=>layout kemudian klik kanan folder layout=>New=>Layout resource file.
form_biodata.xml

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

    <EditText
        android:id="@+id/txt_nama"
        android:hint="Nama"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:drawable/editbox_background_normal"/>

    <EditText
        android:id="@+id/txt_usia"
        android:layout_marginTop="10dp"
        android:layout_marginBottom="10dp"
        android:hint="Usia"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:drawable/editbox_background_normal"/>

    <EditText
        android:id="@+id/txt_alamat"
        android:layout_marginBottom="10dp"
        android:hint="Alamat"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:drawable/editbox_background_normal"/>

    <EditText
        android:id="@+id/txt_website"
        android:hint="Website"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:drawable/editbox_background_normal"/>

</LinearLayout>

 
Buka MainActivity.java dan coding lengkapnya seperti dibawah ini.
MainActivity.java

package com.dedykuncoro.customalertdialog;

import android.app.AlertDialog;
import android.content.DialogInterface;
import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.EditText;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    FloatingActionButton fab;
    Toolbar toolbar;
    AlertDialog.Builder dialog;
    LayoutInflater inflater;
    View dialogView;
    EditText txt_nama, txt_usia, txt_alamat, txt_website;
    TextView txt_hasil;
    String nama, usia, alamat, website;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        txt_hasil   = (TextView) findViewById(R.id.txt_hasil);
        fab         = (FloatingActionButton) findViewById(R.id.fab);

        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                txt_hasil.setText(null);
                DialogForm();
            }
        });
    }

    // untuk mengosongi edittext 
    private void kosong(){
        txt_nama.setText(null);
        txt_usia.setText(null);
        txt_alamat.setText(null);
        txt_website.setText(null);
    }

    // untuk menampilkan dialog
    private void DialogForm() {
        dialog = new AlertDialog.Builder(MainActivity.this);
        inflater = getLayoutInflater();
        dialogView = inflater.inflate(R.layout.form_biodata, null);
        dialog.setView(dialogView);
        dialog.setCancelable(true);
        dialog.setIcon(R.mipmap.ic_launcher);
        dialog.setTitle("Form Biodata");

        txt_nama    = (EditText) dialogView.findViewById(R.id.txt_nama);
        txt_usia    = (EditText) dialogView.findViewById(R.id.txt_usia);
        txt_alamat  = (EditText) dialogView.findViewById(R.id.txt_alamat);
        txt_website = (EditText) dialogView.findViewById(R.id.txt_website);

        kosong();

        dialog.setPositiveButton("SUBMIT", new DialogInterface.OnClickListener() {

            @Override
            public void onClick(DialogInterface dialog, int which) {
                nama    = txt_nama.getText().toString();
                usia    = txt_usia.getText().toString();
                alamat  = txt_alamat.getText().toString();
                website = txt_website.getText().toString();

                txt_hasil.setText("Nama : " + nama + "\n" + "Usia : " + usia + "\n" + "Alamat : " + alamat + "\n" + "Website : " + website);
                dialog.dismiss();
            }
        });

        dialog.setNegativeButton("CANCEL", new DialogInterface.OnClickListener() {

            @Override
            public void onClick(DialogInterface dialog, int which) {
                dialog.dismiss();
            }
        });

        dialog.show();
    }

}

 
Run Aplikasinya.
 

Download Source Code :