Android development primer: Creating Dialogs in Android

This entry is part 15 of 50 in the series Android Development Primer

We have seen how to create and use Alert Dialog. Now we will see how to create and use a general dialog. In most places you find Alert Dialog explained on after they have given you a basic tutorial about Dialogs, their creation and use. However since Alert Dialog is a complete predefined element of Android, I chose to give you the tutorial earlier so that the learning curve for you remains smooth.

Here we will create a dialog, a layout for it and display it in an activity. Complete Source Code is at the bottom.

  • Navigate to <yourpackagename> -> res -> layout.
  • Create an XML, pick up a layout for it and name it according to your choice. We will use this layout for the dialog.
  • I will just have a button and a text view in the dialog. You can follow along or you can become creative and add more elements. Write the following code in the dialog
    <?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" >
    
        <TextView
            android:id="@+id/textView1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_centerHorizontal="true"
            android:text="This is a test dialog"
            android:textAppearance="?android:attr/textAppearanceMedium" 
            android:paddingBottom="10sp"/>
    
        <Button
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/textView1"
            android:layout_centerHorizontal="true"
            android:text="Button" />
    
    </RelativeLayout>
    

  • Now in the activity I have a button that triggers the dialog on the click. Add the following code to the onClick() method of the onClickListener() constructor.
    final Dialog d = new Dialog(Main.this);
    				d.setContentView(R.layout.dialog);
    				Button tempbut = (Button) d.findViewById(R.id.button1);
    				tempbut.setOnClickListener(new OnClickListener() {
    
    					@Override
    					public void onClick(View v) {
    						// TODO Auto-generated method stub
    						d.dismiss();
    					}
    				});
    				d.setTitle("Test Dialog");
    				d.show();
    
  • Save it and execute it on the emulator/device.

dialog

This is how it looks on my Eclair emulator. Clicking the button will dismiss the dialog. This has been defined in the dialog code. Take some time to go through the code you have just added. It is very simple but nonetheless important.

COMPLETE SOURCE CODE

dialog.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" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:text="This is a test dialog"
        android:textAppearance="?android:attr/textAppearanceMedium" 
        android:paddingBottom="10sp"/>

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/textView1"
        android:layout_centerHorizontal="true"
        android:text="Button" />

</RelativeLayout>


activity_main.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=".Main" >

    <Button
        android:id="@+id/but"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:text="Button" />

</RelativeLayout>


MainActivity.java

package com.nero.myfirstapp;

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

public class Main extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Button but = (Button) findViewById(R.id.but);
        but.setOnClickListener(new OnClickListener() {

			@Override
			public void onClick(View v) {
				final Dialog d = new Dialog(MainActivity.this);
				d.setContentView(R.layout.dialog);
				Button tempbut = (Button) d.findViewById(R.id.button1);
				tempbut.setOnClickListener(new OnClickListener() {

					@Override
					public void onClick(View v) {
						// TODO Auto-generated method stub
						d.dismiss();
					}
				});
				d.setTitle("Test Dialog");
				d.show();
			}
		});

    }
}

Series Navigation<< Android development primer: Creating layouts for Alert DialogAndroid development primer: Progress Dialog in Android – Spinner Style >>

Leave a Reply

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

*

* Copy This Password *

* Type Or Paste Password Here *

42,383 Spam Comments Blocked so far by Spam Free Wordpress

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>