1page.title=Working with Drawables
2
3@jd:body
4
5<div id="tb-wrapper">
6<div id="tb">
7<h2>This lesson teaches you to</h2>
8<ol>
9  <li><a href="#DrawableTint">Tint Drawable Resources</a></li>
10  <li><a href="#ColorExtract">Extract Prominent Colors from an Image</a></li>
11  <li><a href="#VectorDrawables">Create Vector Drawables</a></li>
12</ol>
13<h2>You should also read</h2>
14<ul>
15  <li><a href="http://www.google.com/design/spec">Material design specification</a></li>
16  <li><a href="{@docRoot}design/material/index.html">Material design on Android</a></li>
17</ul>
18</div>
19</div>
20
21<p>The following capabilities for drawables help you implement material design in your apps:</p>
22
23<ul>
24<li>Drawable tinting</li>
25<li>Prominent color extraction</li>
26<li>Vector drawables</li>
27</ul>
28
29<p>This lesson shows you how to use these features in your app.</p>
30
31
32<h2 id="DrawableTint">Tint Drawable Resources</h2>
33
34<p>With Android 5.0 (API level 21) and above, you can tint bitmaps and nine-patches defined as
35alpha masks. You can tint them with color resources or theme attributes that resolve to color
36resources (for example, <code>?android:attr/colorPrimary</code>). Usually, you create these assets
37only once and color them automatically to match your theme.</p>
38
39<p>You can apply a tint to {@link android.graphics.drawable.BitmapDrawable}, {@link
40android.graphics.drawable.NinePatchDrawable} or {@link
41android.graphics.drawable.VectorDrawable} objects with the {@code setTint()} method. You can
42also set the tint color and mode in your layouts with the <code>android:tint</code> and
43<code>android:tintMode</code> attributes.</p>
44
45
46<h2 id="ColorExtract">Extract Prominent Colors from an Image</h2>
47
48<p>The Android Support Library r21 and above includes the {@link
49android.support.v7.graphics.Palette} class, which lets you extract prominent colors from an image.
50This class extracts the following prominent colors:</p>
51
52<ul>
53<li>Vibrant</li>
54<li>Vibrant dark</li>
55<li>Vibrant light</li>
56<li>Muted</li>
57<li>Muted dark</li>
58<li>Muted light</li>
59</ul>
60
61<p>To extract these colors, pass a {@link android.graphics.Bitmap} object to the
62{@link android.support.v7.graphics.Palette#generate Palette.generate()} static method in the
63background thread where you load your images. If you can't use that thread, call the
64{@link android.support.v7.graphics.Palette#generateAsync Palette.generateAsync()} method and
65provide a listener instead.</p>
66
67<p>You can retrieve the prominent colors from the image using the getter methods in the
68<code>Palette</code> class, such as <code>Palette.getVibrantColor</code>.</p>
69
70<p>To use the {@link android.support.v7.graphics.Palette} class in your project, add the following
71<a href="{@docRoot}sdk/installing/studio-build.html#dependencies">Gradle dependency</a> to your
72app's module:</p>
73
74<pre>
75dependencies {
76    ...
77    compile 'com.android.support:palette-v7:21.0.0'
78}
79</pre>
80
81<p>For more information, see the API reference for the {@link android.support.v7.graphics.Palette}
82class.</p>
83
84
85<h2 id="VectorDrawables">Create Vector Drawables</h2>
86
87<!-- video box -->
88<a class="notice-developers-video"
89   href="https://www.youtube.com/watch?v=wlFVIIstKmA"
90   style="margin-top:18px">
91<div>
92    <h3>Video</h3>
93    <p>Android Vector Graphics</p>
94</div>
95</a>
96
97<p>In Android 5.0 (API Level 21) and above, you can define vector drawables, which scale without
98losing definition. You need only one asset file for a vector image, as opposed to an asset file for
99each screen density in the case of bitmap images. To create a vector image, you define the details
100of the shape inside a <code>&lt;vector&gt;</code> XML element.</p>
101
102<p>The following example defines a vector image with the shape of a heart:</p>
103
104<pre>
105&lt;!-- res/drawable/heart.xml -->
106&lt;vector xmlns:android="http://schemas.android.com/apk/res/android"
107    &lt;!-- intrinsic size of the drawable -->
108    android:height="256dp"
109    android:width="256dp"
110    &lt;!-- size of the virtual canvas -->
111    android:viewportWidth="32"
112    android:viewportHeight="32">
113
114  &lt;!-- draw a path -->
115  &lt;path android:fillColor="#8fff"
116      android:pathData="M20.5,9.5
117                        c-1.955,0,-3.83,1.268,-4.5,3
118                        c-0.67,-1.732,-2.547,-3,-4.5,-3
119                        C8.957,9.5,7,11.432,7,14
120                        c0,3.53,3.793,6.257,9,11.5
121                        c5.207,-5.242,9,-7.97,9,-11.5
122                        C25,11.432,23.043,9.5,20.5,9.5z" />
123&lt;/vector>
124</pre>
125
126<p>Vector images are represented in Android as {@link android.graphics.drawable.VectorDrawable}
127objects. For more information about the <code>pathData</code> syntax, see the <a
128href="http://www.w3.org/TR/SVG11/paths.html#PathData">SVG Path reference</a>. For more information
129about animating the properties of vector drawables, see
130<a href="{@docRoot}training/material/animations.html#AnimVector">Animating Vector Drawables</a>.</p>
131