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