Android User Interface Design: EditText Controls

In this tutorial, youll learn how to create basic Android EditText controls to gather text input from the user.
Then youll 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. ext, you learn how to retrieve the text controls contents. Finally, we discuss some of the other
features available to EditText control in Android.
The Android !"# 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, li'e (Enter
a ame$) or (Enter a *assword$).
Figure + shows an example of a screen with many different EditText controls displayed on it.
Step 1: Create an Android Application
,egin by creating an Android pro-ect. Implement your Android application as normal. .nce you have a pro-ect
set up and the application running, decide under what screen you want to add controls to. *erhaps youve
simply created a new Android pro-ect with its default Activity and layout %main.xml&. This will wor' for this
exercise. .nce you have gotten your Android pro-ect 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 Activitys 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.
Android Basics *age +
*ercival A. Fernande/
0ou can do this within Eclipse using the 1ayout 2esource designer, or by editing the 341 directly. 5ontrols
can also be created programmatically and added to your screen at runtime. !imply 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 6res6layout6main.xml layout file that is part of your
Android pro-ect. 5lic' on the 1inear1ayout %or parent layout control& that you wish to add the EditText control
to. In Eclipse from within the graphical 1ayout 2esource designer, you can select the EditText control and drag
it into the parent layout.
To configure how the EditText control loo's and behaves, ad-ust the controls attributes by selecting the control
%either in the .utline tab or the *review window& and changing its attributes, as shown the *roperties Tab. 0ou
can also edit the 341 directly.
7eres what the 341 definition for a very basic EditText control loo's li'e$
8EditText
android$id9:;<id6editText!imple:
android$layout=height9:wrap=content:
android$layout=width9:match=parent:>
86EditText>
!pecific attributes of EditText controls you will want to be aware of$
?ive the EditText control a uni@ue name using the id property. This is the identifier that you will need to
use to programmatically retrieve the value of this control.
!et the layout height and layout width properties of the control as appropriate.
The EditText class is derived from the TextAiew class, so most static TextAiew control attributes %and
related methods& still apply. For example, you can set any other attributes you desire to ad-ust the controls
appearance. For example, ad-ust the text si/e, color, font or other style settings for the EditText control.
1ets discuss some of the most common attributes for EditText controls.
Step 3: Retrieving the Value of an EditText Control rogra!!atically
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
editText!imple$
+. final EditText simpleEditText 9 %EditText& findAiew,yId%2.id.editText!imple&B
C. !tring strAalue 9 simpleEditText.getText%&.to!tring%&B
Step ": #onitoring an EditText Control for Action$
0ou normally want to retrieve the contents of EditText, as well as other form controls at a specific event. .ften,
this sort of information gathering is triggered by the user pressing a button %li'e .# or !ubmit&, or hitting the
,ac' button.
7owever, you can monitor controls li'e EditText more closely if you so desire by using the typical Aiew control
listeners.
Typically, you might be interested in listening for events such as $
+. Dhen a user clic's on the control. In this case, register a listener using the set.n5lic'1istener%& method.
Android Basics *age C
*ercival A. Fernande/
+. Dhen a user longEclic's on the control. In this case, register a listener using the set.n1ong5lic'1istener%&
method.
+. Dhen a user presses a 'ey within the control. In this case, register a listener using the set.n#ey1istener%&
method.
+. Dhen a user changes focus to or from the control. In this case, register a listener using the
set.nFocus5hanged1istener%& method.
1ets loo' at the focus changing example. Dhen the control first gets focus, youll see a focus changed event.
.nce the user moves focus away from this control, youll see it again. 7eres an example of how to monitor the
contents of an EditText control on focus changes from within your Activity class$
final EditText simpleEditText 9 %EditText& findAiew,yId%2.id.editText!imple&B
simpleEditText.set.nFocus5hange1istener%new .nFocus5hange1istener%& F
public void onFocus5hange%Aiew v, boolean hasFocus& F
!tring strAalue 9 simpleEditText.getText%&.to!tring%&B
1og.d%"E,G?=TA?, :Gser set EditText value to : < strAalue&B
H
H&B
Step %: Collecting &ifferent Type$ of 'nput
,y default, any text contents within an EditText control is displayed as plain text. The default software
'eyboard is used, for inputting plain text. 7owever, by setting one simple attribute called inputType, all you can
facilitate input of different types of information, li'e phone numbers and passwords. In 341, this property would
appear within your EditText control as$
android$inputType9:phone:
or
android$inputType9:text*assword:
There are a variety of different input types for different purposes. The phone inputType will restrict the user to
numbersB the software 'eyboard will provide numeric options, as shown in Figure C.
!imilarly, the password input method mas's the password as you type it, as shown in Figure I.
Android Basics *age I
*ercival A. Fernande/
2etrieving this information from the control is performed exactly the same as if you were collecting basic text,
using the getText%& method.
Step (: Setting )int$ and Value$ of EditText Control$
?enerally spea'ing, 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, -ust as you would a regular TextAiew control.
0ou may also want to set the hint for the EditText control to prompt a user for specific input. Dhen the user
types in this control, the hint is overwritten. 0ou can set the hint string of your EditText control in your layout
using the hint attribute$
android$hint9:;string6hint:
Figure J shows two EditText controls. The first has a hint set to prompt the user. The second sets the value
%and text color K red& of the control. This is not a hint, but the actual AA1GE set within the control.
Step *: +acilitating Textual 'nput ,ithin EditText Control$
0ou can ma'e your users lives easier by setting a few extra attributes on your EditText controls. For example,
you might want to use the capitali/e attribute to automatically capitali/e each sentence, word or character in an
EditText control$
android$capitali/e9:sentences:
Although the sentences option is li'ely the most popular, you might want to capitali/e each word for input li'e
names and each character for two letter state abbreviations.
!imilarly, 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 /eros and ones li'e this$
android$digits9:L+:
Android Basics *age J
*ercival A. Fernande/
,y default the cursor displays in an EditText during input. 0ou can disable the cursor using the cursorAisible
attribute, li'e so$
android$cursorAisible9:false:
Android Basics *age M
*ercival A. Fernande/