Android User Interface Design: EditText Controls

In this tutorial, you'll learn how to create basic Android EditText controls to gather text input from the user. Then you'll learn how to configure, style, and manipulate these controls in a variety of ways.

This tutorial shows you the steps to create a number of different EditText controls in your Android application. First, you learn how to add basic text input controls to your layout files and what some of their most useful attributes are. Next, you learn how to retrieve the text control’s contents. Finally, we discuss some of the other features available to EditText control in Android.

The Android SDK includes a simple editable text control for use within your layouts: EditText (android.widget.EditText). A good example of EditText control usage would be to collect form input, like "Enter a Name:" or "Enter a Password:".

Figure 1 shows an example of a screen with many different EditText controls displayed on it.

Android screen with numerous EditText controls

Step 1: Create an Android Application

Begin by creating an Android project. Implement your Android application as normal. Once you have a project set up and the application running, decide under what screen you want to add controls to. Perhaps you’ve simply created a new Android project with its default Activity and layout (main.xml). This will work for this exercise. Once you have gotten your Android project set up, you are ready to proceed with this tutorial.

Step 2: Adding a EditText Control to a Layout

EditText controls are usually included as part of your Activity’s layout resource file. For example, to add a EditText control to the main.xml layout resource associated with your application, you must edit the layout file. You can do this within Eclipse using the Layout Resource designer, or by editing the XML directly. Controls can also be created programmatically and added to your screen at runtime. Simply create a EditText control (android.widget.EditText) and add it to your layout within your Activity.

To add a EditText control to a layout resource file, open the /res/layout/main.xml layout file that is part of your Android project. Click on the LinearLayout (or parent layout control) that you wish to add the EditText control to. In Eclipse from within the graphical Layout Resource designer, you can select the EditText control and drag it into the parent layout.

To configure how the EditText control looks and behaves, adjust the control’s attributes by selecting the control (either in the Outline tab or the Preview window) and changing its attributes, as shown the Properties Tab. You can also edit the XML directly.

Here’s what the XML definition for a very basic EditText control looks like:

<EditText
        android:id="@+id/editTextSimple"
        android:layout_height="wrap_content"
        android:layout_width="match_parent">
</EditText>

Specific attributes of EditText controls you will want to be aware of:

Give the EditText control a unique name using the id property. This is the identifier that you will need to use to programmatically retrieve the value of this control.
Set the layout height and layout width properties of the control as appropriate.
The EditText class is derived from the TextView class, so most static TextView control attributes (and related methods) still apply. For example, you can set any other attributes you desire to adjust the control’s appearance. For example, adjust the text size, color, font or other style settings for the EditText control.

Let’s discuss some of the most common attributes for EditText controls.

Step 3: Retrieving the Value of an EditText Control Programmatically

To retrieve the value of an EditText control from within your Activity, you can use the getText() method of the EditText class. For example, the following code retrieves a handle to the EditText control defined as editTextSimple:

final EditText simpleEditText = (EditText) findViewById(R.id.editTextSimple);
String strValue = simpleEditText.getText().toString();

Step 4: Monitoring an EditText Control for Actions

You normally want to retrieve the contents of EditText, as well as other form controls at a specific event. Often, this sort of information gathering is triggered by the user pressing a button (like OK or Submit), or hitting the Back button.

However, you can monitor controls like EditText more closely if you so desire by using the typical View control listeners.

Typically, you might be interested in listening for events such as :

1. When a user clicks on the control. In this case, register a listener using the setOnClickListener() method.

1. When a user long-clicks on the control. In this case, register a listener using the setOnLongClickListener() method.

1. When a user presses a key within the control. In this case, register a listener using the setOnKeyListener() method.

1. When a user changes focus to or from the control. In this case, register a listener using the setOnFocusChangedListener() method.

Let’s look at the focus changing example. When the control first gets focus, you’ll see a focus changed event. Once the user moves focus away from this control, you’ll see it again. Here’s an example of how to monitor the contents of an EditText control on focus changes from within your Activity class:

final EditText simpleEditText = (EditText) findViewById(R.id.editTextSimple);
simpleEditText.setOnFocusChangeListener(new OnFocusChangeListener() {
    public void onFocusChange(View v, boolean hasFocus) {
        String strValue = simpleEditText.getText().toString();
        Log.d(DEBUG_TAG, "User set EditText value to " + strValue);
    } 
});

Step 5: Collecting Different Types of Input

By default, any text contents within an EditText control is displayed as plain text. The default software keyboard is used, for inputting plain text. However, by setting one simple attribute called inputType, all you can facilitate input of different types of information, like phone numbers and passwords. In XML, this property would appear within your EditText control as:

android:inputType="phone"

android:inputType="textPassword"

There are a variety of different input types for different purposes. The phone inputType will restrict the user to numbers; the software keyboard will provide numeric options, as shown in Figure 2.

Similarly, the password input method masks the password as you type it, as shown in Figure 3.

EditText control with masked password input method

Retrieving this information from the control is performed exactly the same as if you were collecting basic text, using the getText() method.

Step 6: Setting Hints and Values of EditText Controls

Generally speaking, EditText controls are used for collecting input, not displaying it. That said, you can always set the value of an EditText control using the setText() method, just as you would a regular TextView control.

You may also want to set the hint for the EditText control to prompt a user for specific input. When the user types in this control, the hint is overwritten. You can set the hint string of your EditText control in your layout using the hint attribute:

android:hint="@string/hint"

Figure 4 shows two EditText controls. The first has a hint set to prompt the user. The second sets the value (and text color - red) of the control. This is not a hint, but the actual VALUE set within the control.

EditText controls with hint and value attributes

Step 7: Facilitating Textual Input within EditText Controls

You can make your users’ lives easier by setting a few extra attributes on your EditText controls. For example, you might want to use the capitalize attribute to automatically capitalize each sentence, word or character in an EditText control:

android:capitalize="sentences"

Although the sentences option is likely the most popular, you might want to capitalize each word for input like names and each character for two letter state abbreviations.

Similarly, you can limit the characters that can be entered into a field using the digits attribute. For example, you might limit a number field to zeros and ones like this:

android:digits="01"

By default the cursor displays in an EditText during input. You can disable the cursor using the cursorVisible attribute, like so:

android:cursorVisible="false"

Conclusion

We’ve only scratched the surface of what you can do with an EditText control. EditText controls are commonly used in Android application user interfaces to gather textual input from the user. In this tutorial, you learned how to create Android EditText controls and customize them in a variety of simple ways. One of the most powerful features of EditText controls is the ability to set its inputType in order to collect text, numbers, email addresses, and other information from the user. These attributes can be mixed and matched to allow for very flexible input controls on the screen.

About the Authors

Mobile developers Lauren Darcey and Shane Conder have coauthored several books on Android development: an in-depth programming book entitled Android Wireless Application Development, Second Edition and Sams Teach Yourself Android Application Development in 24 Hours, Second Edition. When not writing, they spend their time developing mobile software at their company and providing consulting services. They can be reached at via email to [email protected], via their blog at androidbook.blogspot.com, and on Twitter @androidwireless.