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.

  1. <RelativeLayout
  2. xmlns:android="http://schemas.android.com/apk/res/android"
  3. xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
  4. android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
  5. android:paddingRight="@dimen/activity_horizontal_margin"
  6. android:paddingTop="@dimen/activity_vertical_margin"
  7. android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">
  8. <Button
  9. android:id="@+id/button"
  10. android:text="Show Dialogue"
  11. android:layout_width="wrap_content"
  12. android:layout_height="wrap_content" />
  13. </RelativeLayout>
And bind the UI controls in the Java file like the following,
  1. Button button = (Button) findViewById(R.id.button);
Now create the custom dialogue layout like the following,
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout
  3. xmlns:android="http://schemas.android.com/apk/res/android"
  4. android:layout_width="wrap_content"
  5. android:layout_height="wrap_content"
  6. android:layout_centerInParent="true"
  7. android:background="@drawable/rounded_dialogue_bg"
  8. android:orientation="vertical">
  9. <LinearLayout
  10. android:layout_width="fill_parent"
  11. android:layout_height="wrap_content"
  12. android:background="@color/textColor"
  13. android:orientation="horizontal">
  14. <TextView
  15. android:id="@+id/verifyheadertextId"
  16. android:layout_width="fill_parent"
  17. android:layout_height="wrap_content"
  18. android:layout_gravity="center"
  19. android:layout_marginRight="20dp"
  20. android:gravity="left"
  21. android:paddingBottom="5dp"
  22. android:paddingLeft="10dp"
  23. android:paddingTop="5dp"
  24. android:text="tilte"
  25. android:textColor="@android:color/white"/>
  26. </LinearLayout>
  27. <LinearLayout
  28. android:layout_width="wrap_content"
  29. android:layout_height="wrap_content"
  30. android:orientation="horizontal"
  31. android:paddingLeft="25dp"
  32. android:paddingRight="25dp"
  33. android:paddingTop="20dp">
  34. <EditText
  35. android:id="@+id/status_message"
  36. android:textColor="@color/textColor"
  37. android:layout_width="200dp"
  38. android:layout_height="wrap_content"
  39. android:lines="1"
  40. android:singleLine="true" />
  41. </LinearLayout>
  42. <LinearLayout
  43. android:layout_width="fill_parent"
  44. android:layout_height="30dp"
  45. android:layout_marginBottom="30dp"
  46. android:layout_marginLeft="10dp"
  47. android:layout_marginRight="5dp"
  48. android:layout_marginTop="15dp"
  49. android:gravity="center_horizontal"
  50. android:orientation="horizontal">
  51. <Button
  52. android:id="@+id/dialog_verify_ButtonId"
  53. android:layout_width="0dp"
  54. android:layout_height="30dp"
  55. android:layout_marginLeft="5dp"
  56. android:layout_weight="2"
  57. android:background="@drawable/button_selector"
  58. android:text="Ok"
  59. android:textColor="@android:color/white" />
  60. <Button
  61. android:id="@+id/dialog_cancel_ButtonId"
  62. android:layout_width="0dp"
  63. android:layout_height="30dp"
  64. android:layout_marginLeft="5dp"
  65. android:layout_weight="2"
  66. android:background="@drawable/button_selector"
  67. android:text="cancel"
  68. android:textColor="@android:color/white"
  69. android:textStyle="bold" />
  70. </LinearLayout>
  71. </LinearLayout>
And create the binder class for the custom layout.
  1. public static void showStatusMessageDialogue(final Context context) {
  2. Button verifyButton;
  3. Button cancelButton;
  4. final EditText status_message;
  5. //
  6. final Dialog expiryDialog = new Dialog(context);
  7. expiryDialog.getWindow().setBackgroundDrawable(
  8. new ColorDrawable(android.graphics.Color.TRANSPARENT));
  9. expiryDialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
  10. expiryDialog.setContentView(R.layout.custom_dialogue);
  11. status_message = (EditText) expiryDialog
  12. .findViewById(R.id.status_message);
  13. expiryDialog.setCancelable(false);
  14. verifyButton = (Button) expiryDialog
  15. .findViewById(R.id.dialog_verify_ButtonId);
  16. cancelButton = (Button) expiryDialog
  17. .findViewById(R.id.dialog_cancel_ButtonId);
  18. cancelButton.setOnClickListener(new View.OnClickListener() {
  19. @Override
  20. public void onClick(View v) {
  21. expiryDialog.dismiss();
  22. }
  23. });
  24. verifyButton.setOnClickListener(new View.OnClickListener() {
  25. @Override
  26. public void onClick(View v) {
  27. if (!TextUtils.isEmpty(status_message.getText().toString())) {
  28. expiryDialog.dismiss();
  29. } else {
  30. Toast.makeText(
  31. context,
  32. "Please enter the member", Toast.LENGTH_LONG)
  33. .show();
  34. }
  35. }
  36. });
  37. expiryDialog.show();
  38. }
We need to have some drawable xmls to make the UI is attractive please see them below,

button_selector.xml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <selector xmlns:android="http://schemas.android.com/apk/res/android">
  3. <item android:drawable="@drawable/rectangle_button_pressed" android:state_pressed="true"></item>
  4. <item android:drawable="@drawable/rectangle_button_focused" android:state_focused="true"></item>
  5. <item android:drawable="@drawable/rectangle_button" ></item>
  6. </selector>
rectangle_button.xml
  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
  3. <item>
  4. <shape android:shape="rectangle">
  5. <solid android:color="@color/textColor"/>
  6. <corners android:radius="4dp"/>
  7. </shape>
  8. </item>
  9. <item android:bottom="3dp">
  10. <shape android:shape="rectangle">
  11. <solid android:color="@color/textColor" />
  12. <corners android:radius="4dp"/>
  13. </shape>
  15. </item>
  16. </layer-list>
rectangle_button_focused.xml
  1. <shape xmlns:android="http://schemas.android.com/apk/res/android"
  2. android:shape="rectangle" >
  3. <solid android:color="@color/textColor" />
  4. <!-- <stroke
  5. android:width="1dp"
  6. android:color="@color/blue_bg" />
  7. <corners android:radius="4dp" />-->
  8. </shape>
rectangle_button_pressed.xml
  1. <shape xmlns:android="http://schemas.android.com/apk/res/android"
  2. android:shape="rectangle" >
  3. <solid android:color="@color/textColor" />
  4. <!-- <stroke
  5. android:width="1dp"
  6. android:color="@color/blue_bg" />
  7. <corners android:radius="4dp" />-->
  8. </shape>
rounded_dialogue_bg.xml
  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <shape
  3. xmlns:android="http://schemas.android.com/apk/res/android"
  4. android:shape="rectangle">
  5. <!-- view background color -->
  6. <solid
  7. android:color="@android:color/white" ></solid>
  8. <!-- view border color and width -->
  9. <stroke
  10. android:width=".5dp"
  11. android:color="@android:color/holo_blue_bright" ></stroke>
  12. <!-- If you want to add some padding -->
  13. <padding
  14. android:left="3dp"
  15. android:top="3dp"
  16. android:right="3dp"
  17. android:bottom="3dp" ></padding>
  18. <!-- Here is the corner radius -->
  19. <corners
  20. android:radius="5dp" ></corners>
  21. </shape>
Please see the screen shots and source code.