iPhone like Dialog in Android

Quickly share your Android Code Snippets here...

iPhone like Dialog in Android

Postby reachme.droid » Wed Jul 06, 2011 9:37 am

Hi All,
As the support for the community i would like to post one tutorial on the custom dialog in Android. In one sentence , lets have dialog box similar to one in iPhone.
I know sticking to basics and default is the best but sometime we need to go out of it due to requirements from the clients or from sheer competition .

First lets define the function for the alert pop-up

Code: Select all
[syntax="java"]
/**
    * it will show the OK dialog like iphone, make sure no keyboard is visible
    *
    * @param pTitle - title for dialog ( like Alert,COnfirmation...)
    * @param pMsg - msg for body (like "Are you sure you want to exit this app")
    */

   private void showCustomMessage(String pTitle, final String pMsg) {
      final Dialog lDialog = new Dialog(ParkingMeterScreenActivity.this,
            android.R.style.Theme_Translucent_NoTitleBar);
      lDialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
      lDialog.setContentView(R.layout.r_okcanceldialogview);
      ((TextView) lDialog.findViewById(R.id.dialog_title)).setText(pTitle);
      ((TextView) lDialog.findViewById(R.id.dialog_message)).setText(pMsg);
      ((Button) lDialog.findViewById(R.id.ok)).setText("Ok");
      ((Button) lDialog.findViewById(R.id.cancel))
            .setOnClickListener(new OnClickListener() {

               @Override
               public void onClick(View v) {
                  // TODO Auto-generated method stub
                                                 // code on user pressing cancel button
                  lDialog.dismiss();
               }
            });
      ((Button) lDialog.findViewById(R.id.ok))
            .setOnClickListener(new OnClickListener() {

               @Override
               public void onClick(View v) {
                  // TODO Auto-generated method stub
                                                 // code on user pressing ok button      
                  lDialog.dismiss();

               }
            });
      lDialog.show();

   }

[/syntax]



Code for the xml layout dialog box :


Code: Select all
[syntax="xml"]
<?xml version="1.0" encoding="utf-8" ?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
             android:orientation="vertical"
             android:layout_width="fill_parent"
             android:layout_height="wrap_content"
               android:layout_gravity="center_horizontal|center_vertical"
             >
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
             android:orientation="vertical"
             android:layout_width="fill_parent"
             android:layout_height="wrap_content" 
             android:gravity="center_horizontal"
             android:background="@drawable/alert"
             android:layout_marginLeft="20dip"
             android:layout_marginRight="20dip">
  <TextView android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_marginTop="17dip"
              android:textColor="#ffffff"
              android:text="About to call 323"
              android:textStyle="bold"
              android:textSize="16dip"
              android:id="@+id/dialog_title"/>
  <TextView android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_margin="10dip"
              android:gravity="center_horizontal"
              android:textSize="16dip"
              android:textColor="#ffffff"
              android:text="Are you sure you want to proceed?"
              android:id="@+id/dialog_message"/>
  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="horizontal"
              android:layout_width="fill_parent"
              android:layout_height="wrap_content"
             android:layout_marginTop="10dip"
            android:layout_marginBottom="10dip"
            android:gravity="center_horizontal"
              >
  <Button android:layout_height="40dip"
              android:layout_width="0dip"
              android:background="@drawable/custom_button1"
              android:layout_weight="0.5"
              android:layout_gravity="left"
              android:textColor = "@color/White"
              android:text="Cancel"
              android:textStyle="bold"
              android:layout_marginLeft="10dip"
              android:id="@+id/cancel" />
  <Button android:layout_height="40dip"
           android:layout_width="0dip"
           android:background="@drawable/custom_button"
           android:text="OK"
           android:textStyle="bold"
           android:layout_weight="0.5"
           android:textColor="@color/White"
           android:layout_marginRight="10dip"
           android:layout_marginBottom="10dip"
           android:id="@+id/ok" />
  </LinearLayout>
  </LinearLayout>
  </LinearLayout>

[/syntax]



Lets see the custom background elements thats used in the example - custom_button :


