RSS

Android Custom dialogs

16 Aug

We are gonna try make something like this:

First off, start with the xml side of it. Open a new xml file in the layout folder. Name it something. It is in this xml file that we are going to design how it will look. Here is the xml for this one:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/layout_root"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffffff"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dp"
        android:orientation="horizontal" >
		
        <!-- This is for the info image -->
        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="20dp"
            android:src="@android:drawable/ic_menu_info_details" />

        <!-- Title -->
        <TextView
            android:id="@+id/tvmessagedialogtitle"
            android:layout_width="184dp"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:layout_marginTop="4dip"
            android:layout_weight="0.01"
            android:padding="8dp"
            android:text="Message"
            android:textColor="#343434"
            android:textSize="16dip"
            android:textStyle="normal"
            android:typeface="normal" />
    </LinearLayout>

    <!-- Underline with this bluish color -->
    <View
        android:layout_width="fill_parent"
        android:layout_height="2dip"
        android:background="#09adb9" />

    <!-- The message -->
    <TextView
        android:id="@+id/tvmessagedialogtext"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:layout_marginBottom="10dp"
        android:layout_marginTop="4dip"
        android:gravity="left"
        android:padding="8dp"
        android:text="Message"
        android:textColor="#343434"
        android:textSize="15dip"
        android:textStyle="normal"
        android:typeface="normal" />

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dp"
        android:orientation="horizontal" >

        <!-- Yes button -->
        <Button
            
            android:id="@+id/bmessageDialogYes"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="4dip"
            android:layout_marginLeft="60dp"
            android:background="#ffffff"
            android:padding="8dp"
            android:text="Yes"
            android:textColor="#343434"
            android:textSize="13dip"
            android:textStyle="normal"
            android:typeface="normal" />

        <!-- No Button -->
        
        <Button
            android:id="@+id/bmessageDialogNo"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="4dip"
            android:layout_marginLeft="80dp"
            android:background="#ffffff"
            android:padding="8dp"
            android:text="No"
            android:textColor="#343434"
            android:textSize="13dip"
            android:textStyle="normal"
            android:typeface="normal" />
    </LinearLayout>

</LinearLayout>

By default, dialogs are set to come with a title, even when none is defined it still gives this blank grey area thats not cool at all. So we want to get rid of that. Ive got to say I found this at stackoverflow.com, I dont remember who it was, but I’m still going to give him/her credit here.
So go over to the res folder, under it there is a values folder then open styles.xml. Add the following entry between the tags.

<style name="FullHeightDialog" parent="android:style/Theme.Dialog">
   <item name="android:windowNoTitle">true</item>
	</style>

Now over at the java side:

Dialog dialog = new Dialog(this, R.style.FullHeightDialog); //this is a reference to the style above
dialog.setContentView(R.layout.yesnomessage); //I saved the xml file above as yesnomessage.xml
dialog.setCancelable(true);

//to set the message
TextView message =(TextView) dialog.findViewById(R.id.tvmessagedialogtext);
message.setText("You are about to call " + num + ". Are you sure you want to call?");

//add some action to the buttons
            String num = "0123456789"
            yes = (Button) dialog.findViewById(R.id.bmessageDialogYes);
            yes.setOnClickListener(new OnClickListener() {
				
				public void onClick(View v) {
					Intent callIntent = new Intent(Intent.ACTION_CALL);
					callIntent.setData(Uri.parse("tel: " + num));
					dialog.dismiss();
					startActivity(callIntent);
					
				}
			});
            
            no = (Button) dialog.findViewById(R.id.bmessageDialogNo);
            no.setOnClickListener(new OnClickListener() {
				
				public void onClick(View v) {
					// TODO Auto-generated method stub
					dialog.dismiss();
				}
			});
           
            dialog.show();

Thats it, so this is sort of the interface to my earlier blogpost on how to make a phone call from the app. If the user presses yes on the dialog it starts up an Intent that is passed to the phone app which is launched.

Till again….

Advertisements
 
1 Comment

Posted by on August 16, 2012 in Android, Android tutorials, Code

 

Tags: , , ,

One response to “Android Custom dialogs

  1. Krishna Mallepula

    January 4, 2013 at 12:44 pm

    Very nice tutorial!

     

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: