Dialogs in Android

Introduction

It is quite fascinating when you select or choose something and a small window prompts you before your screen asks for your choice. So these small prompts that take the user's wish as input is called a Dialog in Android.

Let us consider the example of when we delete a file in our Android supported phone. A window then prompts “Do you want to reboot in safe mode?”. You then have two choices, either press Yes or press No. So this might be a very good and lucid example.



Dialog Design

Generally the design consists of a basic title and simple action buttons.

• Optional title region
  
  First it contains the section of the title that shows or tells the user which type of prompt it is and appropriately the user responds to it.

• Content area
  
  The Content area is just below the title of the dialog box such that it contains the full information about the problem or the resource that helps the user to act or respond appropriately.

• Action buttons
  
  Action buttons are the last layer in the dialog design. Generally it contains mainly two buttons, more precisely action buttons or certainly check boxes may be there.

Note: The Acceptance action part of the buttons are always on the right side and a dismissive action part must be on the left. The affirmative or positive action result is in the continuation of the process and on the contrary the negative response leads back to the activity or previous state.The Dialog class is the parent class of all types of dialogs, meanwhile when a subclass that is extending the Dialog class, the programmer must see all the key aspects of the class.

Alert dialog

An Alert dialog can show a title and up to three buttons for a list of selected items or a custom layout.DatePickerDialog or TimePickerDialog. It is a dialog with the pre-defined user interface that allows the user to select a date or time.

Dialog fragment class

Instead of using the preceding specified classes we must use the DialogFragment as a container. The preceding classes define classes that shows or maintains the style property. The DialogFragment class provides all the controls you need to create for your dialog and manage its appearance, instead of calling methods on the Dialog object.

Using the DialogFragment class does not even change or distort the original code or doesn't spoil the lifecycle. This class provides or allows you to reuse the dialog's user interface as an embeddable component in a larger user interface.

Creating the Dialog fragment

Dialogs design guide just by extending DialogFragment and creating a AlertDialog in the onCreateDialog() callback method.

For example, here's a basic AlertDialog that's managed within a DialogFragment.

Manifest file:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.alertdialog"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="11"
        android:targetSdkVersion="21" />

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name="com.example.alertdialog.MainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

Now we have defined the manifest here that includes a target and minimum SDK support and much more as shown in the code. Now it is time to define the attributes to the XML file.

Defining the attributes to the activity_main.xml file all the resources must be defined here.

Activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <EditText
        android:id="@+id/EditText01"
        android:text="I Love Android"
        android:layout_height="50dip"
        android:layout_width="180dip">

    </EditText>

    <Button
       android:id="@+id/Button01"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_below="@+id/EditText"
       android:text="Clear Screen">

    </Button>

</RelativeLayout>

MainActivity.java

package com.gkumar.example.alertdialog;

import android.support.v7.app.ActionBarActivity;
import android.support.v7.app.ActionBar;
import android.support.v4.app.Fragment;
import android.app.AlertDialog;
import android.app.Dialog;
import android.content.DialogInterface;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;
import android.os.Build;

public class MainActivity extends ActionBarActivity
{
       Button Clear;
       EditText edit_data;
       //Called when the activity is first created
       @Override
       public void onCreate(Bundle savedInstanceState)
       {
             super.onCreate(savedInstanceState);
             setContentView(R.layout.main);

             Clear=(Button)findViewById(R.id.Button01);
             edit_data=(EditText)findViewById(R.id.EditText01);

             Clear.setOnClickListener(new View.OnClickListener()
             {

                   @Override
                   public void onClick(View v)
                   {

                        AlertDialog.Builder builder=new AlertDialog.Builder(v.getContext());
                        //Set a title
                        builder.setTitle("Confirm");
                        //Set a message
                        builder.setMessage("Do you want to Clear?");
                        ////Here Set a listener to be called when the positive button of the dialog is pressed.
                        builder.setPositiveButton("OK",new DialogInterface.OnClickListener()
                        {

                              @Override
                               public void onClick(DialogInterface dialog, int which)
                              {


                                    edit_data.setText("");
                                    //Displaying a toast message
                                    Toast.makeText(getApplicationContext(), "Your text has been cleared", 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();
                              }
                         });

                         //Creating the dialog
                         AlertDialog alertdialog=builder.create();

                         //show the alertdialog
                         alertdialog.show();

                   }
             });
       }

}

Here depending upon the complexity of the dialog created we can implement a variety of callbacks methods.

Adding a list

There are the following three kinds of lists available with the AlertDialog APIs.

•  A traditional single choice list
  
  
•  A persistent single choice list (radio buttons)
  
  
•  A persistent multiple choice list (check boxes)

Here let us create a list having three choices with the sentItems() method.

@Override
public Dialog onCreateDialog(Bundle savedInstanceState) {
    AlertDialog.Builder builder = new AlertDialog.Builder(getActivity());
    builder.setTitle(R.string.pick_color)
           .setItems(R.array.colors_array, new DialogInterface.OnClickListener() {
               public void onClick(DialogInterface dialog, int which) {
               // The 'which' argument contains the index position
               // of the selected item
           }
    });
    return builder.create();

In this code above we have three choices in the list.

Summary

This article explained the basics of dialogs that appear on Android devices that asks the choice of the user or alert dialog that also asks for the user's choice. Depending upon the work the user is doing, the dialog appears and asks to continue to the next work and also to modify the current work.