Dialog Android Part V (Custom Dialog)

Mari kita lanjutkan lagi kawaan.

Kali ini kita akan membahas bagaimana caranya untuk  membuat sebuah custom dialog. Caranya, pertama kita harus membuat sebuah layout baru dan menambahkan layout tersebut pada AlertDialog dengan memanggil method setView() pada object AlertDialog.Builder kawan-kawan.

contoh custom dialog :

4-7-2013 4-18-34 PM

Baiklah, seperti biasa buka eclipse kesayangan dan buka project yang telah kita buat pada postingan sebelumnya. Selanjutnya buat sebuah layout baru (buka folder res -> klik kanan folder layout -> New -> Android XML File). Isi sesuai gambar dibawah.

4-7-2013 4-26-39 PM

Berikut source lengkap pada custom_layout :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical" >

    <EditText
        android:id="@+id/editUser"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:ems="10"
        android:hint="Username"
        tools:ignore="TextFields,HardcodedText" >

        <requestFocus />
    </EditText>

    <EditText
        android:id="@+id/editPass"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:ems="10"
        android:hint="Password"
        android:inputType="textPassword"
        tools:ignore="HardcodedText" />

</LinearLayout>

Selanjutnya buka activity_main.xml dan tambahkan kode berikut :

  <Button
        android:id="@+id/btnCustom"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_below="@+id/btnChekBox"
        android:text="Dialog Custom"
        tools:ignore="HardcodedText" />

Lebih jelasnya, berikut source lengkapnya :

<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"
    tools:context=".MainActivity" >

    <Button
        android:id="@+id/btnNeutral"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="14dp"
        android:text="Dialog Neutral"
        tools:ignore="HardcodedText" />

    <Button
        android:id="@+id/btnList"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_below="@+id/btnNeutral"
        android:text="Dialog Items"
        tools:ignore="HardcodedText" />

    <Button
        android:id="@+id/btnRadioList"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_below="@+id/btnList"
        android:text="Dialog Radio List"
        tools:ignore="HardcodedText" />

    <Button
        android:id="@+id/btnChekBox"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_below="@+id/btnRadioList"
        android:text="Dialog ChekBox List"
        tools:ignore="HardcodedText" />

    <Button
        android:id="@+id/btnCustom"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_below="@+id/btnChekBox"
        android:text="Dialog Custom"
        tools:ignore="HardcodedText" />

    <Button
        android:id="@+id/btnKeluar"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_below="@+id/btnCustom"
        android:text="Keluar"
        tools:ignore="HardcodedText" />

</RelativeLayout>

Sekarang buka MainActivity.java dan tambahkan pula atribut bertipe Button karena tadi kita telah menambahkan sebuah button baru pada activity_main.xml. Jangan lupa deklarasikan juga 2 buah EditText yang telah kita buat pada custom_layout.xml tadi pada MainActivity.java.

Button buttonCustom;

EditText user;
EditText pass;

Deklarasikan button baru yang telah kita buat pada onCreate(Bundle savedInstanceState).

 buttonCustom=(Button)findViewById(R.id.btnCustom);

Buat sebuah method baru untuk menampung dialog yang kita buat.

 public void actionCustomDialog(){
    	AlertDialog.Builder builder=new AlertDialog.Builder(context);

    	LayoutInflater inflater=getLayoutInflater();
    	final View view=inflater.inflate(R.layout.custom_layout, null);
    	builder.setTitle("LOGIN");
    	builder.setIcon(R.drawable.ic_launcher);
    	builder.setView(view);
    	builder.setPositiveButton("Sign In", new DialogInterface.OnClickListener() {

			@Override
			public void onClick(DialogInterface dialog, int which) {
				// TODO Auto-generated method stub

				user=(EditText) view.findViewById(R.id.editUser);
				pass=(EditText) view.findViewById(R.id.editPass);

				String u=user.getText().toString();
				String p=pass.getText().toString();

				Toast.makeText(context,"Username : " + u +"\n"
						+"Password : "+ p, Toast.LENGTH_LONG).show();
			}
		});

    	builder.setNegativeButton("Cancel", new DialogInterface.OnClickListener() {

			@Override
			public void onClick(DialogInterface dialog, int which) {
				// TODO Auto-generated method stub
				dialog.cancel();
			}
		});

    	AlertDialog alertDialog=builder.create();
    	alertDialog.show();
    }

