Roman Nurik | b99ae73 | 2012-03-06 12:26:15 -0800 | [diff] [blame] | 1 | page.title=Text Fields |
Joe Fernandez | 33baa5a | 2013-11-14 11:41:19 -0800 | [diff] [blame] | 2 | page.tags=text,edittext,input |
Roman Nurik | b99ae73 | 2012-03-06 12:26:15 -0800 | [diff] [blame] | 3 | @jd:body |
| 4 | |
Scott Main | cbcd17d | 2013-05-14 08:46:55 -0700 | [diff] [blame] | 5 | <a class="notice-developers" href="{@docRoot}guide/topics/ui/controls/text.html"> |
| 6 | <div> |
| 7 | <h3>Developer Docs</h3> |
| 8 | <p>Text Fields</p> |
| 9 | </div> |
| 10 | </a> |
| 11 | |
Roman Nurik | b99ae73 | 2012-03-06 12:26:15 -0800 | [diff] [blame] | 12 | <p>Text fields allow the user to type text into your app. They can be either single line or multi-line. |
| 13 | Touching a text field places the cursor and automatically displays the keyboard. In addition to |
| 14 | typing, text fields allow for a variety of other activities, such as text selection (cut, copy, |
| 15 | paste) and data lookup via auto-completion.</p> |
| 16 | |
| 17 | |
| 18 | <div class="layout-content-row"> |
| 19 | <div class="layout-content-col span-12"> |
| 20 | |
| 21 | <img src="{@docRoot}design/media/text_input_singlevsmultiline.png"> |
| 22 | |
| 23 | </div> |
| 24 | </div> |
| 25 | |
| 26 | <h4>Single line and multi line</h4> |
| 27 | <p>Single-line fields automatically scroll their content to the left as the text input cursor reaches |
| 28 | the right edge of the input field. Multi-line text fields automatically break to a new line for |
| 29 | overflow text and scroll vertically when the cursor reaches the lower edge.</p> |
| 30 | |
| 31 | <img src="{@docRoot}design/media/text_input_typesandtypedown.png"> |
| 32 | |
| 33 | <div class="layout-content-row"> |
| 34 | <div class="layout-content-col span-6"> |
| 35 | |
| 36 | <h4>Text field types</h4> |
| 37 | <p>Text fields can have different types, such as number, message, or email address. The type determines |
| 38 | what kind of characters are allowed inside the field, and may prompt the virtual keyboard to |
| 39 | optimize its layout for frequently used characters.</p> |
| 40 | |
| 41 | </div> |
| 42 | <div class="layout-content-col span-6"> |
| 43 | |
| 44 | <h4>Auto-complete text fields</h4> |
| 45 | <p>Use auto-complete text fields to present real-time completions or search results in popups, so users |
| 46 | can enter information more accurately and efficiently.</p> |
| 47 | |
| 48 | </div> |
| 49 | </div> |
| 50 | |
| 51 | <h2 id="text-selection">Text Selection</h2> |
| 52 | |
| 53 | <p>Users can select any word in a text field with a long press. This action triggers a text selection |
| 54 | mode that facilitates extending the selection or choosing an action to perform on the selected text. |
| 55 | Selection mode includes:</p> |
| 56 | |
| 57 | <div class="layout-content-row"> |
| 58 | <div class="layout-content-col span-9"> |
| 59 | |
| 60 | <img src="{@docRoot}design/media/text_input_textselection.png"> |
| 61 | |
| 62 | </div> |
| 63 | <div class="layout-content-col span-4 with-callouts"> |
| 64 | |
| 65 | <ol> |
| 66 | <li> |
| 67 | <h4>Contextual action bar</h4> |
| 68 | <p>A contextual action bar (CAB) displays the actions available to perform on the selection: |
| 69 | typically cut, copy, and paste, but apps can insert additional commands as needed.</p> |
| 70 | </li> |
| 71 | <li> |
| 72 | <h4>Selection handles</h4> |
| 73 | <p>Selection handles can be dragged to select more or less text while remaining in selection mode.</p> |
| 74 | </li> |
| 75 | </ol> |
| 76 | |
| 77 | </div> |
| 78 | </div> |
Scott Main | d4cc942 | 2012-10-03 18:47:08 -0700 | [diff] [blame] | 79 | |