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
137
138
139
140
141
142
143
144
145
146
|
page.title=Get Started
@jd:body
<div id="qv-wrapper">
<div id="qv">
<h2>In this document</h2>
<ol>
<li><a href="#applytheme">Apply the Material Theme</a></li>
<li><a href="#layouts">Design Your Layouts</a></li>
<li><a href="#depth">Specify Depth in Your Views</a></li>
<li><a href="#widgets">Use the New UI Widgets</a></li>
<li><a href="#apis">Use the New APIs</a></li>
</ol>
</div>
</div>
<p>To create apps with material design:</p>
<ol>
<li style="margin-bottom:10px">
Take a look at the <a href="">material design specification</a>.</li>
<li style="margin-bottom:10px">
Apply the material <strong>theme</strong> to your app.</li>
<li style="margin-bottom:10px">
Define additional <strong>styles</strong> to customize the material theme.</li>
<li style="margin-bottom:10px">
Create your <strong>layouts</strong> following material design guidelines.</li>
<li style="margin-bottom:10px">
Specify the <strong>depth</strong> for views to cast appropriate shadows.</li>
<li style="margin-bottom:10px">
Use the new <strong>widgets</strong> for complex views, such as lists and cards.</li>
<li style="margin-bottom:10px">
Use the new <strong>APIs</strong> to customize the animations in your app.</li>
</ol>
<h3>Update Your App for the Android L Developer Preview</h3>
<p>To update an existing app for the Android L Developer Preview, design new layouts following
material design guidelines and consider how you can improve the user experience for your app by
incorporating depth, touch feedback and animations in your UI.</p>
<h3>Create New Apps for the Android L Developer Preview</h3>
<p>If you are creating a new app for the Android L Developer Preview, the material design
guidelines provide you with a solid design framework for your app. Follow these guidelines and
use the new functionality in the Android framework to design and develop your app.</p>
<h2 id="applytheme">Apply the Material Theme</h2>
<p>To apply the material theme in your app, specify a style that inherits from
<code>android:theme.Material</code>:</p>
<pre>
<!-- res/values/styles.xml -->
<resources>
<!-- your app's theme inherits from the Material theme -->
<style name="AppTheme" parent="android:Theme.Material">
<!-- theme customizations -->
</style>
</resources>
</pre>
<p>The material theme provides new system widgets that let you set their color palette and default
animations for touch feedback and activity transitions. For more details, see
<a href="{@docRoot}preview/material/theme.html">Material Theme</a>.</p>
<h2 id="layouts">Design Your Layouts</h2>
<p>In addition to applying and customizing the material theme, your layouts should conform to
the material design guidelines. When you design your layouts, pay special attention to the
following:</p>
<ul>
<li>Baseline grids</li>
<li>Keylines</li>
<li>Spacing</li>
<li>Touch target size</li>
<li>Layout structure</li>
</ul>
<p>You still define layouts inside XML files using the standard tools from the Android framework.
For details on the material design guidelines, see the <a href="">material design
specification</a>.</p>
<h2 id="depth">Specify Depth in Your Views</h2>
<p>In the Android L Developer Preview, views can cast shadows. The elevation value of a view
determines the size of its shadow. To set the elevation of a view, use the
<code>android:elevation</code> attribute in your layouts:</p>
<pre>
<Button
android:id="@+id/my_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/next"
<strong>android:elevation</strong>="10dp" />
</pre>
<p>For more details, see <a href="{@docRoot}preview/material/views-shadows.html">Views and
Shadows</a>.</p>
<h2 id="widgets">Use the New UI Widgets</h2>
<p>The Android L Developer Preview includes two new UI widgets for complex views,
<code>RecyclerView</code> and <code>CardView</code>. <code>RecyclerView</code> is a more advanced
version of <code>ListView</code> that provides performance improvements and is easier to use.
<code>CardView</code> lets you show pieces of information inside cards with a consistent look
across apps. To include a <code>CardView</code> in your layout:</p>
<pre>
<android.support.v7.widget.CardView
android:id="@+id/card_view"
android:layout_width="200dp"
android:layout_height="200dp"
card_view:cardCornerRadius="3dp">
...
</android.support.v7.widget.CardView>
</pre>
<p>For more information, see <a href="{@docRoot}preview/material/ui-widgets.html">UI Widgets</a>.</p>
<h2 id="apis">Use the APIs to Customize Your Animations</h2>
<p>The Android L Developer Preview includes new APIs to create custom animations in your app.
For example, you can enable activity transitions and define an exit transition inside an
activity:</p>
<pre>
// inside your activity
getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
// set an exit transition
getWindow().setExitTransition(new Explode());
</pre>
<p>When you start another activity from this activity, the exit transition is activated.</p>
<p>To learn about all the features in the new APIs, see <a
href="{@docRoot}preview/material/animations.html">Animations</a>.</p>
|