Berikutnya kita tinggal membuat event yang akan kita berikan pada button yang telah kita buat tadi. Tambahkan kode berikut pada onCreate(Bundle savedInstanceState).

  buttonCustom.setOnClickListener(new OnClickListener() {

			@Override
			public void onClick(View arg0) {
				// TODO Auto-generated method stub
				actionCustomDialog();
			}
		});

Lebih jelasnya, berikut source lengkapnya :

package com.is.dialogtest;

import java.util.ArrayList;

import android.os.Bundle;
import android.app.Activity;
import android.app.AlertDialog;
import android.content.Context;
import android.content.DialogInterface;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;

public class MainActivity extends Activity {

	Context context=this;
	Button buttonNeutral;
	Button buttonKeluar;
	Button buttonList;
	Button buttonRadioList;
	Button buttonChekBoxList;
	Button buttonCustom;

	EditText user;
	EditText pass;

	ArrayList<Integer> arrayList=new ArrayList<Integer>();
	CharSequence items[]={"Ubuntu","Mandriva","Mint"};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        buttonNeutral=(Button) findViewById(R.id.btnNeutral);
        buttonList=(Button) findViewById(R.id.btnList);
        buttonRadioList=(Button) findViewById(R.id.btnRadioList);
        buttonChekBoxList=(Button)findViewById(R.id.btnChekBox);
        buttonCustom=(Button)findViewById(R.id.btnCustom);
        buttonKeluar=(Button) findViewById(R.id.btnKeluar);

        buttonNeutral.setOnClickListener(new OnClickListener() {

			@Override
			public void onClick(View arg0) {
				// TODO Auto-generated method stub
				actionNeutralButton();
			}
		});

        buttonList.setOnClickListener(new OnClickListener() {

     			@Override
     			public void onClick(View arg0) {
     				// TODO Auto-generated method stub
     				actionDialogList();
     			}
     		});

        buttonRadioList.setOnClickListener(new OnClickListener() {

			@Override
			public void onClick(View arg0) {
				// TODO Auto-generated method stub
				actionRadioList();
			}
		});

        buttonChekBoxList.setOnClickListener(new OnClickListener() {

			@Override
			public void onClick(View arg0) {
				// TODO Auto-generated method stub
				actionChekBoxList();
			}
		});

        buttonCustom.setOnClickListener(new OnClickListener() {

			@Override
			public void onClick(View arg0) {
				// TODO Auto-generated method stub
				actionCustomDialog();
			}
		});

