Custom Dialogs

Today we will look at creating custom dialogs.  When creating my own custom dialog for my Maths Test App,  I found the following website very useful (Although I did find an issue with the code which I had to correct for, more about that later):

http://developer.android.com/guide/topics/ui/dialogs.html

A custom dialog is effectively a user interface, remember that user interfaces in android are called layouts and are defined in xml.  We have covered creating user interfaces and handling user inputs in previous posts, so I will not repeat myself here.  However step 1 in creating your custom dialog is creating a layout in xml.

Step 1 in creating custom dialog is to define a layout

The following layout is the one used in the example on the above website.  The layout contains an ImageView and a TextView.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/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"
              />
</LinearLayout>

In the example on the website the following code is used to set the text for the TextView and the image for the ImageView.

Step 2 is to setup the layout in code

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

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

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

Everything covered so far should be familiar from previous posts.  The next bit is the key bit for displaying a custom dialog.  It is step 3 and is inflating the xml layout.

Step 3 is inflating the xml layout

AlertDialog.Builder builder;
AlertDialog alertDialog;

Context mContext = getApplicationContext();
LayoutInflater inflater = (LayoutInflater) mContext.getSystemService(LAYOUT_INFLATER_SERVICE);
View layout = inflater.inflate(R.layout.custom_dialog,
                               (ViewGroup) findViewById(R.id.layout_root));

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

builder = new AlertDialog.Builder(mContext);
builder.setView(layout);
alertDialog = builder.create();

The line highlighted in yellow is the line I had to correct.  I had to replace

LayoutInflater inflater = (LayoutInflater) mContext.getSystemService(LAYOUT_INFLATER_SERVICE);

with

LayoutInflater inflater = (LayoutInflater) myActivity.getSystemService(LAYOUT_INFLATER_SERVICE);

I will leave you to mull over the details of this post and see if you can create your own custom dialogs.  If you have any issues then please get in touch.