How to create iPhone like Custom Dialog / Alert View or Box in Android

Hi,

Its very interesting to create iPhone Like AlertView (Dialog Box) in Android.

Follow the steps to create iPhone Like AlertView (Dialog Box) in Android

Step 1 : Create android Project in Eclipse as shown below

Step 2 : Create New Class for Custom Dialog as given below

After creating CustomizeDialog.java write following code into it.

 package com.sks.dialog.custom;  
 import android.app.Dialog;  
 import android.content.Context;  
 import android.text.method.ScrollingMovementMethod;  
 import android.view.View;  
 import android.view.View.OnClickListener;  
 import android.view.Window;  
 import android.widget.Button;  
 import android.widget.TextView;  
 /** Class Must extends with Dialog */  
 /** Implement onClickListener to dismiss dialog when OK Button is pressed */  
 public class CustomizeDialog extends Dialog implements OnClickListener {  
     Button okButton;  
     Context mContext;  
     TextView mTitle = null;  
     TextView mMessage = null;  
     View v = null;  
     public CustomizeDialog(Context context) {  
         super(context);  
         mContext = context;  
         /** 'Window.FEATURE_NO_TITLE' - Used to hide the mTitle */  
         requestWindowFeature(Window.FEATURE_NO_TITLE);  
         /** Design the dialog in main.xml file */  
         setContentView(R.layout.main);  
         v = getWindow().getDecorView();  
         v.setBackgroundResource(android.R.color.transparent);  
         mTitle = (TextView) findViewById(R.id.dialogTitle);  
         mMessage = (TextView) findViewById(R.id.dialogMessage);  
         okButton = (Button) findViewById(R.id.OkButton);  
         okButton.setOnClickListener(this);  
     }  
     @Override  
     public void onClick(View v) {  
         /** When OK Button is clicked, dismiss the dialog */  
         if (v == okButton)  
             dismiss();  
     }  
     @Override  
     public void setTitle(CharSequence title) {  
         super.setTitle(title);  
         mTitle.setText(title);  
     }  
     @Override  
     public void setTitle(int titleId) {  
         super.setTitle(titleId);  
         mTitle.setText(mContext.getResources().getString(titleId));  
     }  
     /**  
      * Set the message text for this dialog's window.  
      *   
      * @param message  
      *      - The new message to display in the title.  
      */  
     public void setMessage(CharSequence message) {  
         mMessage.setText(message);  
         mMessage.setMovementMethod(ScrollingMovementMethod.getInstance());  
     }  
     /**  
      * Set the message text for this dialog's window. The text is retrieved from the resources with the supplied  
      * identifier.  
      *   
      * @param messageId  
      *      - the message's text resource identifier <br>  
      * @see <b>Note : if resourceID wrong application may get crash.</b><br>  
      *   Exception has not handle.  
      */  
     public void setMessage(int messageId) {  
         mMessage.setText(mContext.getResources().getString(messageId));  
         mMessage.setMovementMethod(ScrollingMovementMethod.getInstance());  
     }  
 }  

Very Important part to hide dialog default background.

below code is used to set transparant background of dialog.

v = getWindow().getDecorView();  

v.setBackgroundResource(android.R.color.transparent);

Step 3 : Now We have to create custom Layout for Dialog. 

edit main.xml (you can select layout file name as per your specifications)

 <?xml version="1.0" encoding="utf-8"?>  
 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
   android:id="@+id/LinearLayout"  
   android:layout_width="fill_parent"  
   android:layout_height="wrap_content"  
   android:layout_gravity="center"  
   android:layout_margin="0dip"  
   android:background="@drawable/alert_bg"  
   android:orientation="vertical"  
   android:paddingBottom="15dip"  
   android:paddingLeft="0dip"  
   android:paddingRight="0dip"  
   android:paddingTop="0dip" >  
   <TextView  
     android:id="@+id/dialogTitle"  
     android:layout_width="fill_parent"  
     android:layout_height="wrap_content"  
     android:layout_marginTop="20dip"  
     android:background="#00000000"  
     android:gravity="center"  
     android:text=""  
     android:textColor="#fff"  
     android:textSize="22sp"  
     android:textStyle="bold" >  
   </TextView>  
   <TextView  
     android:id="@+id/dialogMessage"  
     android:layout_width="fill_parent"  
     android:layout_height="wrap_content"  
     android:layout_below="@+id/dialogTitle"  
     android:focusable="true"  
     android:focusableInTouchMode="true"  
     android:gravity="center"  
     android:maxLines="10"  
     android:padding="10dip"  
     android:scrollbars="vertical"  
     android:text=""  
     android:textColor="#fff"  
     android:textSize="18sp" >  
   </TextView>  
   <Button  
     android:id="@+id/OkButton"  
     android:layout_width="fill_parent"  
     android:layout_height="wrap_content"  
     android:layout_below="@+id/dialogMessage"  
     android:layout_centerHorizontal="true"  
     android:layout_marginLeft="10dip"  
     android:layout_marginRight="10dip"  
     android:background="@drawable/button"  
     android:text="OK"  
     android:textColor="#FFFFFF" >  
   </Button>  
 </RelativeLayout>  

Step 4 : Add 9 patch image in res->drawable folder given below. You can modify image.

alert_bg.9.png

  

button_bg_normal.9.png

button_bg_pressed.9

titlebg.png
Note : this image transparency is 90% that's why invisible

Step 5 : For adding Focus Effect on Dialog Button create button.xml in drawable folder as given below

 <?xml version="1.0" encoding="utf-8"?>  
 <selector xmlns:android="http://schemas.android.com/apk/res/android">  
     <item android:state_pressed="true" android:drawable="@drawable/button_bg_pressed" /> <!-- pressed -->  
     <item android:state_focused="true" android:drawable="@drawable/button_bg_pressed" /> <!-- focused -->  
     <item android:drawable="@drawable/button_bg_normal" /> <!-- default -->  
 </selector>  

Step 6 : Now Come to our First Activity i.e. CustomDialogExample.java and Modify file as given Below

 package com.sks.dialog.custom;  
 import android.app.Activity;  
 import android.content.Context;  
 import android.os.Bundle;  
 import android.view.View;  
 import android.view.View.OnClickListener;  
 import android.widget.Button;  
 public class CustomDialogExample extends Activity {  
     Context context;  
     CustomizeDialog customizeDialog = null;  
     /** Called when the activity is first created. */  
     @Override  
     public void onCreate(Bundle savedInstanceState) {  
         super.onCreate(savedInstanceState);  
         /** Display Custom Dialog */  
         context = this;  
         setContentView(R.layout.home);  
         Button btn1 = (Button) findViewById(R.id.btnDialog1);  
         btn1.setOnClickListener(new OnClickListener() {  
             @Override  
             public void onClick(View v) {  
                 customizeDialog = new CustomizeDialog(context);  
                 customizeDialog.setTitle("My Title");  
                 customizeDialog.setMessage("My Custom Dialog Message from \nSmartPhoneBySachin.Blogspot.com ");  
                 customizeDialog.show();  
             }  
         });  
     }  
 }  

Now you are ready to Run Project and you will get result as image below

Download Source Code and  Installer Apk

Comments are always welcome.

Enjoy Customization in Android