1page.title=Trabajar con interfaces dibujables 2 3@jd:body 4 5<div id="tb-wrapper"> 6<div id="tb"> 7<h2>Esta lección te enseña a realizar lo siguiente:</h2> 8<ol> 9 <li><a href="#DrawableTint">Cambiar el matiz de los recursos dibujables</a></li> 10 <li><a href="#ColorExtract">Extraer colores prominentes de una imagen</a></li> 11 <li><a href="#VectorDrawables">Crear interfaces dibujables en vector</a></li> 12</ol> 13<h2>También deberías leer</h2> 14<ul> 15 <li><a href="http://www.google.com/design/spec">Especificación de Material Design</a></li> 16 <li><a href="{@docRoot}design/material/index.html">Diseño material en Android</a></li> 17</ul> 18</div> 19</div> 20 21<p>Las siguientes capacidades para las interfaces dibujables te ayudan a implementar Material Design en tus aplicaciones:</p> 22 23<ul> 24<li>Matiz de la interfaz dibujable</li> 25<li>Extracción de color prominente</li> 26<li>Interfaces dibujables en vector</li> 27</ul> 28 29<p>Esta lección te muestra cómo usar estas características en tu aplicación.</p> 30 31 32<h2 id="DrawableTint">Cambiar el matiz de los recursos dibujables</h2> 33 34<p>Con Android 5.0 (API nivel 21) y superior, puedes cambiar el matiz de los mapas de bits y nueve parches definidos como 35máscaras alfa. Puedes cambiar el matiz con recursos de colores o atributos de temas que se resuelven a 36recursos de colores (por ejemplo, <code>?android:attr/colorPrimary</code>). Generalmente, puedes crear estos recursos 37solo una vez y agregarles color automáticamente para que coincidan con tu tema.</p> 38 39<p>Puedes aplicar un matiz a los objetos {@link android.graphics.drawable.BitmapDrawable} o {@link 40android.graphics.drawable.NinePatchDrawable} con el método {@code setTint()}. También puedes 41establecer el color de matiz y el modo en tus diseños con los atributos <code>android:tint</code> y 42<code>android:tintMode</code>.</p> 43 44 45<h2 id="ColorExtract">Extraer colores prominentes de una imagen</h2> 46 47<p>La Biblioteca de soporte de Android r21 y superiores incluye la clase {@link 48android.support.v7.graphics.Palette}, que te permite extraer colores prominentes de una imagen. 49Esta clase extrae los siguientes colores prominentes:</p> 50 51<ul> 52<li>Brillante</li> 53<li>Oscuro brillante</li> 54<li>Claro brillante</li> 55<li>Apagado</li> 56<li>Oscuro apagado</li> 57<li>Claro apagado</li> 58</ul> 59 60<p>Para extraer estos colores, pasa un objeto {@link android.graphics.Bitmap} al método estático 61{@link android.support.v7.graphics.Palette#generate Palette.generate()} en el subproceso en 62segundo plano en donde cargas tus imágenes. Si no puedes usar dicho subproceso, llama al método 63{@link android.support.v7.graphics.Palette#generateAsync Palette.generateAsync()} y proporciona 64un gestor de eventos en su lugar.</p> 65 66<p>Puedes recuperar los colores prominentes de la imagen mediante los métodos de obtención en la clase 67<code>Palette</code>, como <code>Palette.getVibrantColor</code>.</p> 68 69<p>Para usar la clase {@link android.support.v7.graphics.Palette} en tu proyecto, agrega la siguiente 70<a href="{@docRoot}sdk/installing/studio-build.html#dependencies">Dependencia Gradle</a> al módulo de 71tu aplicación:</p> 72 73<pre> 74dependencies { 75 ... 76 compile 'com.android.support:palette-v7:21.0.0' 77} 78</pre> 79 80<p>Para más información, consulta la referencia de la API para la clase {@link android.support.v7.graphics.Palette}. 81</p> 82 83 84<h2 id="VectorDrawables">Crear interfaces dibujables en vector</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>Video</h3> 90 <p>Gráficos en vector de Android</p> 91</div> 92</a> 93 94<p>En Android 5.0 (API nivel 21) y superiores, puedes definir las interfaces dibujables en vector, que escalan sin 95perder definición. Solo necesitas un archivo de recurso para una imagen en vector, en oposición a un archivo de recurso para 96la densidad de cada pantalla en el caso de imágenes de mapa de bits. Para crear una imagen en vector, defines los detalles 97de la forma dentro de un elemento XML <code><vector></code>.</p> 98 99<p>El siguiente ejemplo define una imagen en vector con la forma de un corazón:</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>Las imágenes en vector están representadas en Android como objetos {@link android.graphics.drawable.VectorDrawable}. 124 Para más información sobre la sintaxis <code>pathData</code>, consulta la <a href="http://www.w3.org/TR/SVG11/paths.html#PathData">referencia de ruta de acceso SVG</a>. Para más información 125sobre la animación de las propiedades de las interfaces dibujables en vector, consulta 126<a href="{@docRoot}training/material/animations.html#AnimVector">Animación de interfaces dibujables en vector</a>.</p> 127