Custom dialog with user input – Android Example

person folder_openAndroidlocal_offeraccess_time March 2, 2015

Let’s learn how to create Customized AlertDialog with EditText

See following steps :

  1. Create a custom alert dialog layout with EditText (XML file).
  2. Inflate the custom layout to AlertDialog.Builder.
  3. Attach the AlertDialog.Builder to AlertDialog.
  4. Show the custom dialog
  5. Display the user input in main activity

1. Manifest file

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.android"
    android:versionCode="1"
    android:versionName="1.0" >
    <uses-sdk android:minSdkVersion="17" />
    <application
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@android:style/Theme.Holo.Light.DarkActionBar" >
        <activity
            android:label="@string/app_name"
            android:name="MainActivity" >
            <intent-filter >
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>

2. Activity layout files
Place these files in res/layout/ folder.

  1. Main activity layout activity_main.xml
  2. Custom dialog layout custom_dialog.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"
    android:padding="10dp" >
    <Button
        android:id="@+id/btn_dialog"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/btn_dialog_text" />
    <EditText
        android:id="@+id/et_output"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Output"
        android:inputType="text">
    </EditText>
</LinearLayout>
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/ll_dialog"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    android:padding="10dp" >
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Demonstrating custom dialog with user input"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:layout_marginBottom="10dp" />
    <EditText
        android:id="@+id/et_input"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Enter your text here"
        >
        <requestFocus />
    </EditText>
</LinearLayout>

3. Main Activity code

Note the inline comments for better understanding. Note custom dialog layout, custom title, custom dialog icon.

package com.example.android;
import android.app.Activity;
import android.app.AlertDialog;
import android.content.Context;
import android.content.DialogInterface;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.EditText;
public class MainActivity extends Activity {
	final Context mContext = this;
	private Button mButton;
	private EditText etOutput;
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activiyt_main);
		mButton = (Button) findViewById(R.id.btn_dialog);
		etOutput = (EditText) findViewById(R.id.et_output);
		// set mButton on click listener
		mButton.setOnClickListener(new OnClickListener() {
			@Override
			public void onClick(View arg0) {
				// inflate alert dialog xml
				LayoutInflater li = LayoutInflater.from(mContext);
				View dialogView = li.inflate(R.layout.custom_dialog, null);
				AlertDialog.Builder alertDialogBuilder = new AlertDialog.Builder(
						mContext);
				// set title
				alertDialogBuilder.setTitle("Custom Dialog");
				// set custom dialog icon
				alertDialogBuilder.setIcon(R.drawable.ic_launcher);
				// set custom_dialog.xml to alertdialog builder
				alertDialogBuilder.setView(dialogView);
				final EditText userInput = (EditText) dialogView
						.findViewById(R.id.et_input);
				// set dialog message
				alertDialogBuilder
						.setCancelable(false)
						.setPositiveButton("OK",
								new DialogInterface.OnClickListener() {
									public void onClick(DialogInterface dialog,
											int id) {
										// get user input and set it to etOutput
										// edit text
										etOutput.setText(userInput.getText());
									}
								})
						.setNegativeButton("Cancel",
								new DialogInterface.OnClickListener() {
									public void onClick(DialogInterface dialog,
											int id) {
										dialog.cancel();
									}
								});
				// create alert dialog
				AlertDialog alertDialog = alertDialogBuilder.create();
				// show it
				alertDialog.show();
			}
		});
	}
}

4. Demonstration

Custom title, icon, content
Custom title, icon, content
Main activity with the user input from custom dialog
Main activity with the user input from custom dialog

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">