How to use progress bar dialogs and custom Dialogs in ANDROID?

By | April 15, 2011

Hi,

In most situations we have to use progress bar dialogs, Alert View Dialogs and Our own custom Dialogues in our applications. In most situations the built in dialogs may be enough but in certain other situations we have to build our own dialogs for better user experience.
But still there is problem people don’t know how to use them.

Most probably we show progress dialogs when we have to do a pretty long task. But the problem is this will interrupt the UI thread. So in this example I will show you how to show your dialogs while executing your long processes in a thread and closing the progress dialogs when your long process is over.

In this tutorial I will show how to use
1. Alert Dialog.
2. Progress Bar Dialog
3. Custom Dialogue (i.e. show your own layout in the Dialog)

OK Now let’s start

Requirements
An image named android in the drawable folder.

What you have to do is simply copy and paste this java code to your main Java file

DialoguesExample.java

package pack.dialogues;

import android.app.Activity;
import android.app.AlertDialog;
import android.app.Dialog;
import android.app.ProgressDialog;
import android.content.DialogInterface;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;

public class DialoguesExample extends Activity implements Runnable{

   public Button b1, b2, b3, b4, b5, b6;
    private ProgressDialog progressDialog;
    private Dialog dialog;

	@Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        b1 = (Button) findViewById(R.id.Button01);
        b1.setOnClickListener(new OnClickListener() {
			@Override
			public void onClick(View v) {
				showDialogOne();
			}
		});

        b2 = (Button) findViewById(R.id.Button02);
        b2.setOnClickListener(new OnClickListener() {
			@Override
			public void onClick(View v) {
				showDialogTwo();
			}
		});

        b3 = (Button) findViewById(R.id.Button03);
        b3.setOnClickListener(new OnClickListener() {
			@Override
			public void onClick(View v) {
				showDialogThree();
			}
		});

        b4 = (Button) findViewById(R.id.Button04);
        b4.setOnClickListener(new OnClickListener() {
			@Override
			public void onClick(View v) {
				showDialogFour();
			}
		});

        b5 = (Button) findViewById(R.id.Button05);
        b5.setOnClickListener(new OnClickListener() {
			@Override
			public void onClick(View v) {
				showDialogFive();
			}
		});

        b6 = (Button) findViewById(R.id.Button06);
        b6.setOnClickListener(new OnClickListener() {
			@Override
			public void onClick(View v) {
				showDialogSix();
			}
		});
    }

	public void showDialogOne(){
		AlertDialog.Builder builder = new AlertDialog.Builder(DialoguesExample.this);
		builder.setMessage("Are you sure you want to exit?")
		       .setCancelable(false)
		       .setPositiveButton("Yes", new DialogInterface.OnClickListener() {
		           public void onClick(DialogInterface dialog, int id) {
		                DialoguesExample.this.finish();
		           }
		       })
		       .setNegativeButton("No", new DialogInterface.OnClickListener() {
		           public void onClick(DialogInterface dialog, int id) {
		                dialog.cancel();
		           }
		       });
		AlertDialog alert = builder.create();
		alert.show();
	}

	public void showDialogTwo(){

		final CharSequence[] items = {"Red", "Green", "Blue", "Cancel"};

		AlertDialog.Builder builder = new AlertDialog.Builder(this);
		builder.setTitle("Pick a color");
		builder.setSingleChoiceItems(items, -1, new DialogInterface.OnClickListener() {
		    public void onClick(DialogInterface dialog, int item) {
		        Toast.makeText(DialoguesExample.this, items[item], Toast.LENGTH_SHORT).show();
		        dialog.dismiss();
		    }
		});
		AlertDialog alert = builder.create();
		alert.show();
	}

	public void showDialogThree(){

		progressDialog = ProgressDialog.show(DialoguesExample.this, "",
                "Loading. Please wait...", true);

		 Thread thread = new Thread(this);
         thread.start();
	}

	public void run() {
         // Do your operation here.....
		  try {
			Thread.sleep(1000);
		  } catch (InterruptedException e) {
			e.printStackTrace();
		  }
          handler.sendEmptyMessage(0);
    }

    private Handler handler = new Handler() {
          @Override
          public void handleMessage(Message msg) {
	        	  progressDialog.dismiss();
          }
    };

	public void showDialogFour(){
		try{
			progressDialog = new ProgressDialog(DialoguesExample.this);
			progressDialog.setProgressStyle(ProgressDialog.STYLE_HORIZONTAL);
			progressDialog.setMessage("Loading...");
			progressDialog.setCancelable(false);
			progressDialog.show();
		}catch(Exception e){
			System.out.println("ERR => "+ e.getMessage());
		}
		Thread thread = new Thread(this);
        thread.start();
	}

	public void showDialogFive(){

		dialog = new Dialog(DialoguesExample.this);
		dialog.setContentView(R.layout.custom_dialogue);
		dialog.setTitle("Custom Dialog");

		TextView text = (TextView) dialog.findViewById(R.id.text);
		text.setText("Hello, this is a custom dialog! Press back button to close this dialog.");
		ImageView image = (ImageView) dialog.findViewById(R.id.image);
		image.setImageResource(R.drawable.android);
		dialog.show();
	}

	public void showDialogSix(){

		AlertDialog.Builder builder;
		AlertDialog alertDialog;

		LayoutInflater inflater = (LayoutInflater) DialoguesExample.this.getSystemService(LAYOUT_INFLATER_SERVICE);
		View layout = inflater.inflate(R.layout.custom_dialogue,
		                               (ViewGroup) findViewById(R.id.layout_root));

		TextView text = (TextView) layout.findViewById(R.id.text);
		text.setText("Hello, this is another custom dialog! Press back button to close this dialog.");
		ImageView image = (ImageView) layout.findViewById(R.id.image);
		image.setImageResource(R.drawable.android);

		builder = new AlertDialog.Builder(DialoguesExample.this);
		builder.setView(layout);
		alertDialog = builder.create();
		alertDialog.show();
	}
}

main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@drawable/glow"
    >

<Button
	android:text="Dialog One"
	android:id="@+id/Button01"
	android:layout_width="fill_parent"
	android:layout_height="wrap_content">
</Button>

<Button
	android:text="Dialog Two"
	android:id="@+id/Button02"
	android:layout_width="fill_parent"
	android:layout_height="wrap_content">
</Button>

<Button
	android:text="Dialog Three"
	android:id="@+id/Button03"
	android:layout_width="fill_parent"
	android:layout_height="wrap_content">
</Button>

<Button
	android:text="Dialog Four"
	android:id="@+id/Button04"
	android:layout_width="fill_parent"
	android:layout_height="wrap_content">
</Button>

<Button
	android:text="Dialog Five"
	android:id="@+id/Button05"
	android:layout_width="fill_parent"
	android:layout_height="wrap_content">
</Button>

<Button
	android:text="Dialog Six"
	android:id="@+id/Button06"
	android:layout_width="fill_parent"
	android:layout_height="wrap_content">
</Button>
</LinearLayout>

custom_dialog.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:id="@+id/layout_root"
              android:orientation="horizontal"
              android:layout_width="fill_parent"
              android:layout_height="fill_parent"
              android:padding="10dp"
              >
    <ImageView android:id="@+id/image"
               android:layout_width="wrap_content"
               android:layout_height="fill_parent"
               android:layout_marginRight="10dp"
               />
    <TextView android:id="@+id/text"
              android:layout_width="wrap_content"
              android:layout_height="fill_parent"
              android:textColor="#FFF"
              />
</LinearLayout>



Note : You should use only threads when you have to do some long operation which also give better performance for your application.

More information on dialogs can be found on the developer site here

Leave a Reply

Your email address will not be published. Required fields are marked *