1page.title=Supporting Keyboard Navigation 2 3trainingnavtop=true 4 5@jd:body 6 7<div id="tb-wrapper"> 8<div id="tb"> 9 10<h2>This lesson teaches you to</h2> 11<ol> 12 <li><a href="#Test">Test Your App</a></li> 13 <li><a href="#Tab">Handle Tab Navigation</a></li> 14 <li><a href="#Direction">Handle Directional Navigation</a></li> 15</ol> 16 17<h2>You should also read</h2> 18<ul> 19 <li><a href="{@docRoot}training/accessibility/index.html">Implementing Accessibility</a></li> 20</ul> 21 22</div> 23</div> 24 25<p>In addition to soft input methods (such as on-screen keyboards), Android supports 26physical keyboards attached to the device. A keyboard offers not only a convenient 27mode for text input, but also offers a way for users to navigate and 28interact with your app. Although most hand-held devices such as phones use touch as the 29primary mode of interaction, 30tablets and similar devices are growing in popularity and many users like to attach 31keyboard accessories.</p> 32 33<p>As more Android devices offer this kind of experience, it's important that 34you optimize your app to support interaction through a keyboard. This lesson describes 35how you can better support navigation with a keyboard.</p> 36 37<p class="note"><strong>Note:</strong> 38Supporting of directional navigation in your application is also important in ensuring that 39your application is <a href="{@docRoot}guide/topics/ui/accessibility/apps.html">accessible</a> 40to users who do not navigate using visual cues. Fully supporting directional navigation in your 41application can also help you automate <a href="{@docRoot}tools/testing/testing_ui.html">user 42interface testing</a> with tools like <a 43href="{@docRoot}tools/help/uiautomator/index.html">uiautomator</a>.</p> 44 45 46 47<h2 id="Test">Test Your App</h2> 48 49<p>It's possible that users can already navigate your app using a keyboard, because the 50Android system enables most of the necessary behaviors by default.</p> 51 52<p>All interactive widgets provided by the Android framework (such as {@link android.widget.Button} 53and {@link android.widget.EditText}) are focusable. This means users can navigate with 54control devices such as a D-pad or keyboard and each widget glows or otherwise changes its 55appearance when it gains input focus.</p> 56 57<p>To test your app:</p> 58<ol> 59 <li>Install your app on a device that offers a hardware keyboard. 60 <p>If you don't have a hardware device with a keyboard, connect a Bluetooth keyboard 61 or a USB keyboard (though not all devices support USB accessories).</p> 62 <p>You can also use the Android emulator:</p> 63 <ol> 64 <li>In the AVD Manager, either click <strong>New Device</strong> or 65 select an existing profile and click <strong>Clone</strong>.</li> 66 <li>In the window that appears, ensure that <strong>Keyboard</strong> and 67 <strong>DPad</strong> are enabled.</li> 68 </ol> 69 </li> 70 <li>To test your app, use only the Tab key to navigate through your UI, ensuring that 71 each UI control gets focus as expected. 72 <p>Look for any instances in which the focus moves in a way you don't expect.</p> 73 </li> 74 <li>Start from the beginning of your app and instead use the direction controls 75 (arrow keys on the keyboard) to navigate your app. 76 <p>From each focusable element in your UI, press Up, Down, Left, and Right.</p> 77 <p>Look for any instances in which the focus moves in a way you don't expect.</p> 78 </li> 79</ol> 80 81<p>If you encounter any instances where navigating with the Tab key or direction controls 82does not do what you expect, specify where the focus should go in your layout, as discussed 83in the following sections.</p> 84 85 86 87<h2 id="Tab">Handle Tab Navigation</h2> 88 89<p>When a user navigates your app using the keyboard Tab key, 90the system passes input focus between elements based 91on the order in which they appear in the layout. If you use a relative layout, for example, 92and the order of elements on the screen is different than the order in the file, then you might need 93to manually specify the focus order.</p> 94 95<p>For example, in the following layout, two buttons are aligned to the right side and a text field 96is aligned to the left of the second button. In order to pass focus from the first button to the 97text field, then to the second button, the layout needs to explicitly define the focus order 98for each of the focusable elements with the <a 99href="{@docRoot}reference/android/view/View.html#attr_android:nextFocusForward">{@code 100android:nextFocusForward}</a> attribute:</p> 101 102<pre> 103<RelativeLayout ...> 104 <Button 105 android:id="@+id/button1" 106 android:layout_alignParentTop="true" 107 android:layout_alignParentRight="true" 108 android:nextFocusForward="@+id/editText1" 109 ... /> 110 <Button 111 android:id="@+id/button2" 112 android:layout_below="@id/button1" 113 android:nextFocusForward="@+id/button1" 114 ... /> 115 <EditText 116 android:id="@id/editText1" 117 android:layout_alignBottom="@+id/button2" 118 android:layout_toLeftOf="@id/button2" 119 android:nextFocusForward="@+id/button2" 120 ... /> 121 ... 122</RelativeLayout> 123</pre> 124 125<p>Now instead of sending focus from {@code button1} to {@code button2} then {@code editText1}, the 126focus appropriately moves according to the appearance on the screen: from 127{@code button1} to {@code editText1} then {@code button2}.</p> 128 129 130<h2 id="Direction">Handle Directional Navigation</h2> 131 132<p>Users can also navigate your app using the arrow keys on a 133keyboard (the behavior is the same as when navigating with a D-pad or trackball). 134The system provides a best-guess as to which view should be given focus 135in a given direction based on the layout of the views on screen. Sometimes, however, the system 136might guess wrong.</p> 137 138<p>If the system does not pass focus to the appropriate view when navigating in a given direction, 139specify which view should receive focus with the following attributes:</p> 140<ul> 141 <li><a href="{@docRoot}reference/android/view/View.html#attr_android:nextFocusUp">{@code 142android:nextFocusUp}</a></li> 143 <li><a href="{@docRoot}reference/android/view/View.html#attr_android:nextFocusDown">{@code 144android:nextFocusDown}</a></li> 145 <li><a href="{@docRoot}reference/android/view/View.html#attr_android:nextFocusLeft">{@code 146android:nextFocusLeft}</a></li> 147 <li><a href="{@docRoot}reference/android/view/View.html#attr_android:nextFocusRight">{@code 148android:nextFocusRight}</a></li> 149</ul> 150 151<p>Each attribute designates the next view to receive focus when the user navigates 152in that direction, as specified by the view ID. For example:</p> 153 154<pre> 155<Button 156 android:id="@+id/button1" 157 android:nextFocusRight="@+id/button2" 158 android:nextFocusDown="@+id/editText1" 159 ... /> 160<Button 161 android:id="@id/button2" 162 android:nextFocusLeft="@id/button1" 163 android:nextFocusDown="@id/editText1" 164 ... /> 165<EditText 166 android:id="@id/editText1" 167 android:nextFocusUp="@id/button1" 168 ... /> 169</pre> 170 171