Android development primer: Creating layouts for Alert Dialog

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.
  [java]
  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();

  [/java]

• 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.

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

[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();
}
});

}
}

[/java]

nero