Google+

Thursday, April 5, 2012

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





16 comments:

Anonymous said...

Hey, looks great! Android beginner here. Is there any modification to the manifest.xml file that needs to be made?

Unknown said...

Hi,
There is no need to make any changes in AndroidMenifest.xml special for Dialog.

You can CheckOut complete sample project from SVN Repository.

Anonymous said...

Have you discovered why the scrolling in the message view is much likely very slower than default scroll...

Unknown said...

Because, the current scrolling message is under textview only. it is not actual scroll view.

if you need to do do you have add ScrollView in message block. it will show you smooth scrolling.

Unknown said...

thank you. it provide good GUI for android.

Javi said...

Hi,
This application must be implemented in framework or working alone?
Thanks!

Unknown said...

Hi Javi,

You can implement it as per you need.

Unknown said...

Thank you very much for such a good article . It helped me in my project after a lot of googling . Thank you .

Unknown said...

sensational!! thanks so much for share. I'm modifying a little bit your class because I want to have an EditText inside and the virtual keyboard appears automatically and disappear when I click the botton.

So I did it to this way:

In the constructor:
teclado_virtual = (InputMethodManager) contexto.getSystemService(contexto.INPUT_METHOD_SERVICE);
teclado_virtual.toggleSoftInput(InputMethodManager.SHOW_FORCED, 0);

and in the Onclick method:
if (teclado_virtual != null)
teclado_virtual.toggleSoftInput(InputMethodManager.HIDE_NOT_ALWAYS, 0);

PD: private final InputMethodManager teclado_virtual;

Anonymous said...

Impressive.

We just released: PortKit: UX Metaphor Equivalents for iOS & Android

http://kintek.com.au/blog/portkit-ux-metaphor-equivalents-for-ios-and-android/

It has side by side comparisons of the native ui widgets and links to downloadable PSDs for designing.

Unknown said...

Sir, can we change background of a dialog box which is having a negative and a positive button?

Unknown said...

@Tanya: Yes you can change it, you just need to replace button images. Or else you can modify dialog view.

Unknown said...

Sir, Please can you tell me how to proceed and what images needs to be replaced?

Unknown said...

goods

Unknown said...

I replaced images for yes no but for yes I want to finish the activity. how can I do that. There is only option cancel() and dismiss();

Sawan said...

Customize Android Search Dialog Using Library
In this tutorial, we are going to learn how to implement and customize android search dialog in our android application. Search functionality is one of the major features most android applications have.
http://www.tellmehow.co/customize-android-search-dialog/

Google+