1page.title=Como trabalhar com desenháveis
2
3@jd:body
4
5<div id="tb-wrapper">
6<div id="tb">
7<h2>Esta lição ensina a</h2>
8<ol>
9  <li><a href="#DrawableTint">Colorir recursos desenháveis</a></li>
10  <li><a href="#ColorExtract">Extrair cores proeminentes de uma imagem</a></li>
11  <li><a href="#VectorDrawables">Criar desenháveis de vetor</a></li>
12</ol>
13<h2>Você também deve ler</h2>
14<ul>
15  <li><a href="http://www.google.com/design/spec">Especificações do Material Design</a></li>
16  <li><a href="{@docRoot}design/material/index.html">Material Design no Android</a></li>
17</ul>
18</div>
19</div>
20
21<p>As seguintes capacidades dos desenháveis ajudam na implementação do Material Design nos aplicativos:</p>
22
23<ul>
24<li>Tingimento desenhável</li>
25<li>Extração de cor proeminente</li>
26<li>Desenháveis de vetor</li>
27</ul>
28
29<p>Esta lição mostra como usar esses recursos no seu aplicativo.</p>
30
31
32<h2 id="DrawableTint">Colorir recursos desenháveis</h2>
33
34<p>Com o Android 5.0 (API de nível 21) e posteriores, você pode colorir bitmaps e nine-patches definidos como
35máscaras alfa. Você pode colori-los com recursos de cor ou atributos de tema que determinam os recursos
36de cor (por exemplo, <code>?android:attr/colorPrimary</code>). Normalmente, você cria esses ativos
37somente uma vez e colore-os automaticamente para combinar com seu tema.</p>
38
39<p>Você pode aplicar um tingimento aos objetos {@link android.graphics.drawable.BitmapDrawable} ou {@link
40android.graphics.drawable.NinePatchDrawable} com o método {@code setTint()}. Você também
41pode configurar a cor e o modo do tingimento nos layouts com os atributos <code>android:tint</code> e
42<code>android:tintMode</code>.</p>
43
44
45<h2 id="ColorExtract">Extrair cores proeminentes de uma imagem</h2>
46
47<p>A Biblioteca de Suporte r21 do Android e posteriores incluem a classe {@link
48android.support.v7.graphics.Palette}, que permite a extração de cores proeminentes de uma imagem.
49Essa classe extrai as seguintes cores proeminentes:</p>
50
51<ul>
52<li>Vibrante</li>
53<li>Escuro vibrante</li>
54<li>Claro vibrante</li>
55<li>Suave</li>
56<li>Escuro suave</li>
57<li>Claro suave</li>
58</ul>
59
60<p>Para extrair essas cores, passe um objeto {@link android.graphics.Bitmap} para o método estático
61{@link android.support.v7.graphics.Palette#generate Palette.generate()} no encadeamento do segundo
62plano em que você carrega as imagens. Se você não puder usar aquele encadeamento, chame o método
63{@link android.support.v7.graphics.Palette#generateAsync Palette.generateAsync()} e forneça um escutador
64como alternativa.</p>
65
66<p>Você pode recuperar as cores proeminentes da imagem usando métodos de obtenção na classe
67<code>Palette</code>, como <code>Palette.getVibrantColor</code>.</p>
68
69<p>Para usar a classe {@link android.support.v7.graphics.Palette} no projeto, adicione a seguinte
70<a href="{@docRoot}sdk/installing/studio-build.html#dependencies">dependência do Gradle</a> ao
71módulo do aplicativo:</p>
72
73<pre>
74dependencies {
75    ...
76    compile 'com.android.support:palette-v7:21.0.0'
77}
78</pre>
79
80<p>Para obter mais informações, consulte a referência de API para a classe {@link android.support.v7.graphics.Palette}
81.</p>
82
83
84<h2 id="VectorDrawables">Criar desenháveis de vetor</h2>
85
86<!-- video box -->
87<a class="notice-developers-video" href="https://www.youtube.com/watch?v=wlFVIIstKmA" style="margin-top:18px">
88<div>
89    <h3>Vídeos</h3>
90    <p>Gráficos de vetor do Android</p>
91</div>
92</a>
93
94<p>No Android 5.0 (API de nível 21) e posteriores, você pode definir desenháveis de vetor que são dimensionáveis
95sem perder definição. Você precisa apenas de um arquivo de ativos para uma imagem de vetor, em vez de um arquivo de ativos
96para cada densidade de tela no caso de imagens de bitmap. Para criar uma imagem de vetor, defina os detalhes
97da forma dentro de um elemento XML <code>&lt;vector&gt;</code>.</p>
98
99<p>O exemplo a seguir define uma imagem de vetor com a forma de um coração:</p>
100
101<pre>
102&lt;!-- res/drawable/heart.xml -->
103&lt;vector xmlns:android="http://schemas.android.com/apk/res/android"
104    &lt;!-- intrinsic size of the drawable -->
105    android:height="256dp"
106    android:width="256dp"
107    &lt;!-- size of the virtual canvas -->
108    android:viewportWidth="32"
109    android:viewportHeight="32">
110
111  &lt;!-- draw a path -->
112  &lt;path android:fillColor="#8fff"
113      android:pathData="M20.5,9.5
114                        c-1.955,0,-3.83,1.268,-4.5,3
115                        c-0.67,-1.732,-2.547,-3,-4.5,-3
116                        C8.957,9.5,7,11.432,7,14
117                        c0,3.53,3.793,6.257,9,11.5
118                        c5.207,-5.242,9,-7.97,9,-11.5
119                        C25,11.432,23.043,9.5,20.5,9.5z" />
120&lt;/vector>
121</pre>
122
123<p>Imagens de vetor são representadas no Android como objetos {@link android.graphics.drawable.VectorDrawable}
124. Para obter mais informações sobre a sintaxe <code>pathData</code>, consulte a <a href="http://www.w3.org/TR/SVG11/paths.html#PathData">Referência do caminho SVG</a>. Para obter informações sobre
125como animar propriedades de desenháveis de vetor, consulte
126<a href="{@docRoot}training/material/animations.html#AnimVector">Animar desenháveis de vetor</a>.</p>
127