Custom Alert Dialogues in Android

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">
<solid
android:color="@android:color/white" ></solid>
<stroke
android:width=".5dp"
android:color="@android:color/holo_blue_bright" ></stroke>
<padding
android:left="3dp"
android:top="3dp"
android:right="3dp"
android:bottom="3dp" ></padding>
<corners
android:radius="5dp" ></corners>
</shape>

Please see the screen shots and source code.