Saturday 27 September 2014

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:



2 comments:

  1. Thanks for your great and helpful presentation I like your good service. I always appreciate your post. That is very interesting I love reading and I am always searching for informative information like this. Well written article Thank You for Sharing with Us pmp training class in chennai | pmp training near me | pmp training courses online | pmp training fee | project management training certification

    ReplyDelete
  2. hello!! Very interesting discussion glad that I came across such informative post. Keep up the good work friend. Glad to be part of your net community. buy percocet online no prescription

    ReplyDelete