diff options
Diffstat (limited to 'docs/html/training/keyboard-input/navigation.jd')
| -rw-r--r-- | docs/html/training/keyboard-input/navigation.jd | 166 |
1 files changed, 166 insertions, 0 deletions
diff --git a/docs/html/training/keyboard-input/navigation.jd b/docs/html/training/keyboard-input/navigation.jd new file mode 100644 index 0000000..6e26ab2 --- /dev/null +++ b/docs/html/training/keyboard-input/navigation.jd @@ -0,0 +1,166 @@ +page.title=Supporting Keyboard Navigation + +trainingnavtop=true + +@jd:body + +<div id="tb-wrapper"> +<div id="tb"> + +<h2>This lesson teaches you to</h2> +<ol>
<li><a href="#Test">Test Your App</a></li>
<li><a href="#Tab">Handle Tab Navigation</a></li>
<li><a href="#Direction">Handle Directional Navigation</a></li>
</ol> + +<h2>You should also read</h2> +<ul> + <li><a href="{@docRoot}training/accessibility/index.html">Implementing Accessibility</a></li> +</ul> + +</div> +</div> + +<p>In addition to soft input methods (such as on-screen keyboards), Android supports +physical keyboards attached to the device. A keyboard offers not only a convenient +mode for text input, but also offers a way for users to navigate and +interact with your app. Although most hand-held devices such as phones use touch as the +primary mode of interaction, +tablets and similar devices are growing in popularity and many users like to attach +keyboard accessories.</p> + +<p>As more Android devices offer this kind of experience, it's important that +you optimize your app to support interaction through a keyboard. This lesson describes +how you can better support navigation with a keyboard.</p> + +<p class="note"><strong>Note:</strong> +Supporting of directional navigation in your application is also important in ensuring that +your application is <a href="{@docRoot}guide/topics/ui/accessibility/apps.html">accessible</a> +to users who do not navigate using visual cues. Fully supporting directional navigation in your +application can also help you automate <a href="{@docRoot}tools/testing/testing_ui.html">user +interface testing</a> with tools like <a +href="{@docRoot}tools/help/uiautomator/index.html">uiautomator</a>.</p> + + + +<h2 id="Test">Test Your App</h2> + +<p>It's possible that users can already navigate your app using a keyboard, because the +Android system enables most of the necessary behaviors by default.</p> + +<p>All interactive widgets provided by the Android framework (such as {@link android.widget.Button} +and {@link android.widget.EditText}) are focusable. This means users can navigate with +control devices such as a D-pad or keyboard and each widget glows or otherwise changes its +appearance when it gains input focus.</p> + +<p>To test your app:</p> +<ol> + <li>Install your app on a device that offers a hardware keyboard. + <p>If you don't have a hardware device with a keyboard, connect a Bluetooth keyboard + or a USB keyboard (though not all devices support USB accessories).</p> + <p>You can also use the Android emulator:</p> + <ol> + <li>In the AVD Manager, either click <strong>New Device</strong> or + select an existing profile and click <strong>Clone</strong>.</li> + <li>In the window that appears, ensure that <strong>Keyboard</strong> and + <strong>DPad</strong> are enabled.</li> + </ol> + </li> + <li>To test your app, use only the Tab key to navigate through your UI, ensuring that + each UI control gets focus as expected. + <p>Look for any instances in which the focus moves in a way you don't expect.</p> + </li> + <li>Start from the beginning of your app and instead use the direction controls + (arrow keys on the keyboard) to navigate your app. + <p>From each focusable element in your UI, press Up, Down, Left, and Right.</p> + <p>Look for any instances in which the focus moves in a way you don't expect.</p> + </li> +</ol> + +<p>If you encounter any instances where navigating with the Tab key or direction controls +does not do what you expect, specify where the focus should go in your layout, as discussed +in the following sections.</p> + + + +<h2 id="Tab">Handle Tab Navigation</h2> + +<p>When a user navigates your app using the keyboard Tab key, +the system passes input focus between elements based +on the order in which they appear in the layout. If you use a relative layout, for example, +and the order of elements on the screen is different than the order in the file, then you might need +to manually specify the focus order.</p> + +<p>For example, in the following layout, two buttons are aligned to the right side and a text field +is aligned to the left of the second button. In order to pass focus from the first button to the +text field, then to the second button, the layout needs to explicitly define the focus order +for each of the focusable elements with the <a +href="{@docRoot}reference/android/view/View.html#attr_android:nextFocusForward">{@code +android:nextFocusForward}</a> attribute:</p> + +<pre> +<RelativeLayout ...> + <Button + android:id="@+id/button1" + android:layout_alignParentTop="true" + android:layout_alignParentRight="true" + android:nextFocusForward="@+id/editText1" + ... /> + <Button + android:id="@+id/button2" + android:layout_below="@id/button1" + android:nextFocusForward="@+id/button1" + ... /> + <EditText + android:id="@id/editText1" + android:layout_alignBottom="@+id/button2" + android:layout_toLeftOf="@id/button2" + android:nextFocusForward="@+id/button2" + ... /> + ... +</RelativeLayout> +</pre> + +<p>Now instead of sending focus from {@code button1} to {@code button2} then {@code editText1}, the +focus appropriately moves according to the appearance on the screen: from +{@code button1} to {@code editText1} then {@code button2}.</p> + + +<h2 id="Direction">Handle Directional Navigation</h2> + +<p>Users can also navigate your app using the arrow keys on a +keyboard (the behavior is the same as when navigating with a D-pad or trackball). +The system provides a best-guess as to which view should be given focus +in a given direction based on the layout of the views on screen. Sometimes, however, the system +might guess wrong.</p> + +<p>If the system does not pass focus to the appropriate view when navigating in a given direction, +specify which view should receive focus with the following attributes:</p> +<ul> + <li><a href="{@docRoot}reference/android/view/View.html#attr_android:nextFocusUp">{@code +android:nextFocusUp}</a></li> + <li><a href="{@docRoot}reference/android/view/View.html#attr_android:nextFocusDown">{@code +android:nextFocusDown}</a></li> + <li><a href="{@docRoot}reference/android/view/View.html#attr_android:nextFocusLeft">{@code +android:nextFocusLeft}</a></li> + <li><a href="{@docRoot}reference/android/view/View.html#attr_android:nextFocusRight">{@code +android:nextFocusRight}</a></li> +</ul> + +<p>Each attribute designates the next view to receive focus when the user navigates +in that direction, as specified by the view ID. For example:</p> + +<pre> +<Button + android:id="@+id/button1" + android:nextFocusRight="@+id/button2" + android:nextFocusDown="@+id/editText1" + ... /> +<Button + android:id="@id/button2" + android:nextFocusLeft="@id/button1" + android:nextFocusDown="@id/editText1" + ... /> +<EditText + android:id="@id/editText1" + android:nextFocusUp="@id/button1" + ... /> +</pre> + |