Custom Alert Dialogues in Android

Here I am going to describe how we can customize the Android default dialogue.

Most Android applications are using their own dialogues by customizing the default one. This article will be helpful for those who want to use custom dialogues in Android applications. Here I will describe about dialogue with one edit text and two buttons. For this first create the main activity and its layout.

Here I have the main layout with one button and on clicking the button a dialogue will appear and here is the main layout file.

<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:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">
    <Button
        android:id="@+id/button"
        android:text="Show Dialogue"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</RelativeLayout>

And bind the UI controls in the Java file like the following,

Button button = (Button) findViewById(R.id.button);

Now create the custom dialogue layout like the following,

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:background="@drawable/rounded_dialogue_bg"
    android:orientation="vertical">
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@color/textColor"
        android:orientation="horizontal">
        <TextView
            android:id="@+id/verifyheadertextId"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginRight="20dp"
            android:gravity="left"
            android:paddingBottom="5dp"
            android:paddingLeft="10dp"
            android:paddingTop="5dp"
            android:text="tilte"
            android:textColor="@android:color/white"/>
    </LinearLayout>
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:paddingLeft="25dp"
        android:paddingRight="25dp"
        android:paddingTop="20dp">
        <EditText
            android:id="@+id/status_message"
            android:textColor="@color/textColor"
            android:layout_width="200dp"
            android:layout_height="wrap_content"
            android:lines="1"
            android:singleLine="true" />
    </LinearLayout>
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="30dp"
        android:layout_marginBottom="30dp"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="5dp"
        android:layout_marginTop="15dp"
        android:gravity="center_horizontal"
        android:orientation="horizontal">
        <Button
            android:id="@+id/dialog_verify_ButtonId"
            android:layout_width="0dp"
            android:layout_height="30dp"
            android:layout_marginLeft="5dp"
            android:layout_weight="2"
            android:background="@drawable/button_selector"
            android:text="Ok"
            android:textColor="@android:color/white" />
        <Button
            android:id="@+id/dialog_cancel_ButtonId"
            android:layout_width="0dp"
            android:layout_height="30dp"
            android:layout_marginLeft="5dp"
            android:layout_weight="2"
            android:background="@drawable/button_selector"
            android:text="cancel"
            android:textColor="@android:color/white"
            android:textStyle="bold" />
    </LinearLayout>
</LinearLayout>

And create the binder class for the custom layout.

public static void showStatusMessageDialogue(final Context context) {
    Button verifyButton;
    Button cancelButton;
final EditText status_message;
//
final Dialog expiryDialog = new Dialog(context);
    expiryDialog.getWindow().setBackgroundDrawable(
new ColorDrawable(android.graphics.Color.TRANSPARENT));
    expiryDialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
    expiryDialog.setContentView(R.layout.custom_dialogue);
    status_message = (EditText) expiryDialog
            .findViewById(R.id.status_message);
    expiryDialog.setCancelable(false);
    verifyButton = (Button) expiryDialog
            .findViewById(R.id.dialog_verify_ButtonId);
    cancelButton = (Button) expiryDialog
            .findViewById(R.id.dialog_cancel_ButtonId);
    cancelButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
expiryDialog.dismiss();
        }
    });
    verifyButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
if (!TextUtils.isEmpty(status_message.getText().toString())) {
expiryDialog.dismiss();
            } else {
                Toast.makeText(
context,
"Please enter the member", Toast.LENGTH_LONG)
                        .show();
            }
        }
    });
    expiryDialog.show();
}

We need to have some drawable xmls to make the UI is attractive please see them below,

button_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/rectangle_button_pressed" android:state_pressed="true"></item>
    <item android:drawable="@drawable/rectangle_button_focused" android:state_focused="true"></item>
    <item android:drawable="@drawable/rectangle_button" ></item>
</selector>

rectangle_button.xml

<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@color/textColor"/>
            <corners android:radius="4dp"/>
        </shape>
    </item>
    <item android:bottom="3dp">
        <shape android:shape="rectangle">
            <solid android:color="@color/textColor" />
            <corners android:radius="4dp"/>
        </shape>

    </item>
</layer-list>

rectangle_button_focused.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
 android:shape="rectangle" >
    <solid android:color="@color/textColor" />
 <!-- <stroke
        android:width="1dp"
        android:color="@color/blue_bg" />
    <corners android:radius="4dp" />-->
</shape>

rectangle_button_pressed.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
 android:shape="rectangle" >
    <solid android:color="@color/textColor" />
 <!-- <stroke
        android:width="1dp"
        android:color="@color/blue_bg" />
    <corners android:radius="4dp" />-->
</shape>

rounded_dialogue_bg.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <!-- view background color -->
    <solid
        android:color="@android:color/white" ></solid>
    <!-- view border color and width -->
    <stroke
        android:width=".5dp"
        android:color="@android:color/holo_blue_bright" ></stroke>
    <!-- If you want to add some padding -->
    <padding
        android:left="3dp"
        android:top="3dp"
        android:right="3dp"
        android:bottom="3dp" ></padding>
    <!-- Here is the corner radius -->
    <corners
        android:radius="5dp" ></corners>
</shape>

Please see the screen shots and source code.