17 Mar 2016
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.