1 page.title=Material Design 2 page.tags=Material,design 3 page.type=design 4 page.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 9 interaction design across platforms and devices. Android now includes support for 10 material design apps. To use material design in your Android apps, follow the guidelines defined 11 in the <a href="http://www.google.com/design/spec">material design specification</a> and use the 12 new 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 29 their 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 49 Theme</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 55 and 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 73 and 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 79 property. 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 100 Shadows 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, 106 changes in view state, and activity transitions.</p> 107 108 <p>These APIs let you:</p> 109 110 <ul> 111 <li style="margin-bottom:15px"> 112 Respond to touch events in your views with <strong>touch feedback</strong> animations. 113 </li> 114 <li style="margin-bottom:15px"> 115 Hide and show views with <strong>circular reveal</strong> animations. 116 </li> 117 <li style="margin-bottom:15px"> 118 Switch between activities with custom <strong>activity transition</strong> animations. 119 </li> 120 <li style="margin-bottom:15px"> 121 Create more natural animations with <strong>curved motion</strong>. 122 </li> 123 <li style="margin-bottom:15px"> 124 Animate changes in one or more view properties with <strong>view state change</strong> animations. 125 </li> 126 <li style="margin-bottom:15px"> 127 Show 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 132 let 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 135 Animations</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 144 for single-color in-app icons.</li> 145 <li><strong>Drawable tinting</strong> lets you define bitmaps as an alpha mask and tint them with 146 a color at runtime.</li> 147 <li><strong>Color extraction</strong> lets you automatically extract prominent colors from a 148 bitmap image.</li> 149 </ul> 150 151 <p>For more information, see <a href="{@docRoot}training/material/drawables.html">Working with 152 Drawables</a>.</p> 153
