Shape Drawable

Il s'agit de dessiner des formes statiques. Ces formes étant déclarées dans un fichier XML, ce qui évitera de taper le code correspondant.

Comme il s'agit d'un drawable, le fichier xml sera stocké sous res/drawable de votre projet.

La structure du fichier XML est alors la suivante:

<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape=["rectangle", "oval", "line" ou "ring"] > <corners android:radius="integer" android:topLeftRadius="integer" android:topRightRadius="integer" android:bottomLeftRadius="integer" android:bottomRightRadius="integer" /> <gradient android:angle="integer" android:centerX="integer" android:centerY="integer" android:centerColor="integer" android:endColor="color" android:gradientRadius="integer" android:startColor="color" android:type=["linear" ou "radial "sweep"] android:useLevel=["true", "false"] /> <padding android:left="integer" android:top="integer" android:right="integer" android:bottom="integer" /> <size android:width="integer" android:height="integer" /> <solid android:color="color" /> <stroke android:width="integer" android:color="color" android:dashWidth="integer" android:dashGap="integer" /> </shape>

http://developer.android.com/guide/topics/resources/drawable-resource.html#Shape

Il existe encore d'autres attributs, mais sont spécifiques au shape ring (anneau).

Comme pour d'autres fichiers XML, le nom du fichier (sans l'extention .xml) servira d'identifiant de la ressource drawable.

Pour utiliser ce drawable dans un widget, il suffit d'indiquer l'attribut background de ce widget avec:

androidSystème d'exploitation basé sur le noyau Linux conçu initialement pour les smartphones et tablettes et qui peut être trouvé sur d'autres appareils (Android TV, Android Auto, ...):background="@drawable/nom_du_shape"

Vous pouvez aussi le préciser par code:

Resources res = getResources();
Drawable shape = res. getDrawable(R.drawable.nom_du_shape);

Il reste ensuite à connaître l'instance du widget pour lequel vous voulez définir son arrière plan:

Ici, il s'agit d'un TextView...

TextView tv = (TextView)findViewByID(R.id.textview);
tv.setBackground(shape);

Shapes disponibles

Les shapes disponibles sont:

Les couleurs du shape

• Vous pouvez définir une couleur unie sur le shape:

dans la balise <solid>, il suffit d'ajouter l'attribut

androidSystème d'exploitation basé sur le noyau Linux conçu initialement pour les smartphones et tablettes et qui peut être trouvé sur d'autres appareils (Android TV, Android Auto, ...):color="la_couleur"

Où la_couleur peut être une couleur "en dur", provenant de la classe Color ou mieux, du fichier de ressources des couleurs.

• Il sera aussi possible de définir une couleur graduelle (possiblité de faire évoluer la couleur vers une autre):

La balise forme <gradient> sera utilisée, les attributs seront:

android:gradientRadius sera nécessaire si androidSystème d'exploitation basé sur le noyau Linux conçu initialement pour les smartphones et tablettes et qui peut être trouvé sur d'autres appareils (Android TV, Android Auto, ...):type poditionné à "radial". Le type de l'attribut est Float. Cependant, la valeur à stocker n'est pas très claire pour moi. A priori, l'unité par défaut est le px. Il faut donc indiquer de préférence une valeur entière par exemple 500.

android:useLevel si positionné à true, permet d'indiquer que le shape est utilisé dans une liste de drawables utilisés suivant une valeur (un niveau). Cf. LevelListDrawable.

Exemple d'utilisation de la balise <gradient>

Définition d'une couleur centrale à blanc, d'une couleur de départ à rouge et finale en rose (suivant la couleur de fond, car alpha à 44 donc couleurs translucides):

<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <gradient android:centerColor="#FF00FF" android:startColor="#FFFF0000" android:endColor="#44FF00FF" android:type="radial" android:centerX="20%p" android:centerY="20%p" android:gradientRadius="500"/> </shape>

