1 page.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 35 alpha masks. You can tint them with color resources or theme attributes that resolve to color 36 resources (for example, <code>?android:attr/colorPrimary</code>). Usually, you create these assets 37 only 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 40 android.graphics.drawable.NinePatchDrawable} or {@link 41 android.graphics.drawable.VectorDrawable} objects with the {@code setTint()} method. You can 42 also 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 49 android.support.v7.graphics.Palette} class, which lets you extract prominent colors from an image. 50 This 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 63 background 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 65 provide 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 72 app's module:</p> 73 74 <pre> 75 dependencies { 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} 82 class.</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 98 losing definition. You need only one asset file for a vector image, as opposed to an asset file for 99 each screen density in the case of bitmap images. To create a vector image, you define the details 100 of the shape inside a <code><vector></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 <!-- res/drawable/heart.xml --> 106 <vector xmlns:android="http://schemas.android.com/apk/res/android" 107 <!-- intrinsic size of the drawable --> 108 android:height="256dp" 109 android:width="256dp" 110 <!-- size of the virtual canvas --> 111 android:viewportWidth="32" 112 android:viewportHeight="32"> 113 114 <!-- draw a path --> 115 <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 </vector> 124 </pre> 125 126 <p>Vector images are represented in Android as {@link android.graphics.drawable.VectorDrawable} 127 objects. For more information about the <code>pathData</code> syntax, see the <a 128 href="http://www.w3.org/TR/SVG11/paths.html#PathData">SVG Path reference</a>. For more information 129 about animating the properties of vector drawables, see 130 <a href="{@docRoot}training/material/animations.html#AnimVector">Animating Vector Drawables</a>.</p> 131
