blob: c58075e6219864b3c23db775c51265b6be906d7c [file] [log] [blame]
page.title=Working with Drawables
<div id="tb-wrapper">
<div id="tb">
<h2>This lesson teaches you to</h2>
<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>
<h2>You should also read</h2>
<li><a href="">Material design specification</a></li>
<li><a href="{@docRoot}design/material/index.html">Material design on Android</a></li>
<p>The following capabilities for drawables help you implement material design in your apps:</p>
<li>Drawable tinting</li>
<li>Prominent color extraction</li>
<li>Vector drawables</li>
<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}, {@link} or {@link} 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} class, which lets you extract prominent colors from an image.
This class extracts the following prominent colors:</p>
<li>Vibrant dark</li>
<li>Vibrant light</li>
<li>Muted dark</li>
<li>Muted light</li>
<p>To extract these colors, pass a {@link} object to the
{@link Palette.generate()} static method in the
background thread where you load your images. If you can't use that thread, call the
{@link 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} 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>
dependencies {
compile ''
<p>For more information, see the API reference for the {@link}
<h2 id="VectorDrawables">Create Vector Drawables</h2>
<!-- video box -->
<a class="notice-developers-video"
<p>Android Vector Graphics</p>
<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>&lt;vector&gt;</code> XML element.</p>
<p>The following example defines a vector image with the shape of a heart:</p>
&lt;!-- res/drawable/heart.xml -->
&lt;vector xmlns:android=""
&lt;!-- intrinsic size of the drawable -->
&lt;!-- size of the virtual canvas -->
&lt;!-- draw a path -->
&lt;path android:fillColor="#8fff"
C25,11.432,23.043,9.5,20.5,9.5z" />
<p>Vector images are represented in Android as {@link}
objects. For more information about the <code>pathData</code> syntax, see the <a
href="">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>