diff options
Diffstat (limited to 'docs/html/preview/tv/ui/navigation.jd')
| -rw-r--r-- | docs/html/preview/tv/ui/navigation.jd | 136 |
1 files changed, 136 insertions, 0 deletions
diff --git a/docs/html/preview/tv/ui/navigation.jd b/docs/html/preview/tv/ui/navigation.jd new file mode 100644 index 0000000..92b34cf --- /dev/null +++ b/docs/html/preview/tv/ui/navigation.jd @@ -0,0 +1,136 @@ +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 demonstates 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> + |