1page.title=Material Design 2page.tags=Material,design 3page.type=design 4page.image=design/material/images/MaterialLight.png 5 6@jd:body 7 8<p itemprop="description">Material design is a comprehensive guide for visual, motion, and 9interaction design across platforms and devices. Android now includes support for 10material design apps. To use material design in your Android apps, follow the guidelines defined 11in the <a href="http://www.google.com/design/spec">material design specification</a> and use the 12new components and functionality available in Android 5.0 (API level 21) and above.</p> 13 14<p>Android provides the following elements for you to build material design apps:</p> 15 16<ul> 17 <li>A new theme</li> 18 <li>New widgets for complex views</li> 19 <li>New APIs for custom shadows and animations</li> 20</ul> 21 22<p>For more information about implementing material design on Android, see 23<a href="{@docRoot}training/material/index.html">Creating Apps with Material Design</a>.</p> 24 25 26<h3>Material Theme</h3> 27 28<p>The material theme provides a new style for your app, system widgets that let you set 29their color palette, and default animations for touch feedback and activity transitions.</p> 30 31<!-- two columns --> 32<div style="width:700px;margin-top:25px;margin-bottom:20px"> 33<div style="float:left;width:250px;margin-left:40px;margin-right:60px;"> 34 <img src="{@docRoot}design/material/images/MaterialDark.png" width="500" height="238"/> 35 <div style="width:140px;margin:0 auto"> 36 <p style="margin-top:8px">Dark material theme</p> 37 </div> 38</div> 39<div style="float:left;width:250px;margin-right:0px;"> 40 <img src="{@docRoot}design/material/images/MaterialLight.png" width="500" height="238"/> 41 <div style="width:140px;margin:0 auto"> 42 <p style="margin-top:8px">Light material theme</p> 43 </div> 44</div> 45<br style="clear:left"/> 46</div> 47 48<p>For more information, see <a href="{@docRoot}training/material/theme.html">Using the Material 49Theme</a>.</p> 50 51 52<h3>Lists and Cards</h3> 53 54<p>Android provides two new widgets for displaying cards and lists with material design styles 55and animations:</p> 56 57<!-- two columns --> 58<div style="width:700px;margin-top:25px;margin-bottom:20px"> 59<div style="float:left;width:250px;margin-left:40px;margin-right:60px;"> 60 <img src="{@docRoot}design/material/images/list_mail.png" width="500" height="426"/> 61 <p>The new <code>RecyclerView</code> widget is a more pluggable version of <code>ListView</code> 62 that supports different layout types and provides performance improvements.</p> 63</div> 64<div style="float:left;width:250px;margin-right:0px;"> 65 <img src="{@docRoot}design/material/images/card_travel.png" width="500" height="426"/> 66 <p>The new <code>CardView</code> widget lets you display important pieces of information inside 67 cards that have a consistent look and feel.</p> 68</div> 69<br style="clear:left"/> 70</div> 71 72<p>For more information, see <a href="{@docRoot}training/material/lists-cards.html">Creating Lists 73and Cards</a>.</p> 74 75 76<h3>View Shadows</h3> 77 78<p>In addition to the X and Y properties, views in Android now have a Z 79property. This new property represents the elevation of a view, which determines:</p> 80 81<ul> 82<li>The size of the shadow: views with higher Z values cast bigger shadows.</li> 83<li>The drawing order: views with higher Z values appear on top of other views.</li> 84</ul> 85 86<div style="width:290px;margin-left:35px;float:right"> 87 <div class="framed-nexus5-port-span-5"> 88 <video class="play-on-hover" autoplay> 89 <source src="{@docRoot}design/material/videos/ContactsAnim.mp4"/> 90 <source src="{@docRoot}design/videos/ContactsAnim.webm"/> 91 <source src="{@docRoot}design/videos/ContactsAnim.ogv"/> 92 </video> 93 </div> 94 <div style="font-size:10pt;margin-left:20px;margin-bottom:30px"> 95 <em>To replay the movie, click on the device screen</em> 96 </div> 97</div> 98 99<p>For more information, see <a href="{@docRoot}training/material/shadows-clipping.html">Defining 100Shadows and Clipping Views</a>.</p> 101 102 103<h3>Animations</h3> 104 105<p>The new animation APIs let you create custom animations for touch feedback in UI controls, 106changes in view state, and activity transitions.</p> 107 108<p>These APIs let you:</p> 109 110<ul> 111<li style="margin-bottom:15px"> 112Respond to touch events in your views with <strong>touch feedback</strong> animations. 113</li> 114<li style="margin-bottom:15px"> 115Hide and show views with <strong>circular reveal</strong> animations. 116</li> 117<li style="margin-bottom:15px"> 118Switch between activities with custom <strong>activity transition</strong> animations. 119</li> 120<li style="margin-bottom:15px"> 121Create more natural animations with <strong>curved motion</strong>. 122</li> 123<li style="margin-bottom:15px"> 124Animate changes in one or more view properties with <strong>view state change</strong> animations. 125</li> 126<li style="margin-bottom:15px"> 127Show animations in <strong>state list drawables</strong> between view state changes. 128</li> 129</ul> 130 131<p>Touch feedback animations are built into several standard views, such as buttons. The new APIs 132let you customize these animations and add them to your custom views.</p> 133 134<p>For more information, see <a href="{@docRoot}training/material/animations.html">Defining Custom 135Animations</a>.</p> 136 137 138<h3>Drawables</h3> 139 140<p>These new capabilities for drawables help you implement material design apps:</p> 141 142<ul> 143<li><strong>Vector drawables</strong> are scalable without losing definition and are perfect 144for single-color in-app icons.</li> 145<li><strong>Drawable tinting</strong> lets you define bitmaps as an alpha mask and tint them with 146a color at runtime.</li> 147<li><strong>Color extraction</strong> lets you automatically extract prominent colors from a 148bitmap image.</li> 149</ul> 150 151<p>For more information, see <a href="{@docRoot}training/material/drawables.html">Working with 152Drawables</a>.</p> 153