        buttonKeluar.setOnClickListener(new OnClickListener() {

			@Override
			public void onClick(View arg0) {
				// TODO Auto-generated method stub
				actionKeluar();
			}
		});

    }

    public void actionKeluar(){
    	AlertDialog.Builder builder=new AlertDialog.Builder(context);
		builder.setTitle("Konfirmasi");
		builder.setMessage("Apakah Anda Akan Keluar ?");
		builder.setCancelable(false);
		builder.setPositiveButton("Ya", new DialogInterface.OnClickListener() {

			@Override
			public void onClick(DialogInterface arg0, int arg1) {
				// TODO Auto-generated method stub
				MainActivity.this.finish();
			}
		});

		builder.setNegativeButton("Tidak", new DialogInterface.OnClickListener() {

			@Override
			public void onClick(DialogInterface arg0, int arg1) {
				// TODO Auto-generated method stub
				arg0.cancel();
			}
		});

		AlertDialog alertDialog=builder.create();
		alertDialog.show();
    }

    public void actionNeutralButton(){
    	new AlertDialog.Builder(this).setTitle("Ini Title")
    		.setMessage("Ini Message")
    		.setNeutralButton("Oke", new DialogInterface.OnClickListener() {

			@Override
			public void onClick(DialogInterface arg0, int arg1) {
				// TODO Auto-generated method stub
				//Tidak melakukan apapun
			}
		}).show();
    }

    public void actionDialogList(){
    	AlertDialog.Builder builder=new AlertDialog.Builder(context);
    	builder.setTitle("Distro Linux");
    	builder.setItems(items, new DialogInterface.OnClickListener() {

			@Override
			public void onClick(DialogInterface arg0, int arg1) {
				// TODO Auto-generated method stub
				Toast.makeText(context, items[arg1], Toast.LENGTH_LONG).show();
			}
		});

    	AlertDialog alertDialog=builder.create();
    	alertDialog.show();
    }

    public void actionRadioList(){
    	AlertDialog.Builder builder=new AlertDialog.Builder(context);
    	builder.setTitle("Radio Items");
    	builder.setSingleChoiceItems(items, 0, new DialogInterface.OnClickListener() {

			@Override
			public void onClick(DialogInterface arg0, int arg1) {
				// TODO Auto-generated method stub
				Toast.makeText(context, items[arg1], Toast.LENGTH_LONG).show();
				arg0.dismiss();
			}
		});

    	AlertDialog alertDialog=builder.create();
    	alertDialog.show();
    }

    public void actionChekBoxList(){

    	AlertDialog.Builder builder=new AlertDialog.Builder(context);
    	builder.setTitle("CheckBox List");
    	builder.setMultiChoiceItems(items, null, new DialogInterface.OnMultiChoiceClickListener() {

			@Override
			public void onClick(DialogInterface dialog, int which, boolean isChecked) {
				// TODO Auto-generated method stub
				if(isChecked){
					arrayList.add(which);
				}else{
					arrayList.remove(Integer.valueOf(which));
				}
			}
		});

    	builder.setPositiveButton("Yes", new DialogInterface.OnClickListener() {

			@Override
			public void onClick(DialogInterface dialog, int which) {
				// TODO Auto-generated method stub
				String sequence="";

				for(int i=0;i<arrayList.size();i++){
					int x=arrayList.get(i);
					sequence +=items[x] + "\n";
				}

				Toast.makeText(context,sequence, Toast.LENGTH_LONG).show();

				arrayList.clear();

			}
		});

    	builder.setNegativeButton("No", new DialogInterface.OnClickListener() {

			@Override
			public void onClick(DialogInterface dialog, int which) {
				// TODO Auto-generated method stub

			}
		});

    	AlertDialog alertDialog=builder.create();
    	alertDialog.show();
    }

    public void actionCustomDialog(){
    	AlertDialog.Builder builder=new AlertDialog.Builder(context);

    	LayoutInflater inflater=getLayoutInflater();
    	final View view=inflater.inflate(R.layout.custom_layout, null);
    	builder.setTitle("LOGIN");
    	builder.setIcon(R.drawable.ic_launcher);
    	builder.setView(view);
    	builder.setPositiveButton("Sign In", new DialogInterface.OnClickListener() {

			@Override
			public void onClick(DialogInterface dialog, int which) {
				// TODO Auto-generated method stub

				user=(EditText) view.findViewById(R.id.editUser);
				pass=(EditText) view.findViewById(R.id.editPass);

				String u=user.getText().toString();
				String p=pass.getText().toString();

				Toast.makeText(context,"Username : " + u +"\n"
						+"Password : "+ p, Toast.LENGTH_LONG).show();
			}
		});

    	builder.setNegativeButton("Cancel", new DialogInterface.OnClickListener() {

			@Override
			public void onClick(DialogInterface dialog, int which) {
				// TODO Auto-generated method stub
				dialog.cancel();
			}
		});

    	AlertDialog alertDialog=builder.create();
    	alertDialog.show();
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.activity_main, menu);
        return true;
    }
}

Langkah selanjutnya jalankan aplikasi kawan-kawan.
4-7-2013 4-17-48 PM

Nah, selesai sudah kita membuat sebuah custom dialog.  Begitulah kira-kira salah satu cara membuat custom dialog.

Oke kawan, untuk postingan kali ini ane akhiri sekian, semoga bermanfaat dan sampai jumpa di postingan berikutnya.

Download project latihannya disini.

sumber : http://developer.android.com/guide/topics/ui/dialogs.html

Sayounara …

One thought on “Dialog Android Part V (Custom Dialog)

  1. Ping-balik: Contoh Custom Dialog di Android | BAYU SULYSTYO

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s