1 page.title=Optimizing Navigation for TV 2 parent.title=Designing for TV 3 parent.link=index.html 4 5 trainingnavtop=true 6 previous.title=Optimizing Layouts for TV 7 previous.link=optimizing-layouts-tv.html 8 next.title=Handling Features Not Supported on TV 9 next.link=unsupported-features-tv.html 10 11 @jd:body 12 13 <div id="tb-wrapper"> 14 <div id="tb"> 15 16 <h2>This lesson teaches you to</h2> 17 <ol> 18 <li><a href="#HandleDpadNavigation">Handle D-pad Navigation</a></li> 19 <li><a href="#HandleFocusSelection">Provide Clear Visual Indication for Focus and Selection</a></li> 20 <li><a href="#DesignForEasyNavigation">Design for Easy Navigation</a></li> 21 </ol> 22 23 <h2>You should also read</h2> 24 <ul> 25 <li><a href="{@docRoot}training/design-navigation/index.html">Designing Effective Navigation</a></li> 26 </ul> 27 28 </div> 29 </div> 30 31 <p> 32 An important aspect of the user experience when operating a TV is the direct human interface: a remote control. 33 As you optimize your Android application for TVs, you should pay special attention to how the user actually navigates 34 around your application when using a remote control instead of a touchscreen. 35 </p> 36 <p> 37 This lesson shows you how to optimize navigation for TV by: 38 </p> 39 40 <ul> 41 <li>Ensuring all layout controls are D-pad navigable.</li> 42 <li>Providing highly obvious feedback for UI navigation.</li> 43 <li>Placing layout controls for easy access.</li> 44 </ul> 45 46 <h2 id="HandleDpadNavigation">Handle D-pad Navigation</h2> 47 48 <p> 49 On a TV, users navigate with controls on a TV remote, using either a D-pad or arrow keys. 50 This limits movement to up, down, left, and right. 51 To build a great TV-optimized app, you must provide a navigation scheme in which the user can 52 quickly learn how to navigate your app using the remote. 53 </p> 54 55 <p> 56 When you design navigation for D-pad, follow these guidelines: 57 </p> 58 59 <ul> 60 <li>Ensure that the D-pad can navigate to all the visible controls on the screen.</li> 61 <li>For scrolling lists with focus, D-pad up/down keys scroll the list and Enter key selects an item in the list. Ensure that users can 62 select an element in the list and that the list still scrolls when an element is selected.</li> 63 <li>Ensure that movement between controls is straightforward and predictable.</li> 64 </ul> 65 66 <p> 67 Android usually handles navigation order between layout elements automatically, so you don't need to do anything extra. If the screen layout 68 makes navigation difficult, or if you want users to move through the layout in a specific way, you can set up explicit navigation for your 69 controls. 70 For example, for an {@code android.widget.EditText}, to define the next control to receive focus, use: 71 <pre> 72 <EditText android:id="@+id/LastNameField" android:nextFocusDown="@+id/FirstNameField"\> 73 </pre> 74 The following table lists all of the available navigation attributes: 75 </p> 76 77 <table> 78 <tr> 79 <th>Attribute</th> 80 <th>Function</th> 81 </tr> 82 <tr> 83 <td>{@link android.R.attr#nextFocusDown}</td> 84 <td>Defines the next view to receive focus when the user navigates down.</td> 85 </tr> 86 <tr> 87 <td>{@link android.R.attr#nextFocusLeft}</td> 88 <td>Defines the next view to receive focus when the user navigates left.</td> 89 </tr> 90 <tr> 91 <td>{@link android.R.attr#nextFocusRight}</td> 92 <td>Defines the next view to receive focus when the user navigates right.</td> 93 </tr> 94 <tr> 95 <td>{@link android.R.attr#nextFocusUp}</td> 96 <td>Defines the next view to receive focus when the user navigates up.</td> 97 </tr> 98 </table> 99 100 <p> 101 To use one of these explicit navigation attributes, set the value to the ID (android:id value) of another widget in the layout. You should set 102 up the navigation order as a loop, so that the last control directs focus back to the first one. 103 </p> 104 105 <p> 106 Note: You should only use these attributes to modify the navigation order if the default order that the system applies does not work well. 107 </p> 108 109 <h2 id="HandleFocusSelection">Provide Clear Visual Indication for Focus and Selection</h2> 110 111 <p> 112 Use appropriate color highlights for all navigable and selectable elements in the UI. This makes it easy for users to know whether the control 113 is currently focused or selected when they navigate with a D-pad. Also, use uniform highlight scheme across your application. 114 </p> 115 116 <p> 117 Android provides <a href="{@docRoot}guide/topics/resources/drawable-resource.html#StateList">Drawable State List Resources</a> to implement highlights 118 for selected and focused controls. For example: 119 </p> 120 121 res/drawable/button.xml: 122 <pre> 123 <?xml version="1.0" encoding="utf-8"?> 124 <selector xmlns:android="http://schemas.android.com/apk/res/android"> 125 <item android:state_pressed="true" 126 android:drawable="@drawable/button_pressed" /> <!-- pressed --> 127 <item android:state_focused="true" 128 android:drawable="@drawable/button_focused" /> <!-- focused --> 129 <item android:state_hovered="true" 130 android:drawable="@drawable/button_focused" /> <!-- hovered --> 131 <item android:drawable="@drawable/button_normal" /> <!-- default --> 132 </selector> 133 </pre> 134 135 <p> 136 This layout XML applies the above state list drawable to a {@link android.widget.Button}: 137 </p> 138 <pre> 139 <Button 140 android:layout_height="wrap_content" 141 android:layout_width="wrap_content" 142 android:background="@drawable/button" /> 143 </pre> 144 145 <p> 146 Provide sufficient padding within the focusable and selectable controls so that the highlights around them are clearly visible. 147 </p> 148 149 <h2 id="DesignForEasyNavigation">Design for Easy Navigation</h2> 150 151 <p> 152 Users should be able to navigate to any UI control with a couple of D-pad clicks. Navigation should be easy and intuitive to 153 understand. For any non-intuitive actions, provide users with written help, using a dialog triggered by a help button or action bar icon. 154 </p> 155 156 <p> 157 Predict the next screen that the user will want to navigate to and provide one click navigation to it. If the current screen UI is very sparse, 158 consider making it a multi pane screen. Use fragments for making multi-pane screens. For example, consider the multi-pane UI below with continent names 159 on the left and list of cool places in each continent on the right. 160 </p> 161 162 <img src="{@docRoot}images/training/cool-places.png" alt="" /> 163 164 <p> 165 The above UI consists of three Fragments - <code>left_side_action_controls</code>, <code>continents</code> and 166 <code>places</code> - as shown in its layout 167 xml file below. Such multi-pane UIs make D-pad navigation easier and make good use of the horizontal screen space for 168 TVs. 169 </p> 170 res/layout/cool_places.xml 171 <pre> 172 <LinearLayout 173 android:layout_width="match_parent" 174 android:layout_height="match_parent" 175 android:orientation="horizontal" 176 > 177 <fragment 178 android:id="@+id/left_side_action_controls" 179 android:layout_width="0px" 180 android:layout_height="match_parent" 181 android:layout_marginLeft="10dip" 182 android:layout_weight="0.2"/> 183 <fragment 184 android:id="@+id/continents" 185 android:layout_width="0px" 186 android:layout_height="match_parent" 187 android:layout_marginLeft="10dip" 188 android:layout_weight="0.2"/> 189 190 <fragment 191 android:id="@+id/places" 192 android:layout_width="0px" 193 android:layout_height="match_parent" 194 android:layout_marginLeft="10dip" 195 android:layout_weight="0.6"/> 196 197 </LinearLayout> 198 </pre> 199 200 <p> 201 Also, notice in the UI layout above action controls are on the left hand side of a vertically scrolling list to make 202 them easily accessible using D-pad. 203 In general, for layouts with horizontally scrolling components, place action controls on left or right hand side and 204 vice versa for vertically scrolling components. 205 </p> 206 207