Cette forme étant enregistrée sous drawabletst.xml dans le répertoire res/drawable du projet.

Il ne reste plus qu'à définir l'objet qui utilisera votre shape. Par exemple un RelativaLayout:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context="fr.free.supertos.MainActivity$PlaceholderFragment" android:background="@drawable/drawabletst" > <TextView android:id="@+id/textView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/hello_world" /> </RelativeLayout>

Ce qui donnera à l'écran:

Pour un linear

<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <gradient android:centerColor="#FF0000FF" android:startColor="#FFFF0000" android:endColor="#44FF00FF" android:type="linear"/> </shape>

Ce qui donne:

Et enfin un blayage

<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <gradient android:centerColor="#FF0000FF" android:startColor="#FFFF0000" android:endColor="#44FF00FF" android:type="sweep"/> </shape>

Pour obtenir:

Taille du shape

La forme que vous dessinez peut avoir une taille en largeur/hauteur, d'où la balise <size> et ses attributs. Ces valeurs seront utilisées pour l'agrandissement/diminution du shape proportionnellement à ces dimensions pour l'affichage dans la View.

Il est précisé chez google que pour restreindre la mise à l'échelle dans un ImageView, il faut utiliser androidSystème d'exploitation basé sur le noyau Linux conçu initialement pour les smartphones et tablettes et qui peut être trouvé sur d'autres appareils (Android TV, Android Auto, ...):scaleType en le positionnant à "center".

Pour positionner ces dimensions, indiquez une valeur ou utilisez une ressource dimension.

Padding

La balise <padding> qui est définie sur le shape affectera en réalité le contenu du View. Indiquez une valeur ou utilisez une ressource dimension.

Attributs spécifiques aux shapes de type rectangle

Un rectangle peut avoir ces angles arrondies. La balise <corner> va permettre de préciser le type d'arrondie avec ses attributs:

Soit globalement (androidSystème d'exploitation basé sur le noyau Linux conçu initialement pour les smartphones et tablettes et qui peut être trouvé sur d'autres appareils (Android TV, Android Auto, ...):radius),

Soit de façon unitaire, en haut à gauche/droit ou en bas à gauche/droite. Bref les attributs restant...

Indiquez une valeur ou utilisez une ressource dimension.

Attributs spécifiques aux shapes de type ring

Il n'y a pas de balises pour les attributs spécifiques du ring (bizarre):

androidSystème d'exploitation basé sur le noyau Linux conçu initialement pour les smartphones et tablettes et qui peut être trouvé sur d'autres appareils (Android TV, Android Auto, ...):innerRadius: dimension du trou de l'anneau. Indiquez une valeur ou utilisez une ressource dimension.

androidSystème d'exploitation basé sur le noyau Linux conçu initialement pour les smartphones et tablettes et qui peut être trouvé sur d'autres appareils (Android TV, Android Auto, ...):innerRadiusRatio: dimension du trou de l'anneau sous forme de ratio par rapport à la largeur de l'anneau. Indiquez une valeur (par exemple ="5". Dans ce cas, la taille du trou sera la largeur de l'anneau / 5).

androidSystème d'exploitation basé sur le noyau Linux conçu initialement pour les smartphones et tablettes et qui peut être trouvé sur d'autres appareils (Android TV, Android Auto, ...):thickness: l'épaisseur de l'anneau. Indiquez une valeur ou utilisez une ressource dimension.

androidSystème d'exploitation basé sur le noyau Linux conçu initialement pour les smartphones et tablettes et qui peut être trouvé sur d'autres appareils (Android TV, Android Auto, ...):thicknessRatio: similaire à innerRadiusRatio, mais pour l'épaisseur !

androidSystème d'exploitation basé sur le noyau Linux conçu initialement pour les smartphones et tablettes et qui peut être trouvé sur d'autres appareils (Android TV, Android Auto, ...):useLevel à true si utilisé avec un LevelListDrawable.