blob: 468e4bd9d6ddce41378140b63a545f6e8627408c (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
|
page.title=Material Design
page.type=design
@jd:body
<p itemprop="description">The Android L Developer Preview includes support for material design apps. Material design
is a comprehensive guide for visual, motion, and interaction design across platforms and devices.
To use material design in your Android apps, follow the guidelines defined in the
<a href="">material design specification</a> and use the new components and functionality
available in the Android L Developer Preview.</p>
<p>The Android L Developer Preview provides the following elements for you to build material
design apps:</p>
<ul>
<li>A new theme</li>
<li>New widgets for complex views</li>
<li>New APIs for custom shadows and animations</li>
</ul>
<h3 style="margin-top:30px">Material Theme</h3>
<p>The Material theme provides a new style for your app, system widgets that let you set
their color palette, and default animations for touch feedback and activity transitions.</p>
<!-- two columns -->
<div style="width:700px;margin-top:25px;margin-bottom:20px">
<div style="float:left;width:250px;margin-left:40px;margin-right:60px;">
<img src="{@docRoot}preview/material/images/MaterialDark.png" style="width:250px;"/>
<div style="width:140px;margin:0 auto">
<p style="margin-top:8px">Dark Material theme</p>
</div>
</div>
<div style="float:left;width:250px;margin-right:0px;">
<img src="{@docRoot}preview/material/images/MaterialLight.png" style="width:250px;"/>
<div style="width:140px;margin:0 auto">
<p style="margin-top:8px">Light Material theme</p>
</div>
</div>
<br style="clear:left"/>
</div>
<h3 style="margin-top:30px">New Widgets</h3>
<p>The Android L Developer Preview includes two new widgets for displaying complex views:</p>
<!-- two columns -->
<div style="width:700px;margin-top:25px;margin-bottom:20px">
<div style="float:left;width:250px;margin-left:40px;margin-right:60px;">
<img src="{@docRoot}preview/material/images/list_mail.png" style="width:250px;"/>
<p>The new <code>RecyclerView</code> widget is a container for large sets of views that can be
recycled and scrolled very efficiently.</p>
</div>
<div style="float:left;width:250px;margin-right:0px;">
<img src="{@docRoot}preview/material/images/card_travel.png" style="width:250px;"/>
<p>The new <code>CardView</code> widget lets you display important pieces of information inside
cards that have a consistent look and feel.</p>
</div>
<br style="clear:left"/>
</div>
<h3 style="margin-top:30px">3D Views and Shadows</h3>
<p>In addition to the X and Y components, views in the Android L Developer Preview have a Z
component. This new component represents the elevation of a view, which determines the size of
its shadow: views with higher Z values cast bigger shadows.</p>
<h3 style="margin-top:30px">Animations</h3>
<p>The Android L Developer Preview provides new APIs that let you create custom animations for
touch feedback in UI controls, view state changes, and activity transitions.</p>
<!-- two columns -->
<div style="width:700px;margin-left:12px;margin-top:25px;margin-bottom:5px">
<div style="float:left;width:340px;margin-left:0px;margin-right:0px;">
<div class="framed-nexus5-port-span-5">
<video class="play-on-hover" autoplay>
<source src="/preview/material/videos/ContactsAnim.mp4"/>
<source src="/preview/material/videos/ContactsAnim.webm"/>
<source src="/preview/material/videos/ContactsAnim.ogv"/>
</video>
</div>
</div>
<div style="float:left;width:340px;margin-right:0px;">
<div class="framed-nexus5-port-span-5">
<video class="play-on-hover" autoplay>
<source src="/preview/material/videos/Dial.mp4"/>
<source src="/preview/material/videos/Dial.webm"/>
<source src="/preview/material/videos/Dial.ogv"/>
</video>
</div>
</div>
<br style="clear:left"/>
</div>
<div style="text-align:center;font-size:10pt;margin-right:35px">
<em>Click on the device screen to replay the movie</em>
</div>
<!-- three columns -->
<div style="width:700px;margin-top:25px;margin-bottom:0px">
<div style="float:left;width:200px;margin-left:0px;margin-right:0px;">
<p>Respond to touch events in your views with <strong>touch feedback</strong> animations.</p>
</div>
<div style="float:left;margin-left:25px;width:200px;margin-right:0px;">
<p>Hide and show views with <strong>reveal effect</strong> animations.</p>
</div>
<div style="float:left;margin-left:25px;width:200px;margin-right:0px;">
<p>Switch between activities with custom <strong>activity transition</strong> animations.</p>
</div>
<br style="clear:left"/>
</div>
<!-- three columns -->
<div style="width:700px;margin-top:0px;margin-bottom:20px">
<div style="float:left;width:200px;margin-left:0px;margin-right:0px;">
<p>Create custom animation patterns with <strong>curved motion</strong>.</p>
</div>
<div style="float:left;margin-left:25px;width:200px;margin-right:0px;">
<p>Animate changes in one or more view properties with <strong>view state change</strong> animations.</p>
</div>
<div style="float:left;margin-left:25px;width:200px;margin-right:0px;">
<p>Show animations in <strong>state list drawables</strong> between view state changes.</p>
</div>
<br style="clear:left"/>
</div>
<h3 style="margin-top:30px">New Capabilities for Drawables</h3>
<p>The Android L Developer Preview supports <strong>drawable tinting</strong>: you can define
bitmaps as an alpha mask and tint them using a color resource. You can create these assets only
once and color each instance to match your theme.</p>
|
