Posts Tagged Notification

Custom Dialog in Android

A Custom Dialog  is a Dialog which we can customise and give our own design. Let’s see how this is done with an example.

Firstly, let’s create our custom layout. I’ve given below my xml layout which I named my_custom_dialog.xml  . I’ve included  an ImageView, a TextView and a Button in the layout.

The Xml layout my_custom_dialog.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
         >
    <ImageView
        android:id="@+id/imgv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        />
          <TextView
              android:id="@+id/tv"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:textSize="25dip"
              />
    </LinearLayout>
      <Button
          android:id="@+id/btnfinish"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="Click to Finish my Custom Dialog"
          />
    </LinearLayout>

In the main.xml I’ve included a Button clicking on which will display the Custom Dialog.

The XML layout named main.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >
       <Button
        android:id="@+id/btnclick"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Click to start my Custom Dialog" />
 </LinearLayout>

Now let’s move on to the coding. Firstly, create an instance of the Dialog class and then set the customized layout, here, my_custom_dialog.xml, as the ContentView for the Custom Dialog by calling the method setContentView(int) and passing the custom layout resource id to it.

Here is the code:

myDialog = new Dialog(MyCustomDialog.this);
myDialog.setContentView(R.layout.my_custom_dialog);

Next, let’s give our Dialog a title as shown below:

myDialog.setTitle("My Custom Dialog Title");

Now, we need to find the View Objects in the layout.

txtv=(TextView)myDialog.findViewById(R.id.tv);
imgv=(ImageView)myDialog.findViewById(R.id.imgv);
finishbtn=(Button)myDialog.findViewById(R.id.btnfinish);

Having captured the View Objects in our layout, let’s set their properties.

txtv.setText("My Custom Dialog Text");
imgv.setImageResource(R.drawable.kitty);
finishbtn.setOnClickListener(new OnClickListener() {            
@Override
public void onClick(View v) {
          // TODO Auto-generated method stub
          myDialog.cancel();
          }
          });

Here in the ClickListener of the button ‘finishbtn’, I’ve written the code for closing the Custom Dialog.

Finally, we need to create and display the Custom Dialog. This is done using show() method.

myDialog.show();

The Whole code for the application is given below:

package com.deepthi.mycustomdialog;
 import android.app.Activity;
import android.app.Dialog;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.TextView;
 public class MyCustomDialog extends Activity {
    /** Called when the activity is first created. */
      Button click,finishbtn;
      TextView txtv;
      ImageView imgv;
      Dialog myDialog;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        click=(Button)findViewById(R.id.btnclick);
        click.setOnClickListener(new OnClickListener() {
                 @Override
                  public void onClick(View v) {
                        // TODO Auto-generated method stub
                        myDialog = new Dialog(MyCustomDialog.this);
                        myDialog.setContentView(R.layout.my_custom_dialog);
                        myDialog.setTitle("My Custom Dialog Title");
                        txtv=(TextView)myDialog.findViewById(R.id.tv);
                        txtv.setText("My Custom Dialog Text");
                        imgv=(ImageView)myDialog.findViewById(R.id.imgv);
                        imgv.setImageResource(R.drawable.kitty);
                        finishbtn=(Button)myDialog.findViewById(R.id.btnfinish);
                        finishbtn.setOnClickListener(new OnClickListener() {
                             @Override
                              public void onClick(View v) {
                                    // TODO Auto-generated method stub
                                    myDialog.cancel();
                              }
                        });
                        myDialog.show();
                  }
            });
    }
}

The screen shot of the output is show below:

After clicking the button in the activity:

Clicking the button inside the Custom Dialog closes the Dialog.

Advertisements

, , , , , ,

5 Comments