Creating a Custom Dialog

If you want a customized design for a dialog, you can create your own layout for the dialog window with layout and widget elements. After you've defined your layout, pass the root View object or layout resource ID to setContentView(View).

For example, to create the dialog shown to the right:

1. Create an XML layout saved as custom_dialog.xml

<LinearLayout xmlns: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" />


This XML defines an ImageView and a TextView inside a LinearLayout.

2. Set the above layout as the dialog's content view and define the content for the ImageView and TextView elements:

Context mContext = getApplicationContext(); Dialog dialog = new Dialog(mContext);

dialog.setContentView(R.layout.custom_dialog); dialog.setTitle("Custom Dialog");

TextView text = (TextView) dialog.findViewById(; text.setText("Hello, this is a custom dialog!"); ImageView image = (ImageView) dialog.findViewById(; image.setImageResource(;

After you instantiate the Dialog, set your custom layout as the dialog's content view with setContentView(int), passing it the layout resource ID. Now that the Dialog has a defined layout, you can capture View objects from the layout with findViewById(int) and modify their content.

3. That's it. You can now show the dialog as described in Showing A Dialog.

A dialog made with the base Dialog class must have a title. If you don't call setTitleQ, then the space used for the title remains empty, but still visible. If you don't want a title at all, then you should create your custom dialog using the AlertDialog class. However, because an AlertDialog is created easiest with the AlertDialog.Builder class, you do not have access to the setContentView(int) method used above. Instead, you must use setView(View). This method accepts a View object, so you need to inflate the layout's root View object from XML.

To inflate the XML layout, retrieve the LayoutInflater with getLavoutInflaterO (or getSystemServiceO), and then call inflate(int, ViewGroup), where the first parameter is the layout resource ID and the second is the ID of the root View. At this point, you can use the inflated layout to find View objects in the layout and define the content for the ImageView and TextView elements. Then instantiate the AlertDialog.Builder and set the inflated layout for the dialog with setView(View).

Here's an example, creating a custom layout in an AlertDialog:

AlertDialog.Builder builder; AlertDialog alertDialog;

Context mContext = getApplicationContext(); LayoutInflater inflater = (LayoutInflater) mContext.getSystemService(LAYOUT_INFLATER); View layout = inflater.inflate(R.layout.custom dialog.

(ViewGroup) findViewById(;

TextView text = (TextView) layout.findViewById(; text.setText("Hello, this is a custom dialog!"); ImageView image = (ImageView) layout.findViewById(; image.setImageResource(;

builder = new AlertDialog.Builder(mContext);


alertDialog = builder.create();

Using an AlertDialog for your custom layout lets you take advantage of built-in AlertDialog features like managed buttons, selectable lists, a title, an icon and so on.

For more information, refer to the reference documentation for the Dialog and AlertDialog.Builder classes. " Back to User Interface ! Go to top

Except as noted, this content is licensed under Apache 2.0. For details and restrictions, see the Content License

Site Terms of Service - Privacy Policy - Brand Guidelines

Was this article helpful?

0 0

Post a comment