A partir de Android Lollipop (v5.0, API 21) se incorpora la posibilidad de definir drawables de forma vectorial utilizando un formato basado en SVG (Scalable Vector Graphics). También se dispone de una librería de compatibilidad que nos permite usar gráficos vectoriales en versiones anteriores. La gran ventaja de los gráficos vectoriales es que pueden ser reescalados sin perder definición. Solo necesitas un pequeño fichero para definir líneas y curvas, luego podrás representarlo en el tamaño deseado. Resulta mucho más sencillo que diseñar diferentes imágenes en mapa de bits para diferentes densidades.
Para definir un VectorDrawable con XML crea un nuevo fichero en res/drawable. Por ejemplo:
<vector xmlns:android="http://schemas.android.com/apk/res/android"android:width="60dp" android:height="60dp" android:viewportHeight="60" android:viewportWidth="60"> <path android:fillColor="@color/colorPrimary" android:strokeColor="#000000" android:strokeWidth="2" android:pathData="M0 20 L20 20 L30 0 L40 20 L60 20 L45 35 L50 60 L30 45 L10 60 L15 35 Z" /> </vector>
Primero se define el ancho y alto con que queremos que aparezca el drawable y luego el ancho y alto con el que vamos a trabajar para definirlo. Con la etiqueta <path> definimos su trazado, comenzamos definiendo el color de relleno, color de trazo y grosor de trazo. Finalmente se indica los comandos que permiten dibujar la estrella mostrada a continuación. M0 20 mueve el puntero de dibujo hasta estas coordenadas. L20 20 dibuja una línea hasta estas coordenadas, ... Finalmente, Z cierra el trazado actual.
Para más detalles sobre estos comandos SVG consultar http://www.w3.org/TR/SVG11/paths.html#PathData.
VectorDrawable no soporta algunas características de SVG, como los degradados. Consulta la documentación para ver todas las posibilidades tanto en Java como en XML[1].
[1] http://developer.android.com/intl/es/reference/android/graphics/drawable/VectorDrawable.html
Ejercicio paso a paso: Dibujar un gráfico vectorial.
Android Studio permite usar gráficos vectoriales incluso en versiones anteriores a la 5.0. Para resolver el problema de compatibilidad con versiones anteriores, Android Studio detecta que estamos usando una versión mínima inferior a la 5.0; va a convertir los gráficos vectoriales a png. Veamos en este ejercicio como hacerlo.
1. Abre el proyecto del ejercicio anterior. Pulsa con el botón derecho sobre res/drawable y selecciona New/Drawable resource file. Introduce como nombre estrella.xml. Reemplaza su contenido por el que se acaba de mostrar..
2. En la clase EjemploView del ejercicio anterior, haz el siguiente cambio:
miImagen=ContextCompat.getDrawable(context,R.drawable.mi_imagen.estrella);
3. Ejecuta la aplicación y verifica el resultado.4. En el explorador del proyecto pulsa con el botón derecho sobre app y selecciona Show in explorer. Dentro de la carpeta del proyecto accede a app / build / generated / res / pngs / debug.
Observa como en la carpeta drawable-anydpi-v21 se guarda el fichero XML. Este recurso será usado en versiones API 21 o superior, para cualquier densidad gráfica En el resto de carpetas se ha generado un .png de forma automática. Este recurso será usado en versiones anteriores a la 21, según la densidad del dispositivo. conveniente definir el fondo de una vista en su Layout en XML en lugar de hacerlo por código. Comenta la línea introducida en el punto anterior e introduce el siguiente atributo en el Layout main.xml.
NOTA: En caso de que el proyecto especifique una versión mínima de API igual o superior a la 21, estos pngs ya no serán generados.
5. El gráfico ha sido diseñado para ser dibujado con 20 dp. Y esta información es la que utiliza el sistema para generar los pngs. Veamos qué pasa si lo dibujamos a un tamaño mucho mayor. Para ello cambia la siguiente línea:miImagen.setBounds(30,30,2001000, 2001000);
miImagen.setBounds(30,30,2001000, 2001000);
6. Ejecuta la aplicación el un dispositivo con nivel de API 21 o superior. Observa como el reescalado es perfecto.
7. Ejecuta la aplicación el un dispositivo con nivel de API inferior a 21. Observa como el reescalado es deficiente, apareciendo el efecto de pixelado.
Ejercicio paso a paso: Usar la librería de compatibilidad para VectorDrawable.
Como acabamos de ver, Android Studio convierte automáticamente los gráficos vectoriales a png para que puedan ser utilizados en versiones anteriores a la 5.0. Esta solución tiene sus limitaciones, no podemos aumentar el tamaño, cambiar los atributos del gráfico dinámicamente (como uno de sus colores) y, además, ocupan más memoria. En este ejercicio, usaremos otra alternativa: usar una librería de compatibilidad.
1. Para usar gráficos vectoriales en versiones anteriores al API 21, añade al fichero build.gradle(Module:app):
android {
defaultConfig {
…
vectorDrawables.useSupportLibrary = true
}
}
dependencies {
…
compile 'com.android.support:appcompat-v7:26.+'
}
La primera línea indica a Android Studio que vamos a utilizar la librería de compatibilidad para Vector Drawable. La segunda línea es posible que ya esté añadida en el proyecto.
2. Borra la carpeta app / build / generated. Selecciona la opción Build / Make Project. Observa como ahora ya no se ha generado la carpeta app / build / generated / res / pngs. Ya no es necesario que se conviertan los ficheros vectoriales en png. Ahora, se podrá hacer en tiempo de ejecución por software.
3. Ejecuta la aplicación el un dispositivo con nivel de API inferior a 21. Observa como el reescalado es perfecto.
Ejercicio paso a paso: Agregar gráficos vectoriales con Vector Asset.
En el primer ejercicio de esta sección vimos cómo crear VectorDrawable mediante su código XML. En la práctica esto no se suele así así. Cuando necesitamos un gráfico podemos buscarlo en una colección, o si tenemos que generarlo nosotros usaremos un editor de gráficos vectoriales. Para ayudarnos en este trabajo, Android Studio incorpora la herramienta Vectos Asset. Veamos cómo se usa en este ejercicio.
3. Modifica el ejercicio anterior para que se visualice este gráfico.
4. Abre el fichero XML que acabas de añadir. Observa con que poca información se ha definido el gráfico. Cambia el color y algún valor del path. Verifica que el resultado es el esperado.
5. Busca en Internet y fichero con extensión SVG (Scalable Vector Graphics) o PSD (Adobe Photoshop).
6. Abre de nuevo Vectos Asset y selecciona Local file (SVG, PSD). En el campo Name indica un nombre de recurso y en Path el fichero que acabas de descargar. Si lo deseas también puedes cambiar el tamaño que tendrá por defecto la imagen y el grado de opacidad.
7. El formato XML usado en VectorDrawable no soporta todas las características disponibles en los formatos SVG y PSD. En el cuadro Errors, que encontrarás en la parte inferior, se mostrará un listado con los problemas en la conversión.
8. Observa como convierte el fichero al formato utilizado en Android.
La gran ventaja de usar gráficos vectoriales es que ocupan muy poco espacio, podemos cambiar fácilmente los colores y no tenemos que preocuparnos de preparar diferentes recursos para diferentes resoluciones. Como inconveniente los gráficos vectoriales pueden costar más recursos para ser generados, especialmente si son complejos y tienen curvas.
Preguntas de repaso: BitmapDrawable y VectorDrawable