Home | History | Annotate | Download | only in ui
      1 page.title=Input Controls
      2 parent.title=User Interface
      3 parent.link=index.html
      4 @jd:body
      5 
      6 <div class="figure" style="margin:0">
      7   <img src="{@docRoot}images/ui/ui-controls.png" alt="" style="margin:0" />
      8 </div>
      9 
     10 <p>Input controls are the interactive components in your app's user interface. Android provides a
     11 wide variety of controls you can use in your UI, such as buttons, text fields, seek bars,
     12 checkboxes, zoom buttons, toggle buttons, and many more.</p>
     13 
     14 <p>Adding an input control to your UI is as simple as adding an XML element to your <a
     15 href="{@docRoot}guide/topics/ui/declaring-layout.html">XML layout</a>. For example, here's a
     16 layout with a text field and button:</p>
     17 
     18 <pre style="clear:right">
     19 &lt;?xml version="1.0" encoding="utf-8"?>
     20 &lt;LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     21     android:layout_width="fill_parent"
     22     android:layout_height="fill_parent"
     23     android:orientation="horizontal">
     24     &lt;EditText android:id="@+id/edit_message"
     25         android:layout_weight="1"
     26         android:layout_width="0dp"
     27         android:layout_height="wrap_content"
     28         android:hint="@string/edit_message" />
     29     &lt;Button android:id="@+id/button_send"
     30         android:layout_width="wrap_content"
     31         android:layout_height="wrap_content"
     32         android:text="@string/button_send"
     33         android:onClick="sendMessage" />
     34 &lt;/LinearLayout>
     35 </pre>
     36 
     37 <p>Each input control supports a specific set of input events so you can handle events such as when
     38 the user enters text or touches a button.</p>
     39 
     40 
     41 <h2 id="CommonControls">Common Controls</h2>
     42 <p>Here's a list of some common controls that you can use in your app. Follow the links to learn
     43 more about using each one.</p>
     44 
     45 <p class="note"><strong>Note:</strong> Android provides several more controls than are listed
     46 here. Browse the {@link android.widget} package to discover more. If your app requires a
     47 specific kind of input control, you can build your own <a
     48 href="{@docRoot}guide/topics/ui/custom-components.html">custom components</a>.</p>
     49 
     50 <table>
     51     <tr>
     52         <th scope="col">Control Type</th>
     53         <th scope="col">Description</th>
     54 	<th scope="col">Related Classes</th>
     55     </tr>
     56     <tr>
     57         <td><a href="controls/button.html">Button</a></td>
     58         <td>A push-button that can be pressed, or clicked, by the user to perform an action.</td>
     59 	<td>{@link android.widget.Button Button} </td>
     60     </tr>
     61     <tr>
     62         <td><a href="controls/text.html">Text field</a></td>
     63         <td>An editable text field. You can use the <code>AutoCompleteTextView</code> widget to create a text entry widget that provides auto-complete suggestions</td>
     64 	<td>{@link android.widget.EditText EditText}, {@link android.widget.AutoCompleteTextView}</td>
     65     </tr>
     66     <tr>
     67         <td><a href="controls/checkbox.html">Checkbox</a></td>
     68         <td>An on/off switch that can be toggled by the user. You should use checkboxes when presenting users with a group of selectable options that are not mutually exclusive.</td>
     69 	<td>{@link android.widget.CheckBox CheckBox} </td>
     70     </tr>
     71     <tr>
     72         <td><a href="controls/radiobutton.html">Radio button</a></td>
     73         <td>Similar to checkboxes, except that only one option can be selected in the group.</td>
     74 	<td>{@link android.widget.RadioGroup RadioGroup}
     75 	<br>{@link android.widget.RadioButton RadioButton} </td>
     76     </tr>
     77     <tr>
     78         <td><a href="controls/togglebutton.html" style="white-space:nowrap">Toggle button</a></td>
     79         <td>An on/off button with a light indicator.</td>
     80 	<td>{@link android.widget.ToggleButton ToggleButton} </td>
     81     </tr>
     82     <tr>
     83         <td><a href="controls/spinner.html">Spinner</a></td>
     84         <td>A drop-down list that allows users to select one value from a set.</td>
     85 	<td>{@link android.widget.Spinner Spinner} </td>
     86     </tr>
     87     <tr>
     88         <td><a href="controls/pickers.html">Pickers</a></td>
     89         <td>A dialog for users to select a single value for a set by using up/down buttons or via a swipe gesture. Use a <code>DatePicker</code>code> widget to enter the values for the date (month, day, year) or a <code>TimePicker</code> widget to enter the values for a time (hour, minute, AM/PM), which will be formatted automatically for the user's locale.</td>
     90 	<td>{@link android.widget.DatePicker}, {@link android.widget.TimePicker}</td>
     91     </tr>
     92 </table>
     93