Click here to Skip to main content
Click here to Skip to main content

Tagged as

Android: Custom DialogBox

, 27 Sep 2013 CPOL
Rate this:
Please Sign up or sign in to vote.
How to create a custom dialog box in Android.

Introduction

Here we will see how to create a custom dialog box in Android and get results from that dialog box.

Background

Dialog box is mainly a popup or we can say a prompt that opens in front of the current activity to perform some operation or functionality.  

You can use a dialog box to ask the user to confirm an action, notify the user of an event, or prompt the user for additional information. Because dialog boxes disrupt the flow of the UI, you should use them only as a last resort. In most cases, you should integrate confirmation, feedback, and prompts directly into your app.

When a dialog box opens the current activity by which we open the dialog box goes to the background and the dialog box comes in the foreground. After performing the operation on the dialog box we dismiss the dialog box and the background activity comes back to the foreground. 

Using the Code 

Dialog is the base class for creating a dialog box.

Create a project with the following details:

  • ProjectNameCustomDialogBox 
  • PackageNamesat.tuts4mobile.customdialogbox 
  • ActivityNameCustomDialogActivity 

In the CustomDialogActivity.java file, copy the following code: 

package sat.tuts4mobile.customdialogbox;

import android.app.Activity;
import android.app.Dialog;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.Window;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;

public class CustomDialogActivity extends Activity {

    Button buttonDialog;
    TextView textDialog;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        textDialog = (TextView)findViewById(R.id.textView1);
        buttonDialog = (Button)findViewById(R.id.buttondialog);
        buttonDialog.setOnClickListener(new OnClickListener() {
            
            @Override
            public void onClick(View v) {
                // TODO Auto-generated method stub
                showCustomDialog(textDialog);
            }
        });
                
    }

    protected void showCustomDialog(final TextView _textDialog) {
        // TODO Auto-generated method stub
        final Dialog dialog = new Dialog(CustomDialogActivity.this);
        dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
        dialog.setContentView(R.layout.customdailog);
        
        final EditText editText = (EditText)dialog.findViewById(R.id.editText1);
        Button button = (Button)dialog.findViewById(R.id.button1);    
        button.setOnClickListener(new View.OnClickListener() {
            
            @Override
            public void onClick(View v) {
                // TODO Auto-generated method stub
                _textDialog.setText(editText.getText().toString());
                dialog.dismiss();
            }
        });
                
        dialog.show();
    }
}

In the activity_main.xml file, copy the following code: 

 <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" 
    android:padding="10dip">

    <Button
        android:id="@+id/buttondialog"
        android:layout_width="fill_parent"
        android:layout_height="40dip"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:text="Click to show dialog" 
        android:background="#336699"
        android:textSize="25sp"
        android:textColor="#ffffff"/>

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="" 
        android:textSize="25sp"/>

</RelativeLayout>

Create a new XML file named customdialog.xml and copy the following code:  

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="5dip" 
    android:background="#336699">

    <EditText
        android:id="@+id/editText1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:ems="10" 
        android:hint="enter text to display"
        android:singleLine="true">
        
        <requestFocus />
    </EditText>

    <Button
        android:id="@+id/button1"
        android:layout_width="120dip"
        android:layout_height="40dip"
        android:layout_below="@+id/editText1"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="17dp"
        android:text="Submit"
        android:textSize="25sp"
        android:background="#669900" />

</RelativeLayout>

When you run the application you see the following screens:

Points of Interest

You can follow my blog at http://tuts4mobile.blogspot.in for mobile application related articles.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Satyam A.
Software Developer
India India
No Biography provided

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.1411023.1 | Last Updated 27 Sep 2013
Article Copyright 2013 by Satyam A.
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid