Custom Alert Dialog in Android

Let's see how to create custom Alert Dialogs in Android.

The main activity is described in MainActivity.java, and it is made of a button that, if clicked, leads to the visualization of the dialog.

Here's the code for the MainActivity:

public class MainActivity extends ActionBarActivity { 
  Context context;
  Dialog dialog;
  
  @Override
  protected void onCreate(Bundle savedInstanceState) { 
    super.onCreate(savedInstanceState); 
    setContentView(R.layout.activity_main);
    context = this;
    Button button1 =(Button)findViewById(R.id.button1); 
    button1.setOnClickListener(new View.OnClickListener() {

  @Override
  public void onClick(View v) {
    // TODO Auto-generated method stub
    dialog = new Dialog(context); 
    dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
    dialog.getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
    dialog.setContentView(R.layout.custom_dialog);
    dialog.show();

    Button positiveButton = (Button)dialog.findViewById(R.id.positive_button); 
    Button negativeButton = (Button)dialog.findViewById(R.id.negative_button);

    positiveButton.setOnClickListener(new OnClickListener(){
      @Override
      public void onClick(View arg0) { 
        dialog.dismiss();
      } 
    });

    negativeButton.setOnClickListener(new OnClickListener(){
      @Override
      public void onClick(View arg0) { 
        dialog.dismiss();
      } 
    });

... //rest of the code here
}

As regards the custom dialog, its layout is defined in the file custom_dialog.xml:

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/ android"
   android:orientation="vertical" 
   android:layout_width="wrap_content" 
   android:layout_height="wrap_content" 
   android:gravity="center_vertical|center_horizontal" 
   android:background="@drawable/dialogs">
   
   <RelativeLayout 
      android:layout_width="fill_parent" 
      android:layout_height="wrap_content" 
      android:paddingLeft="20dip" 
      android:paddingRight="20dip" 
      android:paddingTop="10dip" >

      <ImageView android:id="@+id/dialog_title_image" 
         android:layout_alignParentLeft="true" 
         android:layout_width="wrap_content" 
         android:layout_height="wrap_content" 
         android:background="@drawable/info"/>

      <TextView android:id="@+id/dialog_title" 
         android:layout_width="wrap_content" 
         android:layout_height="wrap_content" 
         android:layout_marginLeft="10dip" 
         android:layout_marginTop="20dp" 
         android:layout_centerInParent="true" 
         android:text="@string/title" 
         android:layout_toRightOf="@id/dialog_title_image" 
         android:textColor="#00adef" 
         android:textSize="20sp"/>

   </RelativeLayout> 

   <TextView
      android:layout_width="fill_parent" 
      android:layout_height="2dip" 
      android:background="#00adef"/>

   <TextView android:id="@+id/dialog_msg" 
      android:layout_width="fill_parent" 
      android:layout_height="wrap_content" 
      android:textColor="@android:color/black" 
      android:textSize="15sp"

      android:text="@string/msg" 
      android:gravity="center" 
      android:layout_marginTop="10dip"/>

   <RelativeLayout 
      android:layout_width="fill_parent" 
      android:layout_height="wrap_content" 
      android:paddingTop="10dip" 
      android:paddingLeft="10dp" 
      android:paddingRight="10dp" 
      android:layout_marginLeft="20dp" 
      android:layout_marginRight="20dp" 
      android:gravity="bottom|center_horizontal" 
      android:paddingBottom="20dip">

      <Button android:id="@+id/negative_button" 
         android:layout_width="100dip" 
         android:layout_height="30dp" 
         android:layout_toRightOf="@+id/positive_button" 
         android:layout_marginLeft="5dp" 
         android:background="#00adef" 
         android:text="@string/no"/>

      <Button android:id="@+id/positive_button" 
         android:layout_width="100dip" 
         android:layout_height="30dp" 
         android:layout_alignBaseline="@+id/negative_button"
         android:layout_alignBottom="@+id/negative_button" 
         android:layout_alignParentLeft="true" 
         android:background="#00adef" 
         android:text="@string/yes" />
   </RelativeLayout> 

</LinearLayout> 

The shape and the borders are defined in dialogs.xml, in the folder drawable:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" > 
  <solid android:color="@android:color/white"/>

  <stroke android:width="5dp" 
          android:color="#00adef" 
          android:dashWidth="8dp" 
          android:dashGap="0dp"/>

  <corners android:radius="25dp"/>
</shape> 

You can download the complete example from our repository: Download CustomDialog.zip


The final result is the following: