Utilizar imagenes vectoriales en Android
El networking es vital en el mundo del software, y desde Geeky Theory siempre lo hemos incentivado y hemos intentado ser participes de ello, como todas las charlas a las que asistimos y/o las que nosotros damos. En esta clase de evento se aprenden cosas que de otra manera muy difícilmente podríamos acceder o conocer.
En uno de estos evento comentaba un ponente y amigo Txus Ballesteros la utilización de este formato de imágenes para la utilización como iconos en aplicaciones Android. La causa de la utilización de este formato es su potencia de reutilización puesto que es vectorial y no matricial.
Los que no sepáis de que va esto, resumir que un SVG se puede considerar una función, por lo que puede ser redimensionada todo lo que se quiera al no estar generada por pixeles
Para los que habéis pasado por un desarrollo en Android un poco serio, os habréis topado por la adaptación de vuestros recursos para diferentes terminales, con la repetición del misma imagen de icono para cada una de las densidades hdpi,mdpi,ldpi,xhdpi,... aumentando muchísimo el peso de la aplicación final.
Con la utilización de los SVG reducimos ese peso, y el de la RAM en muchos casos teniendo solamente un único recurso que será el SVG que reescalaremos para cada caso.
Para su utilización en Android, haremos uso de una librería que nos facilitará pintar "esa función" en nuestra aplicación.
La imagen SVG podremos dibujarla con cualquier editor de imágenes vectoriales, yo os aconsejo Adobe Illustrator o su homologo open source Inksacape.
Como curiosidad os paso el contenido del archivo de ejemplo, esto es lo que nos encontramos si abrimos un .svg con un editor de texto. Como podemos ver, es texto plano, "una función" que dice como pintar la imagen.
<?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="120px" height="120px" viewBox="0 0 120 120" enable-background="new 0 0 120 120" xml:space="preserve"> <path fill="#FF0808" d="M60,30c-11.595,0-21,9.404-21,21c0,15.75,21,39,21,39s21-23.25,21-39C81,39.404,71.596,30,60,30z M60,58.5 c-4.14,0-7.5-3.358-7.5-7.5s3.36-7.5,7.5-7.5c4.143,0,7.5,3.358,7.5,7.5S64.143,58.5,60,58.5z"/> </svg>
Simplemente deberemos tener un en nuestro layout un ImageView, tal que así:
<ImageView android:id="@+id/imagen" android:layout_width="100dp" android:layout_height="100dp" />
Y en nuestra clase utilizar el siguiente código:
SVG svg; try { svg = new SVGBuilder().readFromAsset(getAssets(), "location.svg").build(); } catch (IOException e) { e.printStackTrace(); } Drawable icono = svg.getDrawable(); ImageView imageView = (ImageView) findViewById(R.id.imagen); imageView.setLayerType(View.LAYER_TYPE_SOFTWARE, null); imageView.setImageDrawable(icono);
Donde "location.svg" será la imagen que queremos mostrar en nuestro ImageView.