| Roman Nurik | 7379046 | 2011-12-22 16:18:19 -0800 | [diff] [blame] | 1 | <!DOCTYPE html> |
| 2 | <html lang="en"> |
| 3 | <head> |
| 4 | <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> |
| 5 | <title> |
| 6 | |
| 7 | Android Design - Gestures |
| 8 | </title> |
| 9 | <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"> |
| 10 | <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic"> |
| 11 | <link rel="stylesheet" href="../static/yui-3.3.0-reset-min.css"> |
| 12 | <link rel="stylesheet" href="../static/default.css"> |
| 13 | |
| 14 | </head> |
| 15 | <body> |
| 16 | |
| 17 | <div id="page-container"> |
| 18 | |
| 19 | <div id="page-header"><a href="../index.html">Android Design</a></div> |
| 20 | |
| 21 | <div id="main-row"> |
| 22 | |
| 23 | <ul id="nav"> |
| 24 | |
| 25 | <li class="nav-section"> |
| 26 | <div class="nav-section-header"><a href="../index.html">Get Started</a></div> |
| 27 | <ul> |
| 28 | <li><a href="../get-started/creative-vision.html">Creative Vision</a></li> |
| 29 | <li><a href="../get-started/principles.html">Design Principles</a></li> |
| 30 | <li><a href="../get-started/ui-overview.html">UI Overview</a></li> |
| 31 | </ul> |
| 32 | </li> |
| 33 | |
| 34 | <li class="nav-section"> |
| 35 | <div class="nav-section-header"><a href="../style/index.html">Style</a></div> |
| 36 | <ul> |
| 37 | <li><a href="../style/devices-displays.html">Devices and Displays</a></li> |
| 38 | <li><a href="../style/themes.html">Themes</a></li> |
| 39 | <li><a href="../style/touch-feedback.html">Touch Feedback</a></li> |
| 40 | <li><a href="../style/metrics-grids.html">Metrics and Grids</a></li> |
| 41 | <li><a href="../style/typography.html">Typography</a></li> |
| 42 | <li><a href="../style/color.html">Color</a></li> |
| 43 | <li><a href="../style/iconography.html">Iconography</a></li> |
| 44 | <li><a href="../style/writing.html">Writing Style</a></li> |
| 45 | </ul> |
| 46 | </li> |
| 47 | |
| 48 | <li class="nav-section"> |
| 49 | <div class="nav-section-header"><a href="../patterns/index.html">Patterns</a></div> |
| 50 | <ul> |
| 51 | <li><a href="../patterns/new-4-0.html">New in Android 4.0</a></li> |
| 52 | <li><a href="../patterns/gestures.html">Gestures</a></li> |
| 53 | <li><a href="../patterns/app-structure.html">App Structure</a></li> |
| 54 | <li><a href="../patterns/navigation.html">Navigation</a></li> |
| 55 | <li><a href="../patterns/actionbar.html">Action Bar</a></li> |
| 56 | <li><a href="../patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li> |
| 57 | <li><a href="../patterns/swipe-views.html">Swipe Views</a></li> |
| 58 | <li><a href="../patterns/selection.html">Selection</a></li> |
| 59 | <li><a href="../patterns/notifications.html">Notifications</a></li> |
| 60 | <li><a href="../patterns/compatibility.html">Compatibility</a></li> |
| 61 | <li><a href="../patterns/pure-android.html">Pure Android</a></li> |
| 62 | </ul> |
| 63 | </li> |
| 64 | |
| 65 | <li class="nav-section"> |
| 66 | <div class="nav-section-header"><a href="../building-blocks/index.html">Building Blocks</a></div> |
| 67 | <ul> |
| 68 | <li><a href="../building-blocks/tabs.html">Tabs</a></li> |
| 69 | <li><a href="../building-blocks/lists.html">Lists</a></li> |
| 70 | <li><a href="../building-blocks/grid-lists.html">Grid Lists</a></li> |
| 71 | <li><a href="../building-blocks/scrolling.html">Scrolling</a></li> |
| 72 | <li><a href="../building-blocks/spinners.html">Spinners</a></li> |
| 73 | <li><a href="../building-blocks/buttons.html">Buttons</a></li> |
| 74 | <li><a href="../building-blocks/text-fields.html">Text Fields</a></li> |
| 75 | <li><a href="../building-blocks/seek-bars.html">Seek Bars</a></li> |
| 76 | <li><a href="../building-blocks/progress.html">Progress & Activity</a></li> |
| 77 | <li><a href="../building-blocks/switches.html">Switches</a></li> |
| 78 | <li><a href="../building-blocks/dialogs.html">Dialogs</a></li> |
| 79 | <li><a href="../building-blocks/pickers.html">Pickers</a></li> |
| 80 | </ul> |
| 81 | </li> |
| 82 | |
| 83 | <li> |
| Roman Nurik | c894fb7 | 2012-01-10 23:59:20 -0800 | [diff] [blame] | 84 | <div id="back-dac-section"><a href="../../index.html">Developers</a></div> |
| Roman Nurik | 7379046 | 2011-12-22 16:18:19 -0800 | [diff] [blame] | 85 | </li> |
| 86 | |
| 87 | </ul> |
| 88 | |
| 89 | <div id="content"> |
| 90 | |
| 91 | |
| 92 | <div class="layout-content-row content-header"> |
| 93 | <div class="layout-content-col span-9"> |
| 94 | <h2>Gestures</h2> |
| 95 | </div> |
| 96 | <div class="paging-links layout-content-col span-4"> |
| 97 | <a href="#" class="prev-page-link">Previous</a> |
| 98 | <a href="#" class="next-page-link">Next</a> |
| 99 | </div> |
| 100 | </div> |
| 101 | |
| 102 | |
| 103 | |
| 104 | |
| 105 | <p>Gestures allow users to interact with your app by manipulating the screen objects you provide. The |
| 106 | following table shows the core gesture set that is supported in Android.</p> |
| 107 | |
| 108 | <div class="layout-content-row"> |
| 109 | <div class="layout-content-col span-4"> |
| 110 | |
| 111 | <img src="../static/content/gesture_touch.png"> |
| 112 | |
| 113 | <h4>Touch</h4> |
| 114 | <p>Triggers the default functionality for a given item.</p> |
| 115 | |
| 116 | <ul> |
| 117 | <li class="no-bullet with-icon action"> |
| 118 | <h4>Action</h4> |
| 119 | <p>Press, lift</p></li> |
| 120 | </ul> |
| 121 | |
| 122 | </div> |
| 123 | <div class="layout-content-col span-4"> |
| 124 | |
| 125 | <img src="../static/content/gesture_longtouch.png"> |
| 126 | |
| 127 | <h4>Long press</h4> |
| 128 | <p>Enters data selection mode. Allows you to select one or more items in a view and act upon |
| 129 | the data using a contextual action bar. Avoid using long press for showing contextual menus.</p> |
| 130 | |
| 131 | <ul> |
| 132 | <li class="no-bullet with-icon action"> |
| 133 | <h4>Action</h4> |
| 134 | <p>Press, wait, lift</p></li> |
| 135 | </ul> |
| 136 | |
| 137 | </div> |
| 138 | <div class="layout-content-col span-4"> |
| 139 | |
| 140 | <img src="../static/content/gesture_swipe.png"> |
| 141 | |
| 142 | <h4>Swipe</h4> |
| 143 | <p>Scrolls overflowing content, or navigates between views in the same hierarchy.</p> |
| 144 | |
| 145 | <ul> |
| 146 | <li class="no-bullet with-icon action"> |
| 147 | <h4>Action</h4> |
| 148 | <p>Press, move, lift</p></li> |
| 149 | </ul> |
| 150 | |
| 151 | </div> |
| 152 | </div> |
| 153 | |
| 154 | |
| 155 | <div class="layout-content-row"> |
| 156 | <div class="layout-content-col span-4"> |
| 157 | |
| 158 | <img src="../static/content/gesture_drag.png"> |
| 159 | |
| 160 | <h4>Drag</h4> |
| 161 | <p>Rearranges data within a view, or moves data into a container (e.g. folders on Home Screen).</p> |
| 162 | |
| 163 | <ul> |
| 164 | <li class="no-bullet with-icon action"> |
| 165 | <h4>Action</h4> |
| 166 | <p>Long press, move, lift</p></li> |
| 167 | </ul> |
| 168 | |
| 169 | </div> |
| 170 | <div class="layout-content-col span-4"> |
| 171 | |
| 172 | <img src="../static/content/gesture_doubletouch.png"> |
| 173 | |
| 174 | <h4>Double touch</h4> |
| 175 | <p>Zooms into content. Also used as a secondary gesture for text selection.</p> |
| 176 | |
| 177 | <ul> |
| 178 | <li class="no-bullet with-icon action"> |
| 179 | <h4>Action</h4> |
| 180 | <p>Two touches in quick succession</p></li> |
| 181 | </ul> |
| 182 | |
| 183 | </div> |
| 184 | <div class="layout-content-col span-4"> |
| 185 | |
| 186 | <img src="../static/content/gesture_pinchopen.png"> |
| 187 | |
| 188 | <h4>Pinch open</h4> |
| 189 | <p>Zooms into content.</p> |
| 190 | |
| 191 | <ul> |
| 192 | <li class="no-bullet with-icon action"> |
| 193 | <h4>Action</h4> |
| 194 | <p>2-finger press, move outwards, lift</p></li> |
| 195 | </ul> |
| 196 | |
| 197 | </div> |
| 198 | </div> |
| 199 | |
| 200 | |
| 201 | <div class="layout-content-row"> |
| 202 | <div class="layout-content-col span-4"> |
| 203 | |
| 204 | <img src="../static/content/gesture_pinchclose.png"> |
| 205 | |
| 206 | <h4>Pinch close</h4> |
| 207 | <p>Zooms out of content.</p> |
| 208 | |
| 209 | <ul> |
| 210 | <li class="no-bullet with-icon action"> |
| 211 | <h4>Action</h4> |
| 212 | <p>2-finger press, move inwards, lift</p></li> |
| 213 | </ul> |
| 214 | |
| 215 | </div> |
| 216 | </div> |
| 217 | |
| 218 | |
| 219 | |
| 220 | |
| 221 | <div class="layout-content-row content-footer"> |
| 222 | <div class="paging-links layout-content-col span-9"> </div> |
| 223 | <div class="paging-links layout-content-col span-4"> |
| 224 | <a href="#" class="prev-page-link">Previous</a> |
| 225 | <a href="#" class="next-page-link">Next</a> |
| 226 | </div> |
| 227 | </div> |
| 228 | |
| 229 | </div> |
| 230 | |
| 231 | </div> |
| 232 | |
| 233 | <div id="page-footer"> |
| 234 | |
| 235 | <p id="copyright"> |
| 236 | Except as noted, this content is licensed under |
| Roman Nurik | c894fb7 | 2012-01-10 23:59:20 -0800 | [diff] [blame] | 237 | <a href="http://creativecommons.org/licenses/by/2.5/"> |
| Roman Nurik | 7379046 | 2011-12-22 16:18:19 -0800 | [diff] [blame] | 238 | Creative Commons Attribution 2.5</a>.<br> |
| 239 | For details and restrictions, see the |
| Roman Nurik | c894fb7 | 2012-01-10 23:59:20 -0800 | [diff] [blame] | 240 | <a href="http://developer.android.com/license.html">Content License</a>. |
| Roman Nurik | 7379046 | 2011-12-22 16:18:19 -0800 | [diff] [blame] | 241 | </p> |
| 242 | |
| 243 | <p> |
| Roman Nurik | c894fb7 | 2012-01-10 23:59:20 -0800 | [diff] [blame] | 244 | <a href="http://www.android.com/terms.html">Site Terms of Service</a> – |
| 245 | <a href="http://www.android.com/privacy.html">Privacy Policy</a> – |
| 246 | <a href="http://www.android.com/branding.html">Brand Guidelines</a> |
| Roman Nurik | 7379046 | 2011-12-22 16:18:19 -0800 | [diff] [blame] | 247 | </p> |
| 248 | |
| 249 | </div> |
| 250 | </div> |
| 251 | |
| 252 | <script src="../static/jquery-1.6.2.min.js"></script> |
| 253 | <script> |
| 254 | var SITE_ROOT = '../'; |
| 255 | </script> |
| 256 | <script src="../static/default.js"></script> |
| 257 | |
| 258 | |
| 259 | <script type="text/javascript"> |
| 260 | var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); |
| 261 | document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); |
| 262 | </script> |
| 263 | <script type="text/javascript"> |
| 264 | var pageTracker = _gat._getTracker("UA-5831155-1"); |
| 265 | pageTracker._trackPageview(); |
| 266 | </script> |
| 267 | </body> |
| 268 | </html> |