Android Studio : AlertDialog and EditText to get user string input example




This is a supplementary tutorial for the previous tutorial on how to get user attention with AlertDialog. In this tutorial, we will learn how to add an EditText string box to get the user input and display the entry on the main activity layout, such as shown below:

alert dialog with input

The following is a modification of previous tutorial activity_main_alert_dialog.xml file. Basically, we just add the EditText string input box to prompt the user to enter his/her username.

First, navigate the project structure in Android Studio and open up res/values/strings.xml file.

Add <string name="username">Enter your user name here.</string> in the file. We will use the new string as a hint.

strings.xml

 <resources>
 <string name="app_name">AlertDialog</string>
 <string name="username">Enter your user name here.</string>
 </resources>

Next, let's move to res/layout and create a new layout. Right click layout and navigate to Layout Resource File such as shown in the image below:

right click to create new layout

In the new layout, let's name it dialog_prompt_user.xml, add the following XML codes and save.


 <?xml version="1.0" encoding="utf-8"?>
  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:orientation="vertical"
 android:padding="20dp"
 android:layout_width="match_parent"
 android:layout_height="match_parent">


 <EditText
 android:id="@+id/username"
 android:inputType="textEmailAddress"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:layout_marginTop="16dp"
 android:layout_marginLeft="4dp"
 android:layout_marginRight="4dp"
 android:layout_marginBottom="4dp"
 android:hint="@string/username" />


  </LinearLayout>

and finally, modify the /rest/values/layout/activity_main_alert_dialog.xml file, by a adding a new TextView:


  <?xml version="1.0" encoding="utf-8"?>
  <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 tools:context="com.example.sweetlogic.alertdialog.MainAlertDialog"
 tools:layout_editor_absoluteX="0dp"
 tools:layout_editor_absoluteY="81dp">

 <Button
 android:id="@+id/buttonPromptUser"
 android:layout_width="300dp"
 android:layout_height="50dp"
 android:text="Prompt User For Input"
 app:layout_constraintBottom_toBottomOf="parent"
 app:layout_constraintLeft_toLeftOf="parent"
 app:layout_constraintRight_toRightOf="parent"
 app:layout_constraintTop_toTopOf="parent"
 tools:layout_editor_absoluteX="42dp"
 tools:layout_editor_absoluteY="230dp" />

 <TextView
 android:id="@+id/TextAnswer"
 android:layout_width="300dp"
 android:layout_height="wrap_content"
 android:text="Your username will be displayed here..."
 app:layout_constraintBottom_toBottomOf="parent"
 app:layout_constraintLeft_toLeftOf="parent"
 app:layout_constraintRight_toRightOf="parent"
 app:layout_constraintTop_toTopOf="parent"
 app:layout_constraintVertical_bias="0.321" />
  </android.support.constraint.ConstraintLayout>

Ok, now we are done with the design phase. It is time to link all these widgets and UI elements together with Java. Head over to MainAlertDialog.java file and fill it up with these codes:


 package com.example.sweetlogic.alertdialog;

  import android.content.Context;
  import android.content.DialogInterface;
  import android.os.Bundle;
  import android.support.v7.app.AlertDialog;
  import android.support.v7.app.AppCompatActivity;
  import android.view.LayoutInflater;
  import android.view.View;
  import android.widget.Button;
  import android.widget.EditText;
  import android.widget.TextView;
  import android.widget.Toast;

  public class MainAlertDialog extends AppCompatActivity {


 final Context context = this;
 private Button button;

 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main_alert_dialog);

 addListenerOnButton();
 }

 public void addListenerOnButton() {
 Button button = (Button) findViewById(R.id.buttonPromptUser);
 final TextView usernameText = (TextView) findViewById(R.id.TextAnswer);



 button.setOnClickListener(new View.OnClickListener() {

 @Override
 public void onClick(View arg0) {

 // load the dialog_promt_user.xml layout and inflate to view
 LayoutInflater layoutinflater = LayoutInflater.from(context);
 View promptUserView = layoutinflater.inflate(R.layout.dialog_prompt_user, null);

 AlertDialog.Builder alertDialogBuilder = new AlertDialog.Builder(context);

 alertDialogBuilder.setView(promptUserView);

 final EditText userAnswer = (EditText) promptUserView.findViewById(R.id.usernameInput);

 alertDialogBuilder.setTitle("What's your username?");

 // prompt for username
 alertDialogBuilder.setPositiveButton("Ok",new DialogInterface.OnClickListener() {
 public void onClick(DialogInterface dialog, int id) {
 // and display the username on main activity layout
 usernameText.setText(userAnswer.getText()); 
 }
 });

 // all set and time to build and show up!
 AlertDialog alertDialog = alertDialogBuilder.create();
 alertDialog.show();


 }
 });

 }
  }

If everything goes well, you should see the app running after hitting the Run button.

modified alert dialog app now with textview and prompt for input

References:

https://socketloop.com/tutorials/android-studio-checkbox-for-user-to-select-options-example

https://developer.android.com/guide/topics/ui/dialogs.html

  See also : Android Studio : Checkbox for user to select options example





By Adam Ng

IF you gain some knowledge or the information here solved your programming problem. Please consider donating to the less fortunate or some charities that you like. Apart from donation, planting trees, volunteering or reducing your carbon footprint will be great too.


Advertisement