1 page.title=Creating TV Navigation 2 page.tags=tv, d-pad, focus 3 helpoutsWidget=true 4 trainingnavtop=true 5 6 @jd:body 7 8 <div id="tb-wrapper"> 9 <div id="tb"> 10 <h2>This lesson teaches you how to</h2> 11 <ol> 12 <li><a href="#d-pad-navigation">Enable D-pad Navigation</a></li> 13 <li><a href="#focus-selection">Provide Clear Focus and Selection</a></li> 14 </ol> 15 16 </div> 17 </div> 18 19 <p> 20 TV devices provide a limited set of navigation controls for apps. Creating an effective 21 navigation scheme for your TV app depends on understanding these limited controls and the limits 22 of users' perception while operating your app. As you build your Android app for TVs, 23 pay special attention to how the user actually navigates around your app when using remote 24 control buttons instead of a touch screen. 25 </p> 26 27 <p> 28 This lesson explains the minimum requirements for creating effective TV app navigation scheme and 29 how to apply those requirements to your app. 30 </p> 31 32 33 <h2 id="d-pad-navigation">Enable D-pad Navigation</h2> 34 35 <p> 36 On a TV device, users navigate with controls on a remote control device, using either a 37 directional pad (D-pad) or arrow keys. This type of control limits movement to up, down, left, 38 and right. To build a great TV-optimized app, you must provide a navigation scheme where the user 39 can quickly learn how to navigate your app using these limited controls. 40 </p> 41 42 <p> 43 The Android framework handles directional navigation between layout elements automatically, so 44 you typically do not need to do anything extra for your app. However, you should thoroughly test 45 navigation with a D-pad controller to discover any navigation problems. Follow these guidelines to 46 test that your app's navigation system works well with a D-pad on a TV device: 47 </p> 48 49 <ul> 50 <li>Ensure that a user with a D-pad controller can navigate to all visible controls on the 51 screen. 52 </li> 53 <li>For scrolling lists with focus, make sure that the D-pad up and down keys scroll the list, 54 and the Enter key selects an item in the list. Verify that users can select an element in the 55 list and that the list still scrolls when an element is selected. 56 </li> 57 <li>Ensure that switching between controls between controls is straightforward and predictable. 58 </li> 59 </ul> 60 61 62 <h3 id="modify-d-pad-nav">Modifying directional navigation</h3> 63 64 <p> 65 The Android framework automatically applies a directional navigation scheme based on the 66 relative position of focusable elements in your layouts. You should test the generated 67 navigation scheme in your app using a D-pad controller. After testing, if you decide you want 68 users to move through your layouts in a specific way, you can set up explicit directional 69 navigation for your controls. 70 </p> 71 72 <p class="note"> 73 <strong>Note:</strong> You should only use these attributes to modify the navigation order if the 74 default order that the system applies does not work well. 75 </p> 76 77 <p> 78 The following code sample shows how to define the next control to receive focus for a {@link 79 android.widget.TextView} layout object: 80 </p> 81 82 <pre> 83 <TextView android:id="@+id/Category1" 84 android:nextFocusDown="@+id/Category2"\> 85 </pre> 86 87 <p> 88 The following table lists all of the available navigation attributes for Android user interface 89 widgets: 90 </p> 91 92 <table> 93 <tr> 94 <th>Attribute</th> 95 <th>Function</th> 96 </tr> 97 <tr> 98 <td>{@link android.R.attr#nextFocusDown}</td> 99 <td>Defines the next view to receive focus when the user navigates down.</td> 100 </tr> 101 <tr> 102 <td>{@link android.R.attr#nextFocusLeft}</td> 103 <td>Defines the next view to receive focus when the user navigates left.</td> 104 </tr> 105 <tr> 106 <td>{@link android.R.attr#nextFocusRight}</td> 107 <td>Defines the next view to receive focus when the user navigates right.</td> 108 </tr> 109 <tr> 110 <td>{@link android.R.attr#nextFocusUp}</td> 111 <td>Defines the next view to receive focus when the user navigates up.</td> 112 </tr> 113 </table> 114 115 <p> 116 To use one of these explicit navigation attributes, set the value to the ID ({@code android:id} 117 value) of another widget in the layout. You should set up the navigation order as a loop, so that 118 the last control directs focus back to the first one. 119 </p> 120 121 122 123 <h2 id="focus-selection">Provide Clear Focus and Selection</h2> 124 125 <p> 126 The success of an app's navigation scheme on TV devices is depends on how easy it is for 127 a user to determine what user interface element is in focus on screen. If you do not provide 128 clear indications of focused items (and therefore what item a user can take action on), they can 129 quickly become frustrated and exit your app. For the same reason, it is important to always have 130 an item in focus that a user can take action on immediately after your app starts, or any time 131 it is idle. 132 </p> 133 134 <p> 135 Your app layout and implementation should use color, size, animation, or a combination of these 136 attributes to help users easily determine what actions they can take next. Use a uniform scheme 137 for indicating focus across your application. 138 </p> 139 140 <p> 141 Android provides <a href="{@docRoot}guide/topics/resources/drawable-resource.html#StateList"> 142 Drawable State List Resources</a> to implement highlights for focused and selected controls. The 143 following code example demonstrates how to enable visual behavior for a button to indicate that a 144 user has navigated to the control and then selected it: 145 </p> 146 147 <pre> 148 <!-- res/drawable/button.xml --> 149 <?xml version="1.0" encoding="utf-8"?> 150 <selector xmlns:android="http://schemas.android.com/apk/res/android"> 151 <item android:state_pressed="true" 152 android:drawable="@drawable/button_pressed" /> <!-- pressed --> 153 <item android:state_focused="true" 154 android:drawable="@drawable/button_focused" /> <!-- focused --> 155 <item android:state_hovered="true" 156 android:drawable="@drawable/button_focused" /> <!-- hovered --> 157 <item android:drawable="@drawable/button_normal" /> <!-- default --> 158 </selector> 159 </pre> 160 161 <p> 162 The following layout XML sample code applies the previous state list drawable to a 163 {@link android.widget.Button}: 164 </p> 165 166 <pre> 167 <Button 168 android:layout_height="wrap_content" 169 android:layout_width="wrap_content" 170 android:background="@drawable/button" /> 171 </pre> 172 173 <p> 174 Make sure to provide sufficient padding within the focusable and selectable controls so that the 175 highlights around them are clearly visible. 176 </p> 177 178 <p> 179 For more recommendations on designing effective selection and focus for your TV app, see 180 <a href="{@docRoot}design/tv/patterns.html">Patterns for TV</a>. 181 </p> 182
