1 page.title=Como trabalhar com desenhveis 2 3 @jd:body 4 5 <div id="tb-wrapper"> 6 <div id="tb"> 7 <h2>Esta lio ensina a</h2> 8 <ol> 9 <li><a href="#DrawableTint">Colorir recursos desenhveis</a></li> 10 <li><a href="#ColorExtract">Extrair cores proeminentes de uma imagem</a></li> 11 <li><a href="#VectorDrawables">Criar desenhveis de vetor</a></li> 12 </ol> 13 <h2>Voc tambm deve ler</h2> 14 <ul> 15 <li><a href="http://www.google.com/design/spec">Especificaes 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 desenhveis ajudam na implementao do Material Design nos aplicativos:</p> 22 23 <ul> 24 <li>Tingimento desenhvel</li> 25 <li>Extrao de cor proeminente</li> 26 <li>Desenhveis de vetor</li> 27 </ul> 28 29 <p>Esta lio mostra como usar esses recursos no seu aplicativo.</p> 30 31 32 <h2 id="DrawableTint">Colorir recursos desenhveis</h2> 33 34 <p>Com o Android 5.0 (API de nvel 21) e posteriores, voc pode colorir bitmaps e nine-patches definidos como 35 mscaras alfa. Voc pode colori-los com recursos de cor ou atributos de tema que determinam os recursos 36 de cor (por exemplo, <code>?android:attr/colorPrimary</code>). Normalmente, voc cria esses ativos 37 somente 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 40 android.graphics.drawable.NinePatchDrawable} com o mtodo {@code setTint()}. Voc tambm 41 pode 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 48 android.support.v7.graphics.Palette}, que permite a extrao de cores proeminentes de uma imagem. 49 Essa 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 mtodo esttico 61 {@link android.support.v7.graphics.Palette#generate Palette.generate()} no encadeamento do segundo 62 plano em que voc carrega as imagens. Se voc no puder usar aquele encadeamento, chame o mtodo 63 {@link android.support.v7.graphics.Palette#generateAsync Palette.generateAsync()} e fornea um escutador 64 como alternativa.</p> 65 66 <p>Voc pode recuperar as cores proeminentes da imagem usando mtodos de obteno 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">dependncia do Gradle</a> ao 71 mdulo do aplicativo:</p> 72 73 <pre> 74 dependencies { 75 ... 76 compile 'com.android.support:palette-v7:21.0.0' 77 } 78 </pre> 79 80 <p>Para obter mais informaes, consulte a referncia de API para a classe {@link android.support.v7.graphics.Palette} 81 .</p> 82 83 84 <h2 id="VectorDrawables">Criar desenhveis 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>Vdeos</h3> 90 <p>Grficos de vetor do Android</p> 91 </div> 92 </a> 93 94 <p>No Android 5.0 (API de nvel 21) e posteriores, voc pode definir desenhveis de vetor que so dimensionveis 95 sem perder definio. Voc precisa apenas de um arquivo de ativos para uma imagem de vetor, em vez de um arquivo de ativos 96 para cada densidade de tela no caso de imagens de bitmap. Para criar uma imagem de vetor, defina os detalhes 97 da forma dentro de um elemento XML <code><vector></code>.</p> 98 99 <p>O exemplo a seguir define uma imagem de vetor com a forma de um corao:</p> 100 101 <pre> 102 <!-- res/drawable/heart.xml --> 103 <vector xmlns:android="http://schemas.android.com/apk/res/android" 104 <!-- intrinsic size of the drawable --> 105 android:height="256dp" 106 android:width="256dp" 107 <!-- size of the virtual canvas --> 108 android:viewportWidth="32" 109 android:viewportHeight="32"> 110 111 <!-- draw a path --> 112 <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 </vector> 121 </pre> 122 123 <p>Imagens de vetor so representadas no Android como objetos {@link android.graphics.drawable.VectorDrawable} 124 . Para obter mais informaes sobre a sintaxe <code>pathData</code>, consulte a <a href="http://www.w3.org/TR/SVG11/paths.html#PathData">Referncia do caminho SVG</a>. Para obter informaes sobre 125 como animar propriedades de desenhveis de vetor, consulte 126 <a href="{@docRoot}training/material/animations.html#AnimVector">Animar desenhveis de vetor</a>.</p> 127
