Android development primer: Creating layouts for Alert Dialog

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

Don’t like the traditional way in which the Alert Dialog appears? Would you rather have a custom layout for it? Well, not a problem at all. In this post I will show you exactly how to do that. I would like you to know that there are other types of Dialogs that you can have. You can have custom layouts for each of them too. You could customize dialogs to contain EditTexts and take inputs from the user.
Complete Source Code is at the bottom.

So open up an activity and start coding.

  • First of all we will create a layout for our Dialog. So navigate to <yourprojectname> -> res -> layout. Create a new XML file and choose the type of layout you want.
  • Here I will insert two EditTexts in the Alert Dialog. You can follow along or create your own custom layout.Write in the following code into your XML file.
    <?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/editText1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignParentTop="true"
            android:ems="10" >
    
            <requestFocus />
        </EditText>
    
        <EditText
            android:id="@+id/editText2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_below="@+id/editText1"
            android:ems="10" />
    
    </RelativeLayout>
    
  • Now that we have the layout ready, we will need to refer to it from our java code. Go to the concerned activity and make sure you have a way to trigger the dialog, for e.g. a Button. I have a button and I will trigger the Alert Dialog at the click of the button.
  • Write the following code in the onClick() function inside the onClickListener() constructor.
    LayoutInflater lf = LayoutInflater.from(Main.this);
    				final View DialogView = lf.inflate(R.layout.dialog, null);
    				AlertDialog.Builder alert = new AlertDialog.Builder(Main.this);
    				alert.setTitle("Test Alert Dialog").setView(DialogView).setMessage(msg).setPositiveButton("Yes",
    						new DialogInterface.OnClickListener() {
    
    							@Override
    							public void onClick(DialogInterface dialog, int which) {
    								Toast.makeText(getApplicationContext(), "Yes", Toast.LENGTH_LONG).show();
    							}
    						}).setNegativeButton("No",
    								new DialogInterface.OnClickListener() {
    
    									@Override
    									public void onClick(DialogInterface dialog, int which) {
    										Toast.makeText(getApplicationContext(), "No", Toast.LENGTH_LONG).show();
    									}
    								});
    				alert.show();
    
    
  • For now it will be enough for you to know that LayoutInflater is used to inflate or in simple terms set the layout of a View. I will discuss it in a later post.
  • If you have read my previous post, you will notice that there is only a slight change in the code for the AlertDialog. We are now also using a function setView() here. It’s name reflects exactly what it is used for. This is the way we can force an AlertDialog to possess a design/layout of our choice.
  • Save everything and execute it on an emulator/device.

layoutalert

Here’s how it looks like on my Eclair emulator. You can choose to have different background color for the dialog, add more fields etc.

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

    <EditText
        android:id="@+id/editText1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:ems="10" >

        <requestFocus />
    </EditText>

    <EditText
        android:id="@+id/editText2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_below="@+id/editText1"
        android:ems="10" />

</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.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);
        final String msg="This is a test Alert Dialog Box";

        but.setOnClickListener(new OnClickListener() {

			@Override
			public void onClick(View v) {
				LayoutInflater lf = LayoutInflater.from(MainActivity.this);
				final View DialogView = lf.inflate(R.layout.dialog, null);
				AlertDialog.Builder alert = new AlertDialog.Builder(Main.this);
				alert.setTitle("Test Alert Dialog").setView(DialogView).setMessage(msg).setPositiveButton("Yes",
						new DialogInterface.OnClickListener() {

							@Override
							public void onClick(DialogInterface dialog, int which) {
								Toast.makeText(getApplicationContext(), "Yes", Toast.LENGTH_LONG).show();
							}
						}).setNegativeButton("No",
								new DialogInterface.OnClickListener() {

									@Override
									public void onClick(DialogInterface dialog, int which) {
										Toast.makeText(getApplicationContext(), "No", Toast.LENGTH_LONG).show();
									}
								});
				alert.show();
			}
			});

    }
}

Series Navigation<< Android development primer: Creating Alert Dialogs in AndroidAndroid development primer: Creating Dialogs in Android >>

Leave a Reply

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

*

* Copy This Password *

* Type Or Paste Password Here *

42,320 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>