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
|
page.title=Working with Drawables
@jd:body
<div id="tb-wrapper">
<div id="tb">
<h2>This lesson teaches you to</h2>
<ol>
<li><a href="#DrawableTint">Tint Drawable Resources</a></li>
<li><a href="#ColorExtract">Extract Prominent Colors from an Image</a></li>
<li><a href="#VectorDrawables">Create Vector Drawables</a></li>
</ol>
<h2>You should also read</h2>
<ul>
<li><a href="http://www.google.com/design/spec">Material design specification</a></li>
<li><a href="{@docRoot}design/material/index.html">Material design on Android</a></li>
</ul>
</div>
</div>
<p>The following capabilities for drawables help you implement material design in your apps:</p>
<ul>
<li>Drawable tinting</li>
<li>Prominent color extraction</li>
<li>Vector drawables</li>
</ul>
<p>This lesson shows you how to use these features in your app.</p>
<h2 id="DrawableTint">Tint Drawable Resources</h2>
<p>With Android 5.0 (API level 21) and above, you can tint bitmaps and nine-patches defined as
alpha masks. You can tint them with color resources or theme attributes that resolve to color
resources (for example, <code>?android:attr/colorPrimary</code>). Usually, you create these assets
only once and color them automatically to match your theme.</p>
<p>You can apply a tint to {@link android.graphics.drawable.BitmapDrawable}, {@link
android.graphics.drawable.NinePatchDrawable} or {@link
android.graphics.drawable.VectorDrawable} objects with the {@code setTint()} method. You can
also set the tint color and mode in your layouts with the <code>android:tint</code> and
<code>android:tintMode</code> attributes.</p>
<h2 id="ColorExtract">Extract Prominent Colors from an Image</h2>
<p>The Android Support Library r21 and above includes the {@link
android.support.v7.graphics.Palette} class, which lets you extract prominent colors from an image.
This class extracts the following prominent colors:</p>
<ul>
<li>Vibrant</li>
<li>Vibrant dark</li>
<li>Vibrant light</li>
<li>Muted</li>
<li>Muted dark</li>
<li>Muted light</li>
</ul>
<p>To extract these colors, pass a {@link android.graphics.Bitmap} object to the
{@link android.support.v7.graphics.Palette#generate Palette.generate()} static method in the
background thread where you load your images. If you can't use that thread, call the
{@link android.support.v7.graphics.Palette#generateAsync Palette.generateAsync()} method and
provide a listener instead.</p>
<p>You can retrieve the prominent colors from the image using the getter methods in the
<code>Palette</code> class, such as <code>Palette.getVibrantColor</code>.</p>
<p>To use the {@link android.support.v7.graphics.Palette} class in your project, add the following
<a href="{@docRoot}sdk/installing/studio-build.html#dependencies">Gradle dependency</a> to your
app's module:</p>
<pre>
dependencies {
...
compile 'com.android.support:palette-v7:21.0.0'
}
</pre>
<p>For more information, see the API reference for the {@link android.support.v7.graphics.Palette}
class.</p>
<h2 id="VectorDrawables">Create Vector Drawables</h2>
<!-- video box -->
<a class="notice-developers-video"
href="https://www.youtube.com/watch?v=wlFVIIstKmA"
style="margin-top:18px">
<div>
<h3>Video</h3>
<p>Android Vector Graphics</p>
</div>
</a>
<p>In Android 5.0 (API Level 21) and above, you can define vector drawables, which scale without
losing definition. You need only one asset file for a vector image, as opposed to an asset file for
each screen density in the case of bitmap images. To create a vector image, you define the details
of the shape inside a <code><vector></code> XML element.</p>
<p>The following example defines a vector image with the shape of a heart:</p>
<pre>
<!-- res/drawable/heart.xml -->
<vector xmlns:android="http://schemas.android.com/apk/res/android"
<!-- intrinsic size of the drawable -->
android:height="256dp"
android:width="256dp"
<!-- size of the virtual canvas -->
android:viewportWidth="32"
android:viewportHeight="32">
<!-- draw a path -->
<path android:fillColor="#8fff"
android:pathData="M20.5,9.5
c-1.955,0,-3.83,1.268,-4.5,3
c-0.67,-1.732,-2.547,-3,-4.5,-3
C8.957,9.5,7,11.432,7,14
c0,3.53,3.793,6.257,9,11.5
c5.207,-5.242,9,-7.97,9,-11.5
C25,11.432,23.043,9.5,20.5,9.5z" />
</vector>
</pre>
<p>Vector images are represented in Android as {@link android.graphics.drawable.VectorDrawable}
objects. For more information about the <code>pathData</code> syntax, see the <a
href="http://www.w3.org/TR/SVG11/paths.html#PathData">SVG Path reference</a>. For more information
about animating the properties of vector drawables, see
<a href="{@docRoot}training/material/animations.html#AnimVector">Animating Vector Drawables</a>.</p>
|
