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=Get Started
@jd:body
<p>To create material design apps on Android:</p>
<ol>
<li>Take a look at the <a href="">material design specification</a>.</li>
<li>Apply the Material <strong>theme</strong> to your app.</li>
<li>Define additional <strong>styles</strong> to customize the Material theme.</li>
<li>Create your <strong>layouts</strong> following material design guidelines.</li>
<li>Specify the <strong>depth</strong> of each component in your layouts to cast appropriate shadows.</li>
<li>Use the new <strong>widgets</strong> for complex views, such as lists and cards.</li>
<li>Use the new <strong>APIs</strong> to customize 3D views and animations in your app.</li>
</ol>
<h3 style="margin-top:25px;">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 style="margin-top:25px;">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 style="margin-top:35px">Material Theme</h2>
<div style="float:right;margin-left:25px">
<img src="{@docRoot}preview/material/images/ThemeColors.png" style="width:250px"/>
<p class="img-caption"><strong>Figure 1.</strong> Customizing the Material theme.</p>
</div>
<p>The new Material theme provides:</p>
<ul>
<li>System widgets that let you set their color palette</li>
<li>Touch feedback animations for the system widgets</li>
<li>Activity transition animations</li>
</ul>
<p>The Android L Developer Preview lets you easily customize the look of the Material theme
according to your brand identity with a color palette you control. You can tint the app bar and
the status bar using theme attributes, as shown in Figure 1.</p>
<p>The system widgets have a new design and touch feedback animations. Activity transitions help
users navigate your app by providing visual continuity. You can customize the color palette,
the touch feedback animations, and the activity transitions for your app.</p>
<p>The Material theme is defined as:</p>
<ul>
<li><code>@android:style/Theme.Material</code> (dark version)</li>
<li><code>@android:style/Theme.Material.Light</code> (light version)</li>
<li><code>@android:style/Theme.Material.Light.DarkActionBar</code></li>
</ul>
<p>For a list of material styles that you can use, see the API reference for
<code>android.R.styles</code>.</p>
<p class="note">
<strong>Note:</strong> The Material theme is only available in the Android L Developer Preview.
For more information, see <a href="{@docRoot}preview/material/compatibility.html">Compatibility</a>.
</p>
<h3 style="margin-top:25px;">Theme Inheritance</h3>
<p>In the Android L Developer Preview, elements in XML layout definitions can specify the
<code>android:theme</code> attribute, which references a theme resource. This attribute modifies
the theme for the element and any elements inflated below it, which is useful to alter theme
color palettes in a specific portion of an interface.</p>
<h3 style="margin-top:25px;">Customize the Status Bar</h3>
<p>The Material theme lets you easily customize the status bar, so you can specify a
color which fits your brand and provides enough contrast to show the white status icons. To
set a custom color for the status bar, use the <code>android:statusBarColor</code> attribute when
you extend the Material theme.</p>
<p>To handle the color of the status bar yourself (for example, by adding a gradient in the
background), set the <code>android:statusBarColor</code> attribute to
<code>@android:color/transparent</code>. You can also use the
<code>Window.setStatusBarColor</code> method for animations or fading.</p>
<h2 style="margin-top:35px">Material Design</h2>
<p>In addition to applying the Material theme, you also have to:</p>
<ul>
<li>Customize the theme's base colors to fit your brand.</li>
<li>Design your layouts according to material design guidelines.</li>
</ul>
<p>The Android L Developer Preview provides new attributes to make it easy to customize the
Material theme:</p>
<pre>
<resources>
<!-- inherit from the Material theme -->
<style name="BaseAppTheme" parent="android:Theme.Material">
<!-- Main theme colors -->
<!-- your app's branding color (for the app bar) -->
<item name="android:colorPrimary">@color/primary</item>
<!-- darker variant of colorPrimary (for contextual app bars) -->
<item name="android:colorPrimaryDark">@color/primary_dark</item>
<!-- other theme colors -->
<item name="android:colorBackground">@color/background</item>
<item name="android:colorAccent">@color/accent</item>
<item name="android:colorButtonNormal">@color/button_normal</item>
<item name="android:colorControlHighlight">@color/button_chigh</item>
<item name="android:windowBackground">@color/wbackground</item>
</style>
</resources>
</pre>
<p>Ensure that you follow material design guidelines when choosing colors for your app.</p>
<p>Design your layouts according to the material design specification. In particular, pay
attention to:</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.
To specify the depth level of each view in your layout, use the <code>android:elevation</code>
attribute.</p>
|
