Peter Ng | 252d23d | 2012-08-07 20:19:10 -0700 | [diff] [blame] | 1 | page.title=New in Android |
Joe Fernandez | 33baa5a | 2013-11-14 11:41:19 -0800 | [diff] [blame] | 2 | page.tags=KitKat,Android 4.4 |
Peter Ng | 252d23d | 2012-08-07 20:19:10 -0700 | [diff] [blame] | 3 | @jd:body |
| 4 | |
Dirk Dougherty | 0b73403 | 2013-10-19 11:43:41 -0700 | [diff] [blame] | 5 | |
| 6 | <p>A quick look at the new patterns and styles you can use to build beautiful Android apps… |
| 7 | |
| 8 | <h2 id="kitkat">Android 4.4 KitKat</h2> |
| 9 | |
| 10 | <img src="{@docRoot}design/media/branding_googlemusic.png" style="float:right;width:260px;padding-left:3em;margin-left: 28px;margin-right:15%;"> |
| 11 | |
| 12 | <h3> |
| 13 | Your branding |
| 14 | </h3> |
| 15 | |
| 16 | |
| 17 | <p> |
| 18 | Consistency has its place in Android, but you also have the flexibility to |
| 19 | customize the look of your app to reinforce your brand. |
| 20 | </p> |
| 21 | |
| 22 | <p> |
| 23 | Use your brand color for accent by overriding the Android framework's default |
| 24 | blue in UI elements like checkboxes, progress bars, radio buttons, sliders, |
| 25 | tabs, and scroll indicators. |
| 26 | </p> |
| 27 | |
| 28 | <p> |
| 29 | Show your app's launcher icon and name in the action bar so that users can |
| 30 | see it in every screen of your app. |
| 31 | </p> |
| 32 | <p> |
| 33 | <a href="{@docRoot}design/style/branding.html">Your Branding</a> highlights |
| 34 | these and other pointers on how to incorporate elements of your brand into your |
| 35 | app's visual language — highly encouraged! |
| 36 | </p> |
| 37 | |
| 38 | <h3> |
| 39 | Touch feedback |
| 40 | </h3> |
| 41 | |
| 42 | <p> |
| 43 | Before Android KitKat, Android's default touch feedback color was a vibrant |
| 44 | blue. Every touch resulted in a jolt of high-contrast color, in a shade that |
| 45 | might not have mixed well with your brand's color(s). |
| 46 | </p> |
| 47 | |
| 48 | |
| 49 | <p> |
| 50 | In Android KitKat and beyond, touch feedback is subtle: when something is |
| 51 | touched, by default its background color slightly darkens or lightens. This |
| 52 | provides two benefits: (1) <a href= |
| 53 | "/design/get-started/principles.html#sprinkle-encouragement">sprinkles |
| 54 | of encouragement</a> are more pleasant than jolts, and (2) incorporating your |
| 55 | branding is much easier because the default touch feedback works with |
| 56 | whatever hue you choose. Check the updated <a href= |
| 57 | "/design/style/touch-feedback.html">Touch Feedback</a> page for more |
| 58 | details. |
| 59 | </p> |
| 60 | <img src="{@docRoot}design/media/touch_feedback_reaction_response.png" style="padding-top:1em;"> |
| 61 | |
| 62 | <h3> |
| 63 | Full screen |
| 64 | </h3> |
| 65 | |
| 66 | <p> |
| 67 | Android KitKat has improved support for letting your app use the entire |
| 68 | screen, with a few different approaches to meet the varying needs of apps and |
| 69 | content. The new <a href="{@docRoot}design/patterns/fullscreen.html">Full |
| 70 | Screen</a> page will guide you in setting the stage for deep user engagement. |
| 71 | </p> |
| 72 | |
| 73 | <img src="{@docRoot}design/media/fullscreen_landing.png" style="margin:1em auto 2em auto;"> |
| 74 | |
| 75 | <h3> |
| 76 | Gestures |
| 77 | </h3> |
| 78 | <div class="layout-content-row"> |
| 79 | <div class="layout-content-col span-6"> |
| 80 | <p> |
| 81 | The updated <a href="{@docRoot}design/patterns/gestures.html">Gestures</a> |
| 82 | page covers new and updated gestures introduced in Android KitKat: |
| 83 | <strong>double touch drag</strong> and <strong>double touch</strong>. These |
| 84 | gestures are used for changing the viewing size of content. |
| 85 | </p> |
| 86 | </div> |
| 87 | <div class="layout-content-col span-7"> |
| 88 | <img src="{@docRoot}design/media/gesture_doubletouch.png"> |
| 89 | <img src="{@docRoot}design/media/gesture_doubletouchdrag.png"> |
| 90 | </div> |
| 91 | </div> |
| 92 | |
| 93 | |
| 94 | <h2>Android 4.1 Jelly Bean</h2> |
Peter Ng | 252d23d | 2012-08-07 20:19:10 -0700 | [diff] [blame] | 95 | |
| 96 | <h4>Notifications</h4> |
| 97 | <div class="layout-content-row"> |
| 98 | <div class="layout-content-col span-7"> |
| 99 | <p>Notifications have received some notable enhancements in Android 4.1:</p> |
| 100 | <ul> |
| 101 | <li>Users can act on notifications immediately from the drawer</li> |
| 102 | <li>Notifications are more flexible in size and layout</li> |
| 103 | <li>A priority flag helps sort notifications by importance</li> |
| 104 | <li>Notifications can be collapsed and expanded</li> |
| 105 | </ul> |
| 106 | |
Dirk Dougherty | 0b73403 | 2013-10-19 11:43:41 -0700 | [diff] [blame] | 107 | <p>The base notification layout has not changed, so app notifications designed for versions |
| 108 | earlier than Jelly Bean still look and work the same. Check the updated <a |
| 109 | href="{@docRoot}design/patterns/notifications.html">Notifications</a> page for |
| 110 | more details.</p> |
Peter Ng | 252d23d | 2012-08-07 20:19:10 -0700 | [diff] [blame] | 111 | </div> |
| 112 | <div class="layout-content-col span-6"> |
| 113 | <img src="{@docRoot}design/media/new_notifications.png"> |
| 114 | </div> |
| 115 | </div> |
| 116 | |
| 117 | <div class="vspace size-2"> </div> |
| 118 | |
| 119 | <h4>Resizable Application Widgets</h4> |
| 120 | <div class="layout-content-row"> |
| 121 | <div class="layout-content-col span-7"> |
Dirk Dougherty | 0b73403 | 2013-10-19 11:43:41 -0700 | [diff] [blame] | 122 | <p>Widgets are an essential aspect of home screen customization, allowing |
| 123 | "at-a-glance" views of an app's most important data and functionality right from |
| 124 | the user's home screen. Android 4.1 introduces improved App Widgets that can |
| 125 | <strong>automatically resize and load different content</strong> based upon a |
| 126 | number of factors including:</p> |
Peter Ng | 252d23d | 2012-08-07 20:19:10 -0700 | [diff] [blame] | 127 | <ul> |
| 128 | <li>Where the user drops them on the home screen</li> |
| 129 | <li>The size to which the user expands them</li> |
| 130 | <li>The amount of room available on the home screen</li> |
| 131 | </ul> |
| 132 | |
Dirk Dougherty | 0b73403 | 2013-10-19 11:43:41 -0700 | [diff] [blame] | 133 | <p>You can supply separate landscape and portrait layouts for your widgets, which |
| 134 | the system inflates as appropriate when the screen orientation changes. The <a |
| 135 | href="{@docRoot}design/patterns/widgets.html">Application Widgets</a> page has useful |
| 136 | details about widget types, limitations, and design considerations.</p> |
Peter Ng | 252d23d | 2012-08-07 20:19:10 -0700 | [diff] [blame] | 137 | </div> |
| 138 | <div class="layout-content-col span-6"> |
| 139 | <img src="{@docRoot}design/media/new_widgets.png"> |
| 140 | </div> |
| 141 | </div> |
| 142 | |
| 143 | <div class="vspace size-2"> </div> |
| 144 | |
| 145 | <h4>Accessibility</h4> |
| 146 | <div class="layout-content-row"> |
| 147 | <div class="layout-content-col span-11"> |
Dirk Dougherty | 0b73403 | 2013-10-19 11:43:41 -0700 | [diff] [blame] | 148 | <p>One of Android's missions is to organize the world's information and |
| 149 | make it universally accessible and useful. Our mission applies to all |
| 150 | users-including people with disabilities such as visual impairment, color |
| 151 | deficiency, hearing loss, and limited dexterity.</p> |
| 152 | <p>The new <a href="{@docRoot}design/patterns/accessibility.html">Accessibility</a> |
| 153 | page provides details on how to design your app to be as accessible as possible by:</p> |
Peter Ng | 252d23d | 2012-08-07 20:19:10 -0700 | [diff] [blame] | 154 | <ul> |
| 155 | <li>Making navigation intuitive</li> |
| 156 | <li>Using recommended touch target sizes</li> |
| 157 | <li>Labeling visual UI elements meaningfully</li> |
| 158 | <li>Providing alternatives to affordances that time out</li> |
| 159 | <li>Using standard framework controls or enable TalkBack for custom controls</li> |
| 160 | <li>Trying it out yourself</li> |
| 161 | </ul> |
| 162 | |
Dirk Dougherty | 0b73403 | 2013-10-19 11:43:41 -0700 | [diff] [blame] | 163 | <p>You can supply separate landscape and portrait layouts for your |
| 164 | widgets, which the system inflates as appropriate when the screen |
| 165 | orientation changes. The |
| 166 | <a href="{@docRoot}design/patterns/widgets.html">Widgets</a> page has |
| 167 | useful details about widget types, limitations, and design considerations.</p> |
Peter Ng | 252d23d | 2012-08-07 20:19:10 -0700 | [diff] [blame] | 168 | </div> |
| 169 | <div class="layout-content-col span-2"> |
| 170 | <img src="{@docRoot}design/media/new_accessibility.png"> |
| 171 | </div> |
| 172 | </div> |
| 173 | |
Dirk Dougherty | 0b73403 | 2013-10-19 11:43:41 -0700 | [diff] [blame] | 174 | <h2>Android 4.0 Ice Cream Sandwich</h2> |
Peter Ng | 252d23d | 2012-08-07 20:19:10 -0700 | [diff] [blame] | 175 | |
| 176 | <h4>Navigation bar</h4> |
| 177 | <div class="layout-content-row"> |
| 178 | <div class="layout-content-col span-7"> |
Dirk Dougherty | 0b73403 | 2013-10-19 11:43:41 -0700 | [diff] [blame] | 179 | <p>Android 4.0 removes the need for traditional hardware keys on |
| 180 | phones by replacing them with a virtual navigation bar that houses |
| 181 | the Back, Home and Recents buttons. Read the |
| 182 | <a href="{@docRoot}design/patterns/compatibility.html">Compatibility</a> |
| 183 | pattern to learn how the OS adapts to phones with hardware buttons and |
| 184 | how pre-Android 3.0 apps that rely on menu keys are supported.</p> |
Peter Ng | 252d23d | 2012-08-07 20:19:10 -0700 | [diff] [blame] | 185 | </div> |
| 186 | <div class="layout-content-col span-6"> |
| 187 | <img src="{@docRoot}design/media/whats_new_nav_bar.png"> |
| 188 | </div> |
| 189 | </div> |
| 190 | |
| 191 | <div class="vspace size-2"> </div> |
| 192 | |
| 193 | <h4>Action bar</h4> |
| 194 | <div class="layout-content-row"> |
| 195 | <div class="layout-content-col span-7"> |
Dirk Dougherty | 0b73403 | 2013-10-19 11:43:41 -0700 | [diff] [blame] | 196 | <p>The action bar is the most important structural element of an Android |
| 197 | app. It provides consistent navigation across the platform and allows your |
| 198 | app to surface actions.</p> |
Peter Ng | 252d23d | 2012-08-07 20:19:10 -0700 | [diff] [blame] | 199 | </div> |
| 200 | <div class="layout-content-col span-6"> |
| 201 | <img src="{@docRoot}design/media/whats_new_action_bar.png"> |
| 202 | </div> |
| 203 | </div> |
| 204 | |
| 205 | <div class="vspace size-2"> </div> |
| 206 | |
| 207 | <h4>Multi-pane layouts</h4> |
| 208 | <div class="layout-content-row"> |
| 209 | <div class="layout-content-col span-7"> |
Dirk Dougherty | 0b73403 | 2013-10-19 11:43:41 -0700 | [diff] [blame] | 210 | <p>Creating apps that scale well across different form factors and screen |
| 211 | sizes is important in the Android world. Multi-pane layouts allow you to |
| 212 | combine different activities that show separately on smaller devices into |
| 213 | richer compound views for tablets.</p> |
Peter Ng | 252d23d | 2012-08-07 20:19:10 -0700 | [diff] [blame] | 214 | </div> |
| 215 | <div class="layout-content-col span-6"> |
| 216 | <img src="{@docRoot}design/media/whats_new_multipanel.png"> |
| 217 | </div> |
| 218 | </div> |
| 219 | |
| 220 | <div class="vspace size-2"> </div> |
| 221 | |
| 222 | <h4>Selection</h4> |
| 223 | |
| 224 | <div class="layout-content-row"> |
| 225 | <div class="layout-content-col span-7"> |
Dirk Dougherty | 0b73403 | 2013-10-19 11:43:41 -0700 | [diff] [blame] | 226 | <p>The long press gesture which was traditionally used to show contextual |
| 227 | actions for objects is now used for data selection. When selecting data, |
| 228 | contextual action bars allow you to surface actions.</p> |
Peter Ng | 252d23d | 2012-08-07 20:19:10 -0700 | [diff] [blame] | 229 | </div> |
| 230 | <div class="layout-content-col span-6"> |
| 231 | <img src="{@docRoot}design/media/whats_new_multiselect.png"> |
| 232 | </div> |
| 233 | </div> |