xref: /frameworks/base/docs/html/training/keyboard-input/navigation.jd

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>
&lt;RelativeLayout ...>
    &lt;Button
        android:id="@+id/button1"
        android:layout_alignParentTop="true"
        android:layout_alignParentRight="true"
        android:nextFocusForward="@+id/editText1"
        ... />
    &lt;Button
        android:id="@+id/button2"
        android:layout_below="@id/button1"
        android:nextFocusForward="@+id/button1"
        ... />
    &lt;EditText
        android:id="@id/editText1"
        android:layout_alignBottom="@+id/button2"
        android:layout_toLeftOf="@id/button2"
        android:nextFocusForward="@+id/button2"
        ...  />
    ...
&lt;/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>
&lt;Button
    android:id="@+id/button1"
    android:nextFocusRight="@+id/button2"
    android:nextFocusDown="@+id/editText1"
    ... />
&lt;Button
    android:id="@id/button2"
    android:nextFocusLeft="@id/button1"
    android:nextFocusDown="@id/editText1"
    ... />
&lt;EditText
    android:id="@id/editText1"
    android:nextFocusUp="@id/button1"
    ...  />
</pre>