Eventually Consistent

Create an Android Dialog with an Image

July 28, 2011January 4, 2012 | Steve Bate | AlertDialog, Android, LayoutIn�ater,
LinearLayout, RelativeLayout
Want something more than text when you pop up a dialog from your Android app? How
about a company logo inside your about box? It’s not hard at all. In this post, I show how
to create a menu option for an about box and how to launch a dialog with a custom view
when its selected.

First of all, we create an xml layout �le for our about dialog and call it about.xml:

1 <?xxml version="1.0" encoding="UTF-8"?>

2 <R
RelativeLayout xmlns:android="http://schemas.android.com/apk/res
3 android:layout_width="fill_parent"
4 android:layout_height="fill_parent"
5 android:id="@+id/root"
6 android:padding="10dip">
7
8 <I
ImageView
9 android:id="@+id/about_logo"
10 android:layout_width="40dip"
11 android:layout_height="40dip"
12 android:layout_margin="10dip"
13 android:layout_gravity="center"
14 android:layout_centerHorizontal="true"
15 android:src="@drawable/icon"
16 />
17
18 <T
TextView android:id="@+id/about_title"
19 android:layout_width="wrap_content"
20 android:layout_height="wrap_content"
21 android:layout_gravity="center"
22 android:text="@string/about_content"
23 android:gravity="center_horizontal"
24 android:layout_centerHorizontal="true"
25 android:layout_below="@id/about_logo"
26 />
27 </RRelativeLayout>

This layout contains a RelativeLayout root which means we can a bit more precise with
how elements are positioned compared to the LinearLayout where items are stacked side
by side either horizontally or vertically depending on the chosen android:orientation
setting. Having said that, I’m not doing anything special by using the RelativeLayout
here. In fact, I could have achieved the same layout with the LinearLayout but I try to
use RelativeLayout where possible as I believe it’s more e�cient when rendering
(http://developer.android.com/resources/articles/layout-tricks-e�ciency.html),
especially when nesting layouts. In this �le we have an ImageView that will display the
company logo and a TextView that will display the copyright blurb. The actual text and
image displayed are resources in the application designated
by android:src=”@drawable/icon” and android:text=”@string/about_content” respectively.

Next up, we need a menu that will appear when the Menu button of an Android phone is
tapped. Again the content of a menu is determined by an xml �le that lives in the
res/menu folder named menu.xml:

1 <?xxml version="1.0" encoding="UTF-8"?>

2 <m
menu xmlns:android="http://schemas.android.com/apk/res/android
3 <iitem android:id="@+id/menuAbout"
4 android:title="About..."
5 android:alphabeticShortcut="a"
6 />
7 </mmenu>

Having de�ned our layouts and menus let’s turn to the code. In our Activity we override
the onCreateOptionsMenu. When invoked the MenuIn�ater creates the UI element to
display our “About…”  menu option using the identi�er R.menu.menu, which
corresponds to menu.xml

1 @Override
2 public boolean onCreateOptionsMenu(Menu menu){
3 super.onCreateOptionsMenu(menu);
4 MenuInflater inflater = getMenuInflater();
5 inflater.inflate(R.menu.menu, menu);
6 return true;
7 }

In order to respond to the menu item being selected we also need to override the
onOptionsItemSelected method and this is where we show our dialog with our image:

1 @Override
2 public boolean onOptionsItemSelected(MenuItem item){
3 super.onOptionsItemSelected(item);
4 switch(item.getItemId()){
5 case R.id.menuAbout:
6 LayoutInflater inflater = (LayoutInflater)t
this.getSystemServi
7 View layout = inflater.inflate(R.layout.about, (ViewGroup)fin
8 AlertDialog.Builder adb = new AlertDialog.Builder(t
this);
9 adb.setView(layout);
10 adb.show();
11 return true;
12 }
13 return false;
14 }

The switch statement only shows the one option (I removed others for clarity) but we
could easliy have more which is why we need to know which one was selected hence the
call to getItemId() on the MenuItem object which is passed to us by the runtime. Once
we determine that the About option was selected we need to turn our xml �le, which we
declared at the beginning, into a full �edged view instance. This is the job of the
LayoutIn�ater which we grab using the getSystemService method call. Next, the in�ate
method is invoked passing the id of the layout �le that we want to instantiate. This id is
automatically generated for us based on the name of the �le – about.xml. The second
parameter corresponds to the id we gave to the RelativeLayout element in the same �le.
The end result is a View object which we can pass to the AlertDialog.Builder through the
setView method. Finally, when we call show() the dialog is displayed with our image:
Summary

Displaying a dialog with an image essentially comes down to creating a layout �le, using
LayoutIn�ater to create an instance, and attaching that instance to the AlertDialog. With
a custom layout �le your dialog can be as rich as you want.

You May Like

1. 25
Photos That That Prove The
World Is A Lie a month ago

3 thoughts on “Create an Android Dialog with an

Image”

ABHIJIT SAYS: Thanks for the wonderful explanation. Could you please elaborate on
why you have used the LayoutIn�ater in the onOptionsItemSelected method? Can’t
we just say adb.setView(R.id.layout)? I looked at the developer page on creating
custom dialogs but it hasn’t been explicitly mentioned why a LayoutIn�ater would be
1. used.
November 21, 2011 at 6:09 pm
STEVE BATE SAYS: The answer is simple really. “R.layout.about” is just an
integer constant value. LayoutIn�ator takes this value and from it creates a view
instance which is what the setView method requires as its parameter. Hope that
helps.
November 21, 2011 at 7:06 pm
1. ABHIJIT SAYS: Thank you for the enlightenment!
November 21, 2011 at 7:28 pm

Comments are closed.

CREATE A FREE WEBSITE OR BLOG AT WORDPRESS.COM. | THE MINNOW THEME.