Question

I wanted to create Custom Dialog like the following image which can be called from an activity while performing validations.

The Custom Dialog should be a separate class.

How can I achieve the following the custom dialog. I gave gone through the following url

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

but unable to get a clear idea on how should I create the below alert .

1. How can I create my own header “Alert Info” with a background color & an icon before the text “Alert Info”

2. I wanted to also control the transparency of the alert (90 % transparency)
   Is it possible to achieve % transparency on Android

3. How to provide the listeners to the buttons Ok & Cancel.

Any sample code with layout xml handling the above requirements will be helpful.
Kindly provide with a sample code/suggestions.

Answer 1

You just need to create a custom layout for the dialog then wire up the controls manually.. this should get you started.

customdialoglayout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="fill_parent"
    android:layout_height="fill_parent">

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="horizontal" android:layout_width="fill_parent"
        android:layout_height="fill_parent">

        <ImageView ... />
        <TextView android:text="Alert Info" ... />
    </LinearLayout>
    <!-- Additional Content Here -->
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="horizontal" android:layout_width="fill_parent"
        android:layout_height="fill_parent">

        <Button android:id="@+id/btnOkay" android:text="Ok" ...></Button>
        <Button android:id="@+id/btnCancel" android:text="Cancel" ...></Button>
    </LinearLayout>
</LinearLayout>

Set the custom layout to the dialog after initializing..

dialog.setContentView(R.layout.customdialoglayout);

To wire up your handlers you will have to do something to the effect of..

Button myButton = (Button)dialog.findViewById(R.id.btnOkay);

The XML I posted is truncated just as an example, additional custom styling will be needed to achieve the desired look and of course replace the ellipses with the actual attributes that you want, but as you can see what you want to accomplish is fairly simple.