| page.title=Navigation for TV |
| |
| @jd:body |
| |
| <div id="qv-wrapper"> |
| <div id="qv"> |
| <h2>In this document</h2> |
| <ol> |
| <li><a href="#d-pad-navigation">D-pad Navigation</a></li> |
| <li><a href="#focus-selection">Focus and Selection</a></li> |
| </ol> |
| |
| </div> |
| </div> |
| |
| <p>TV devices provide a limited set of navigation controls for apps. Creating an effective |
| navigation scheme for your TV app depends on understanding these limited controls and the limits |
| of users' perception while operating your app. As you build your Android app for TVs, |
| you should pay special attention to how the user actually navigates around your app |
| when using remote control buttons instead of a touch screen.</p> |
| |
| <p>This guide shows you how to build an effective navigation scheme for your TV app.</p> |
| |
| |
| <h2 id="d-pad-navigation">D-pad Navigation</h2> |
| |
| <p>On a TV device, users navigate with controls on a remote control device, using either a |
| directional pad (D-pad) or arrow keys. This type of control limits movement to up, down, left, |
| and right. To build a great TV-optimized app, you must provide a navigation scheme where |
| the user can quickly learn how to navigate your app using these limited controls.</p> |
| |
| <p>Follow these guidelines to build a navigation system that works well with a D-pad on a TV device: |
| </p> |
| |
| <ul> |
| <li>Ensure that the D-pad can navigate to all the visible controls on the screen.</li> |
| <li>For scrolling lists with focus, D-pad up/down keys scroll the list, and the Enter key selects |
| an item in the list. Ensure that users can select an element in the list and that the list still |
| scrolls when an element is selected.</li> |
| <li>Ensure that movement between controls is straightforward and predictable.</li> |
| </ul> |
| |
| <p>The Android framework handles directional navigation between layout elements automatically, so |
| you typically do not need to do anything extra for your app. However, you should thoroughly test |
| navigation with a D-pad control to discover any navigation problems. If you discover that your |
| screen layout makes navigation difficult, or if you want users to move through the layout in a |
| specific way, you can set up explicit directional navigation for your controls. The following |
| code sample shows how to define the next control to receive focus for a |
| {@link android.widget.TextView} layout object:</p> |
| |
| <pre> |
| <TextView android:id="@+id/Category1" |
| android:nextFocusDown="@+id/Category2"\> |
| </pre> |
| |
| <p>The following table lists all of the available navigation attributes for Android user interface |
| widgets:</p> |
| |
| <table> |
| <tr> |
| <th>Attribute</th> |
| <th>Function</th> |
| </tr> |
| <tr> |
| <td>{@link android.R.attr#nextFocusDown}</td> |
| <td>Defines the next view to receive focus when the user navigates down.</td> |
| </tr> |
| <tr> |
| <td>{@link android.R.attr#nextFocusLeft}</td> |
| <td>Defines the next view to receive focus when the user navigates left.</td> |
| </tr> |
| <tr> |
| <td>{@link android.R.attr#nextFocusRight}</td> |
| <td>Defines the next view to receive focus when the user navigates right.</td> |
| </tr> |
| <tr> |
| <td>{@link android.R.attr#nextFocusUp}</td> |
| <td>Defines the next view to receive focus when the user navigates up.</td> |
| </tr> |
| </table> |
| |
| <p>To use one of these explicit navigation attributes, set the value to the ID ({@code android:id} |
| value) of another widget in the layout. You should set up the navigation order as a loop, so that |
| the last control directs focus back to the first one.</p> |
| |
| <p class="note"> |
| <strong>Note:</strong> You should only use these attributes to modify the navigation order if the |
| default order that the system applies does not work well. |
| </p> |
| |
| |
| <h2 id="focus-selection">Focus and Selection</h2> |
| |
| <p>The success of a navigation scheme on TV devices is strongly dependent on how easy it is for a |
| user to determine what user interface element is in focus on screen. If you do not provide clear |
| indications of what is in focus on screen (and therefore what item they can take action on), |
| users can quickly become frustrated and exit your app. By the same token, it is important |
| to always have an item in focus that a user can take action on immediately after your app starts, |
| and any time your app is not playing content.</p> |
| |
| <p>Your app layout and implementation should use color, size, animation, or a combination of |
| these attributes to help users easily determine what actions they can take next. Use a uniform |
| scheme for indicating focus across your application.</p> |
| |
| <p>Android provides <a href="{@docRoot}guide/topics/resources/drawable-resource.html#StateList"> |
| Drawable State List Resources</a> to implement highlights for selected and focused controls. The |
| following code example demonstrates how to indicate selection of a button object: |
| </p> |
| |
| <pre> |
| <!-- res/drawable/button.xml --> |
| <?xml version="1.0" encoding="utf-8"?> |
| <selector xmlns:android="http://schemas.android.com/apk/res/android"> |
| <item android:state_pressed="true" |
| android:drawable="@drawable/button_pressed" /> <!-- pressed --> |
| <item android:state_focused="true" |
| android:drawable="@drawable/button_focused" /> <!-- focused --> |
| <item android:state_hovered="true" |
| android:drawable="@drawable/button_focused" /> <!-- hovered --> |
| <item android:drawable="@drawable/button_normal" /> <!-- default --> |
| </selector> |
| </pre> |
| |
| <p> |
| This layout XML applies the above state list drawable to a {@link android.widget.Button}: |
| </p> |
| <pre> |
| <Button |
| android:layout_height="wrap_content" |
| android:layout_width="wrap_content" |
| android:background="@drawable/button" /> |
| </pre> |
| |
| <p>Make sure to provide sufficient padding within the focusable and selectable controls so that |
| the highlights around them are clearly visible.</p> |
| |