Images Vectorielles

Drawables

L’ajout d’images à un projet android se fait via les drawables. Pour des raisons de performance, en fonction de la taille de l’écran nous devons fournir une image possédant une plus ou moins grand résolution. C’est pour cela qu’une même image sera ajoutée dans plusieurs tailles dans les dossiers mdpi, hdpi, xhdpi, etc. Ce qui augmente rapidement le poids de l’application.

devices_displays_density@2x

Cette contrainte est souvent mal perçue par les développeurs, car elle demande un effort supplémentaire entre l’export de la maquette et l’ajout au projet, et souvent se solde par l’ajout d’images de mauvaise résolution ou d’une seule image dans les drawable.

Images Vectorielles

Il existe un type d’image résistant à la résolution, c’est à dire pouvant être affichées sans perte de qualité peux importe la résolution à laquelle nous l’affichons, elles sont appelées vectorielles.

Elles ne sont pas composées de pixel contrairement aux png ou jpeg, mais de définitions de formes, associées à des couleurs. Ce qui a pour résultat de re-calculter la forme lorsque l’on change la résolution de l’image au lieu de rasteriser celle-ci.

vector

Vector Drawable

Depuis android 5.0, il est maintenant possible d’utiliser ces images dans vos projets, en utilisant les vector drawables !

Pour créer une image vectorielle, il suffit d’écrire les détails de notre forme au sein d’une balise <vector> dans un fichier drawable xml.

Par exemple, pour dessiner ce coeur :

Capture d’écran 2016-07-21 à 15.04.22

Vous devrez écrire le code suivant dans res/drawable/heart.xml

<?xml version="1.0" encoding="utf-8"/>
<vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="56dp" android:height="56dp" android:viewportHeight="32" android:viewportWidth="32">

    <path android:fillColor="#000000" android:pathData="M20.5,9.5 c-1.955,0,-3.83,1.268,-4.5,3 c-0.67,-1.732,-2.547,-3,-4.5,-3 C8.957,9.5,7,11.432,7,14 c0,3.53,3.793,6.257,9,11.5 c5.207,-5.242,9,-7.97,9,-11.5 C25,11.432,23.043,9.5,20.5,9.5z"/>
</vector>

android:height / android:width : la taille de l’image générée
android:viewportHeight / android:viewportWidth : taille du canvas
path : le code svg de la forme

Importer un SVG

Bien sure vous n’allez pas écrire le pathData à la main, il existe un outil dans android studio permettant de créer un vector drawable à partir d’un fichier SVG (créé par exemple avec Adobe Illustrator ou Inkscape).

Faites un click droit sur drawable, new, Vector Asset

Capture d’écran 2016-07-21 à 16.35.43

Puis choisissez votre SVG

Capture d’écran 2016-07-21 à 16.36.27

Cela créé votre vector Drawable

<vector xmlns:android="http://schemas.android.com/apk/res/android" android:height="24dp" android:width="24dp" android:viewportHeight="448.546" android:viewportWidth="448.546">
    <path android:fillColor="#FF000000" android:pathData="M440....."/>
    <path android:fillColor="#FF000000" android:pathData="M161....."/>
</vector>

Pour l’utiliser dans votre projet, et de façon rétro-compatible (inférieur à lollipop), utilisez l’attribut app:srcCompat sur une ImageView

<ImageView
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	app:srcCompat="@drawable/unicorn"/>

Pensez à ajouter useSupportLibrary dans votre configuration gradle

defaultConfig {
        minSdkVersion ...
        targetSdkVersion ...

        vectorDrawables.useSupportLibrary = true
}

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *