Logo Icon Logo
A Crowd-sourced Cookbook on Writing Great Android® Apps
GitHub logo Twitter logo OReilly Book Cover Art

Creating a Custom Dialog with Buttons, Images, and Text

Published? true
FormatLanguage: WikiFormat

Problem:

Using a custom dialog in the application. The dialog is provided with text, images, buttons and also providing tabs in the dialog.

Solution:

Creating a Custom Dialog with Tabs.Since everything can be squeezed into a Dialog in place of an entire activity, the UI seems more compact.

Discussion:

Custom Dialog Class should extend the 'Dialog' class:

public class CustomDialog extends Dialog

Following lines of code present in the CustomDialog class add a title, buttons to the dialog. The layout for the dialog is in custom_dialog_layout.xml.

        setTitle("Dialog Title");
        setContentView(R.layout.custom_dialog_layout);
        //On Click listeners for the buttons present in the Dialog
        Button button1 = (Button) findViewById(R.id.button1);
        Button button2 = (Button) findViewById(R.id.button2);

For the 2 buttons added, On click listeners are defined in the following lines of code. On being clicked, button1 dismisses the dialog and button2 startes a new activity.

        button1.setOnClickListener(new View.OnClickListener() {
            
            @Override
            public void onClick(View v) {
                dismiss(); //to dismiss the Dialog
            }
        });

		button2.setOnClickListener(new View.OnClickListener() {
            
            @Override
            public void onClick(View v) {
            	//Fire an intent on click of this button
				Intent showQuickInfo = new Intent("com.android.oreilly.QuickInfo");
                showQuickInfo.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
                context.startActivity(showQuickInfo);
            }
        });

Here is the XML layout of the dialog, present in /res/layout custom_dialog_layout :

The entire code is enclosed in a linear layout. Within the LinearLayout, a Relative Layout is used to position 2 buttons.Then below the Relative layout, another Relative Layout containing a scroll view is present.

'android_button' and 'thumbsup' are the names of images in /res/drawable.

<LinearLayout
        android:orientation="vertical"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:padding="5dp">
        
	 <RelativeLayout
	     android:layout_width="fill_parent"
	     android:layout_height="wrap_content"
	     android:paddingBottom="10dip">
	            <Button
			        android:id="@+id/button1"
			        android:background="@drawable/android_button"
					android:layout_height="80dip"
					android:layout_width="80dip"
					android:layout_alignParentLeft="true" 
					android:layout_marginLeft="10dip"  
					android:gravity="center"/>
					
				<Button
			        android:id="@+id/button2"
			        android:background="@drawable/thumbsup"
			        android:layout_height="80dip"
					android:layout_width="80dip"
					android:layout_alignParentRight="true"
					android:layout_marginRight="10dip"
					android:gravity="center"/>
		</RelativeLayout>	
        
         <RelativeLayout
	     android:layout_width="fill_parent"
	     android:layout_height="wrap_content"
	     android:paddingBottom="10dip">
	     
		       <ScrollView android:id="@+id/ScrollView01"
			       android:layout_width="wrap_content" 
			       android:layout_height="200px">
		       
			       <TextView 
				       android:id="@+id/TextView01"
				       android:text="@string/lorem"
				       android:layout_width="wrap_content" 
				       android:layout_height="wrap_content"
				       android:gravity="center_horizontal"
				       android:paddingLeft="15dip"
				       android:paddingTop="15dip"
				       android:paddingRight="20dip"
				       android:paddingBottom="15dip"/>

		    	</ScrollView>
      </RelativeLayout>
</LinearLayout>