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.
Please share 🙂
