How to display a custom dialog in your Android application

How to display a custom dialog in your Android application

Yesterday Jozsi showed you, how to make an alert dialog, today I'm going to show you, how to make a custom dialog/popup window.
Sometimes, it's better to make your own dialog, because this way, you can display whatewer you want., the way you want it.
First, make your own layout, with the needed elements. Here, I'm going to use two buttons, a textview inside a scrollview, and an imageview...

Here is my main layout, main.xml. It's just a textview, with a button:

1. <? xml version= "1.0" encoding= "utf-8" ?>
2.  
3. < RelativeLayout android: id= "@+id/RelativeLayout01&quot;
4. android: layout_width= "fill_parent"
5. android: layout_height= "fill_parent"
6. xmlns: android= "http://schemas.android.com/apk/res/android" >
7.  
8. < TextView android: id= "@+id/TextView01"
9. android: layout_width= "wrap_content"
10. android: layout_height= "wrap_content"
11. android: text= "This is my main activity, from here, I want to display a dialog, after the user clicked the button below this text." >
12. </ TextView>
13.  
14. < Button android: layout_height= "wrap_content"
15. android: layout_below= "@+id/TextView01"
16. android: layout_width= "wrap_content"
17. android: id= "@+id/Button01main"
18. android: text= "Hey! There is more..." ></ Button>
19.  
20. </ RelativeLayout>

Here is my dialog's layout, maindialog.xml:

1. <? xml version= "1.0" encoding= "utf-8" ?>
2. < RelativeLayout xmlns: android= "http://schemas.android.com/apk/res/android"
3.  android: layout_width= "wrap_content" android: layout_height= "wrap_content" >
4.  
5. < ImageView android: id= "@+id/ImageView01"
6.  android: layout_width= "wrap_content" android: layout_height= "wrap_content"
7.  android: layout_centerHorizontal= "true" />
8.  
9.  < ScrollView android: id= "@+id/ScrollView01"
10.  android: layout_width= "wrap_content" android: layout_below= "@+id/ImageView01"
11.  android: layout_height= "200px" >
12.  
13.  < TextView android: text= "@+id/TextView01" android: id= "@+id/TextView01"
14.  android: layout_width= "wrap_content" android: layout_height= "wrap_content" />
15.  
16.  </ ScrollView>
17.  
18.  < Button android: id= "@+id/Button01" android: layout_below= "@id/ScrollView01"
19.  android: layout_width= "wrap_content" android: layout_height= "wrap_content"
20.  android: layout_centerHorizontal= "true" android: text= "Cancel" />
21.  
22. </ RelativeLayout>

Now that the xml part is all set up, it's time to code.

1. public class main extends Activity {
2.     @Override
3.     public void onCreate( Bundle savedInstanceState) {
4.         super .onCreate ( savedInstanceState) ;
5.         //set up main content view
6.         setContentView( R.layout .main ) ;
7.         //this button will show the dialog
8.         Button button1main = ( Button ) findViewById( R.id .Button01main ) ;
9.  
10.         button1main.setOnClickListener ( new OnClickListener( ) {
11.         @Override
12.             public void onClick( View v) {
13.                 //set up dialog
14.                 Dialog dialog = new Dialog ( main.this ) ;
15.                 dialog.setContentView ( R.layout .maindialog ) ;
16.                 dialog.setTitle ( "This is my custom dialog box" ) ;
17.                 dialog.setCancelable ( true ) ;
18.                 //there are a lot of settings, for dialog, check them all out!
19.  
20.                 //set up text
21.                 TextView text = ( TextView) dialog.findViewById ( R.id .TextView01 ) ;
22.                 text.setText ( R.string .lots_of_text ) ;
23.  
24.                 //set up image view
25.                 ImageView img = ( ImageView) dialog.findViewById ( R.id .ImageView01 ) ;
26.                 img.setImageResource ( R.drawable .nista_logo ) ;
27.  
28.                 //set up button
29.                 Button button = ( Button ) dialog.findViewById ( R.id .Button01 ) ;
30.                 button.setOnClickListener ( new OnClickListener( ) {
31.                 @Override
32.                     public void onClick( View v) {
33.                         finish( ) ;
34.                     }
35.                 } ) ;
36.                 //now that the dialog is set up, it's time to show it    
37.                 dialog.show ( ) ;
38.             }
39.         } ) ;
40.     }
41.  }