Android Customized Dialog Example

0

In this article, I will show you an example of android dialog. When you launch the application, you will see a button. Click on the button and a dialog box will open. The dialog box will have some text and a button to close the dialog.
I have kept the example simple so that our main focus would be on the usage of Dialog API.

Let’s start with the example.

Steps to create your customized Dialog Box

  1. Following the concept of decoupling view from controller, we will create a new xml layout file that represents the content of Dialog box.
  2. Create Dialog box and set the dialog’s content to the XML layout using dialog.setContentView method.
  3. Call dialog.show() to open the dialog.
  4. Call dialog.dismiss() to close the dialog.

Layout of dialog box

Our dialog layout is very simple, it contains a text field and a ‘Close’ button to close the dialog.

dialog_layout.xml:

<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"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.javarticles.android.MainActivity" >

    <TextView
        android:id="@+id/about_dialog"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="78dp"
        android:text="@string/about_dialog"
        android:textColor="@color/welcome_text_color"
        android:textSize="20sp" />

    <Button
        android:id="@+id/close_dialog"
        style="?android:attr/buttonStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="61dp"
        android:layout_marginTop="68dp"
        android:text="@string/close" />

</LinearLayout&gt

Setup Dialog

This is our main layout which contains some text and a button, clicking which will open the dialog.

welcome.xml:

<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"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.javarticles.android.MainActivity" >

    <TextView
        android:id="@+id/welcome"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="78dp"
        android:text="@string/welcome"
        android:textColor="@color/welcome_text_color"
        android:textSize="20sp" />

    <Button
        android:id="@+id/open_diglog"
        style="?android:attr/buttonStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/welcome"
        android:layout_alignTop="@+id/welcome"
        android:layout_marginLeft="61dp"
        android:layout_marginTop="68dp"
        android:text="@string/open" />

</RelativeLayout>

Let’s create the dialog and set its content.
Our main page will contain the button to open the dialog. In our activity class CustomizedDialogExampleActivity, we will set its content to the main layout welcome.xml.
Let’s now create the dialog box using Dialog(context), we will pass the current activity instance as the context.
Next, we will set the title using dialog.setTitle and then the dialog’s content view using dialog.setContentView.

Now we need to setup the listeners, the first one for opening the dialog and the second listener for closing it.
We want to open the dialog when the ‘Open’ button is clicked. There is also a button in the dialog’s layout which will allows us to close the dialog.
Set the button listeners using button.setOnClickListener.

In order to open the dialog, we will call dialog.show() and to close it we will call dialog.dismiss().

CustomizedDialogExampleActivity:

package com.javarticles.android;

import android.app.Activity;
import android.app.Dialog;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;

public class CustomizedDialogExampleActivity extends Activity {
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.welcome);		
		final Dialog dialog = new Dialog(this);
		dialog.setTitle(getString(R.string.dialog_example));
		dialog.setContentView(R.layout.dialog_layout);
		Button openDialog = (Button) findViewById(R.id.open_diglog);
		openDialog.setOnClickListener(new OnClickListener() {
			
			@Override
			public void onClick(View v) {
				dialog.show();
			}
		});
		final Button closeDialog = (Button) dialog.findViewById(R.id.close_dialog);
		closeDialog.setOnClickListener(new OnClickListener() {			
			@Override
			public void onClick(View v) {
				dialog.dismiss();
			}
		});
	}	
}

Final look of the dialog

Let’s start the application and click on open to open the dialog.

Open Dialog

Open Dialog

Click on close button to close the dialog.

Dialog Box. Click on 'Close' to close it.

Dialog Box. Click on ‘Close’ to close it.

Download Source Code

In this example, I have shown you how to create dialog, open and close it.

You can download the source code here: customDialogExample.zip

Share.

Comments are closed.