1page.title=New in Android 2page.tags="KitKat", "Android 4.4" 3@jd:body 4 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> 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 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> 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"> 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> 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 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> 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"> 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> 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 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> 168 </div> 169 <div class="layout-content-col span-2"> 170 <img src="{@docRoot}design/media/new_accessibility.png"> 171 </div> 172</div> 173 174<h2>Android 4.0 Ice Cream Sandwich</h2> 175 176<h4>Navigation bar</h4> 177<div class="layout-content-row"> 178 <div class="layout-content-col span-7"> 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> 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"> 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> 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"> 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> 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"> 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> 229 </div> 230 <div class="layout-content-col span-6"> 231 <img src="{@docRoot}design/media/whats_new_multiselect.png"> 232 </div> 233</div> 234