Code: Select all
[syntax="xml"]
<?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/nofocused" >
        <!-- <shape>
            <gradient
                android:endColor="#5c5c5c"
                android:startColor="#5c5c5c"
                android:angle="270" />
            <stroke
                android:width="3dp"
                android:color="#b3b3b4" />
            <corners
                android:radius="3dp" />
            <padding
               
                android:top="10dp"
               
                android:bottom="10dp" />
        </shape>-->
    </item>

    <item android:state_focused="true" android:drawable="@drawable/nofocused" >
       
    </item>

    <item android:drawable="@drawable/focused">       
        <!-- <shape>
            <gradient
                android:endColor="#c1c1c1"
                android:startColor="#c1c1c1"
                android:angle="270" />
            <stroke
                android:width="3dp"
                android:color="#e5e5e5" />
            <corners
                android:radius="3dp" />
            <padding
               
                android:top="10dp"
               
                android:bottom="10dp" />
        </shape>-->
    </item>
</selector>


[/syntax]




Now 2nd Custom background element - custom_button1:


Code: Select all
[syntax="xml"]

<?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/focused" >
        <!-- <shape>
            <gradient
                android:endColor="#5c5c5c"
                android:startColor="#5c5c5c"
                android:angle="270" />
            <stroke
                android:width="3dp"
                android:color="#b3b3b4" />
            <corners
                android:radius="3dp" />
            <padding
               
                android:top="10dp"
               
                android:bottom="10dp" />
        </shape>-->
    </item>

    <item android:state_focused="true" android:drawable="@drawable/focused" >
       
    </item>

    <item android:drawable="@drawable/nofocused">       
        <!-- <shape>
            <gradient
                android:endColor="#c1c1c1"
                android:startColor="#c1c1c1"
                android:angle="270" />
            <stroke
                android:width="3dp"
                android:color="#e5e5e5" />
            <corners
                android:radius="3dp" />
            <padding
               
                android:top="10dp"
               
                android:bottom="10dp" />
        </shape>-->
    </item>
</selector>


[/syntax]


Also there are 3 elements that will be used as below;

a. drawable/alert -> alert.png => background for the alert pop up
b. drawable/focussed & drawable/nonfocussed => nonfocussed.png & focussed.png => button background for cancel and ok.

Iam not able to upload the these images.Let me know how to do so.
reachme.droid
Freshman
Freshman
 
Posts: 2
Joined: Wed Jul 06, 2011 9:19 am

Top

Re: iPhone like Dialog in Android

Postby TheOnoy123 » Tue Jul 12, 2011 9:26 am

why don't you upload your source code, ..
TheOnoy123
Freshman
Freshman
 
Posts: 5
Joined: Fri Jun 24, 2011 12:38 pm

Re: iPhone like Dialog in Android

Postby ajhavener » Tue Jul 19, 2011 1:04 pm

Those codes would be a good part of the view for the dialog. This could make some sense for some users and clients for getting some advance features. Making some mods for the applications is quite a good idea for making it better.
ajhavener
Freshman
Freshman
 
Posts: 2
Joined: Tue Jul 19, 2011 12:49 pm

Re: iPhone like Dialog in Android

Postby reachme.droid » Thu Jul 21, 2011 8:41 am

Hey AnDev's !

Well sorry to keep you on hold was busy with my office work and other chores. As discussed here is the complete standalone project as described above. I have attached the project accordingly.

http://www.mediafire.com/?4cr6j3dom6gdw6j

Please use and explore , Happy coding ;-)

Please review it and let me know your comments and feedback, helps me to develop and continue such activities.
Attachments
iPhone AlertType.zip
(78.02 KiB) Downloaded 280 times
reachme.droid
Freshman
Freshman
 
Posts: 2
Joined: Wed Jul 06, 2011 9:19 am

Re: iPhone like Dialog in Android

Postby lanzhihong » Tue Jul 26, 2011 2:36 am

thank you, excellent~
lanzhihong
Freshman
Freshman
 
Posts: 2
Joined: Tue Jul 26, 2011 2:31 am

Re: iPhone like Dialog in Android

Postby woaiguandage » Fri Aug 19, 2011 9:46 am

thanks
woaiguandage
Once Poster
Once Poster
 
Posts: 1
Joined: Thu Aug 18, 2011 4:44 am

Top

Return to Code Snippets for Android

Who is online

Users browsing this forum: No registered users and 2 guests