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