• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1page.title=Text Fields
2page.tags=edittext,autocompletetextview
3@jd:body
4
5<div id="qv-wrapper">
6<div id="qv">
7
8<h2>In this document</h2>
9<ol>
10  <li><a href="#Keyboard">Specifying the Keyboard Type</a>
11    <ol>
12      <li><a href="#Behaviors">Controlling other behaviors</a></li>
13    </ol>
14  </li>
15  <li><a href="#Actions">Specifying Keyboard Actions</a>
16    <ol>
17      <li><a href="#ActionEvent">Responding to action button events</a></li>
18      <li><a href="#ActionLabel">Setting a custom action button label</a></li>
19    </ol>
20  </li>
21  <li><a href="#Flags">Adding Other Keyboard Flags</a></li>
22  <li><a href="#AutoComplete">Providing Auto-complete Suggestions</a></li>
23</ol>
24<h2>Key classes</h2>
25<ol>
26  <li>{@link android.widget.EditText}</li>
27  <li>{@link android.widget.AutoCompleteTextView}</li>
28</ol>
29
30</div>
31</div>
32
33<p>A text field allows the user to type text into your app. It can be either single line or
34multi-line. Touching a text field places the cursor and automatically displays the keyboard. In
35addition to typing, text fields allow for a variety of other activities, such as text selection
36(cut, copy, paste) and data look-up via auto-completion.</p>
37
38<p>You can add a text field to you layout with the {@link android.widget.EditText} object. You
39should usually do so in your XML layout with a {@code &lt;EditText&gt;} element.</p>
40
41<img src="{@docRoot}images/ui/edittext-noextract.png" alt="" />
42
43
44
45<h2 id="Keyboard">Specifying the Keyboard Type</h2>
46
47<div class="figure" style="width:300px;margin-top:0">
48<img src="{@docRoot}images/ui/edittext-text.png" alt="" />
49<p class="img-caption"><strong>Figure 1.</strong> The default {@code text} input type.</p>
50</div>
51
52<div class="figure" style="width:300px">
53<img src="{@docRoot}images/ui/edittext-email.png" alt="" />
54<p class="img-caption"><strong>Figure 2.</strong> The {@code textEmailAddress} input type.</p>
55</div>
56
57<div class="figure" style="width:300px">
58<img src="{@docRoot}images/ui/edittext-phone.png" alt="" />
59<p class="img-caption"><strong>Figure 3.</strong> The {@code phone} input type.</p>
60</div>
61
62<p>Text fields can have different input types, such as number, date, password, or email address. The
63type determines what kind of characters are allowed inside the field, and may prompt the virtual
64keyboard to optimize its layout for frequently used characters.</p>
65
66<p>You can specify the type of keyboard you want for your {@link android.widget.EditText} object
67with the <a href="{@docRoot}reference/android/widget/TextView.html#attr_android:inputType">{@code
68android:inputType}</a> attribute. For example, if you want the user to input an email address, you
69should use the {@code textEmailAddress} input type:</p>
70
71<pre>
72&lt;EditText
73    android:id="&#64;+id/email_address"
74    android:layout_width="fill_parent"
75    android:layout_height="wrap_content"
76    android:hint="&#64;string/email_hint"
77    android:inputType="textEmailAddress" />
78</pre>
79
80
81<p>There are several different input types available for different situations.
82Here are some of the more common values for
83<a href="{@docRoot}reference/android/widget/TextView.html#attr_android:inputType"
84>{@code android:inputType}</a>:</p>
85
86<dl>
87  <dt>{@code "text"}</dt>
88    <dd>Normal text keyboard.</dd>
89  <dt>{@code "textEmailAddress"}</dt>
90    <dd>Normal text keyboard with the @ character.</dd>
91  <dt>{@code "textUri"}</dt>
92    <dd>Normal text keyboard with the / character.</dd>
93  <dt>{@code "number"}</dt>
94    <dd>Basic number keypad.</dd>
95  <dt>{@code "phone"}</dt>
96    <dd>Phone-style keypad.</dd>
97</dl>
98
99
100<h3 id="Behaviors">Controlling other behaviors</h3>
101
102<p>The <a href="{@docRoot}reference/android/widget/TextView.html#attr_android:inputType">{@code
103android:inputType}</a> also allows you to specify certain keyboard behaviors, such as whether to
104capitalize all new words or use features like auto-complete and spelling suggestions.</p>
105
106<p>The <a href="{@docRoot}reference/android/widget/TextView.html#attr_android:inputType">{@code
107android:inputType}</a> attribute allows bitwise combinations so you can specify both a keyboard
108layout and one or more behaviors at once.</p>
109
110<p>Here are some of the common input type values that define keyboard behaviors:</p>
111
112<dl>
113  <dt>{@code "textCapSentences"}</dt>
114    <dd>Normal text keyboard that capitalizes the first letter for each new sentence.</dd>
115  <dt>{@code "textCapWords"}</dt>
116    <dd>Normal text keyboard that capitalizes every word. Good for titles or person names.</dd>
117  <dt>{@code "textAutoCorrect"}</dt>
118    <dd>Normal text keyboard that corrects commonly misspelled words.</dd>
119  <dt>{@code "textPassword"}</dt>
120    <dd>Normal text keyboard, but the characters entered turn into dots.</dd>
121  <dt>{@code "textMultiLine"}</dt>
122    <dd>Normal text keyboard that allow users to input long strings of text that include line
123breaks (carriage returns).</dd>
124</dl>
125
126<p>For example, here's how you can collect a postal
127address, capitalize each word, and disable text suggestions:</p>
128
129<pre>
130&lt;EditText
131    android:id="@+id/postal_address"
132    android:layout_width="fill_parent"
133    android:layout_height="wrap_content"
134    android:hint="&#64;string/postal_address_hint"
135    android:inputType="textPostalAddress|
136                       textCapWords|
137                       textNoSuggestions" />
138</pre>
139
140<p>All behaviors are also listed with the <a
141href="{@docRoot}reference/android/widget/TextView.html#attr_android:inputType">{@code
142android:inputType}</a> documentation.</p>
143
144
145<h2 id="Actions">Specifying Keyboard Actions</h2>
146
147<div class="figure" style="width:300px">
148<img src="{@docRoot}images/ui/edittext-actionsend.png" alt="" />
149<p class="img-caption"><strong>Figure 4.</strong> If you declare {@code
150android:imeOptions="actionSend"}, the keyboard includes the Send action.</p>
151</div>
152
153<p>In addition to changing the keyboard's input type, Android allows you to specify an action to be
154made when users have completed their input. The action specifies the button that appears in place of
155the carriage return key and the action to be made, such as "Search" or "Send."</p>
156
157<p>You can specify the action by setting the <a
158href="{@docRoot}reference/android/widget/TextView.html#attr_android:imeOptions">{@code
159android:imeOptions}</a> attribute. For example, here's how you can specify the Send action:</p>
160
161<pre>
162&lt;EditText
163    android:id="@+id/search"
164    android:layout_width="fill_parent"
165    android:layout_height="wrap_content"
166    android:hint="@string/search_hint"
167    android:inputType="text"
168    android:imeOptions="actionSend" />
169</pre>
170
171<p>If you do not explicitly specify an input action then the system attempts to determine if there
172are any subsequent <a
173href="{@docRoot}reference/android/view/View.html#attr_android:focusable">{@code
174android:focusable}</a> fields. If any focusable fields are found following this one, the system
175applies the (@code actionNext} action to the current {@link android.widget.EditText} so the user can
176select Next to move to the next field. If there's no subsequent focusable field, the system applies
177the {@code "actionDone"} action. You can override this by setting the <a
178href="{@docRoot}reference/android/widget/TextView.html#attr_android:imeOptions">{@code
179android:imeOptions}</a> attribute to any other value such as {@code "actionSend"} or {@code
180"actionSearch"} or suppress the default behavior by using the {@code "actionNone"} action.</p>
181
182
183<h3 id="ActionEvent">Responding to action button events</h3>
184
185<p>If you have specified a keyboard action for the input method using <a
186href="{@docRoot}reference/android/widget/TextView.html#attr_android:imeOptions">{@code
187android:imeOptions}</a> attribute (such as {@code "actionSend"}), you can listen for the specific
188action event using an {@link android.widget.TextView.OnEditorActionListener}. The {@link
189android.widget.TextView.OnEditorActionListener} interface provides a callback method called {@link
190android.widget.TextView.OnEditorActionListener#onEditorAction onEditorAction()} that indicates the
191action type invoked with an action ID such as {@link
192android.view.inputmethod.EditorInfo#IME_ACTION_SEND} or {@link
193android.view.inputmethod.EditorInfo#IME_ACTION_SEARCH}.</p>
194
195<p>For example, here's how you can listen for when the user clicks the Send button on the
196keyboard:</p>
197
198<pre>
199EditText editText = (EditText) findViewById(R.id.search);
200editText.setOnEditorActionListener(new OnEditorActionListener() {
201    &#64;Override
202    public boolean onEditorAction(TextView v, int actionId, KeyEvent event) {
203        boolean handled = false;
204        if (actionId == EditorInfo.IME_ACTION_SEND) {
205            sendMessage();
206            handled = true;
207        }
208        return handled;
209    }
210});
211</pre>
212
213
214<h3 id="ActionLabel">Setting a custom action button label</h3>
215
216<p>If the keyboard is too large to reasonably share space with the underlying application (such as
217when a handset device is in landscape orientation) then fullscreen ("extract mode") is triggered. In
218this mode, a labeled action button is displayed next to the input. You can customize the text of
219this button by setting the <a
220href="{@docRoot}reference/android/widget/TextView.html#attr_android:imeActionLabel">{@code
221android:imeActionLabel}</a> attribute:</p>
222
223<pre>
224&lt;EditText
225    android:id="&#64;+id/launch_codes"
226    android:layout_width="fill_parent"
227    android:layout_height="wrap_content"
228    android:hint="&#64;string/enter_launch_codes"
229    android:inputType="number"
230    android:imeActionLabel="&#64;string/launch" />
231</pre>
232
233<img src="{@docRoot}images/ui/edittext-actionlabel.png" alt="" />
234<p class="img-caption"><strong>Figure 5.</strong> A custom action label with <a
235href="{@docRoot}reference/android/widget/TextView.html#attr_android:imeActionLabel">{@code
236android:imeActionLabel}</a>.</p>
237
238
239
240<h2 id="Flags">Adding Other Keyboard Flags</h2>
241
242<p>In addition to the actions you can specify with the <a
243href="{@docRoot}reference/android/widget/TextView.html#attr_android:imeOptions">{@code
244android:imeOptions}</a> attribute, you can add additional flags to specify other keyboard
245behaviors. All available flags are listed along with the actions in the <a
246href="{@docRoot}reference/android/widget/TextView.html#attr_android:imeOptions">{@code
247android:imeOptions}</a> documentation.</p>
248
249<p>For example, figure 5 shows how the system enables a fullscreen text field when a handset device
250is in landscape orientation (or the screen space is otherwise constrained for space). You can
251disable the fullscreen input mode with {@code flagNoExtractUi} in the <a
252href="{@docRoot}reference/android/widget/TextView.html#attr_android:imeOptions">{@code
253android:imeOptions}</a> attribute, as shown in figure 6.</p>
254
255<img src="{@docRoot}images/ui/edittext-noextract.png" alt="" />
256<p class="img-caption"><strong>Figure 6.</strong> The fullscreen text field ("extract mode") is
257disabled with {@code android:imeOptions="flagNoExtractUi"}.</p>
258
259
260
261
262<h2 id="AutoComplete">Providing Auto-complete Suggestions</h2>
263
264<p>If you want to provide suggestions to users as they type, you can use a subclass of {@link
265android.widget.EditText} called {@link android.widget.AutoCompleteTextView}. To implement
266auto-complete, you must specify an (@link android.widget.Adapter) that provides the text
267suggestions. There are several kinds of adapters available, depending on where the data is coming
268from, such as from a database or an array.</p>
269
270<img src="{@docRoot}images/ui/edittext-autocomplete.png" alt="" />
271<p class="img-caption"><strong>Figure 7.</strong> Example of {@link
272android.widget.AutoCompleteTextView} with text suggestions.</p>
273
274<p>The following procedure describes how to set up an {@link android.widget.AutoCompleteTextView}
275that provides suggestions from an array, using {@link android.widget.ArrayAdapter}:
276
277<ol>
278  <li>Add the {@link android.widget.AutoCompleteTextView} to your layout. Here's a
279layout with only the text field:
280<pre>
281&lt;?xml version="1.0" encoding="utf-8"?>
282&lt;AutoCompleteTextView xmlns:android="http://schemas.android.com/apk/res/android"
283    android:id="&#64;+id/autocomplete_country"
284    android:layout_width="fill_parent"
285    android:layout_height="wrap_content" />
286</pre>
287</li>
288
289<li>Define the array that contains all text suggestions. For example, here's an array of country
290names that's defined in an XML resource file ({@code res/values/strings.xml}):
291<pre>
292&lt;?xml version="1.0" encoding="utf-8"?>
293&lt;resources>
294    &lt;string-array name="countries_array">
295        &lt;item>Afghanistan&lt;/item>
296        &lt;item>Albania&lt;/item>
297        &lt;item>Algeria&lt;/item>
298        &lt;item>American Samoa&lt;/item>
299        &lt;item>Andorra&lt;/item>
300        &lt;item>Angola&lt;/item>
301        &lt;item>Anguilla&lt;/item>
302        &lt;item>Antarctica&lt;/item>
303        ...
304    &lt;/string-array>
305&lt;/resources>
306</pre>
307</li>
308
309<li>In your {@link android.app.Activity} or {@link android.app.Fragment}, use the following
310code to specify the adapter that supplies the suggestions:
311<pre>
312// Get a reference to the AutoCompleteTextView in the layout
313AutoCompleteTextView textView = (AutoCompleteTextView) findViewById(R.id.autocomplete_country);
314// Get the string array
315String[] countries = getResources().getStringArray(R.array.countries_array);
316// Create the adapter and set it to the AutoCompleteTextView
317ArrayAdapter&lt;String> adapter =
318        new ArrayAdapter&lt;String>(this, android.R.layout.simple_list_item_1, countries);
319textView.setAdapter(adapter);
320</pre>
321
322<p>Here, a new {@link
323android.widget.ArrayAdapter} is initialized to bind each item in the <code>COUNTRIES</code>
324string array to a {@link android.widget.TextView} that exists in the {@code simple_list_item_1}
325layout (this is a layout provided by Android that provides a standard appearance for text in a
326list).</p>
327<p>Then assign the adapter to the {@link android.widget.AutoCompleteTextView} by
328calling {@link android.widget.AutoCompleteTextView#setAdapter setAdapter()}.</p>
329</li>
330</ol>
331
332