Post
Ask Question

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.

  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>  
  14.   
  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.