Pour l'instant (SDK API LEVEL 15) il n'est pas possible de mettre un gradient comme contour d'une forme géométrique dans un drawable.
Le contour se définit par l'élément
<stroke> dans le drawable et n'accepte comme paramètre de couleur
android:color qui est soit une ressource "color" soit une couleur littérale.
Je vais détailler comment faire ce contour en dégradé uniquement avec les drawables XML, donc sans utiliser de bitmap (png).
Stroke par l'exemple
Prenons le drawable XML (res/drawable/
radiogroup2.xml) suivant :
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<solid android:color="#000" />
<stroke
android:width="3dip"
android:color="#0af" />
<corners android:radius="5dip" />
</shape>
que j'applique à un widget de l'interface :
<RadioGroup
android:id="@+id/rgModeGPS"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:background="@drawable/radiogroup2" >
(...)
</RadioGroup>
Qui donne ceci :
Gradient par l'exemple
On peut s'approcher de notre objectif en utilisant un gradient (res/drawable/
radiogroup3.xml) :
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<solid android:color="#000" />
<gradient
android:angle="270"
android:endColor="#0048ff"
android:startColor="#00fffc" />
<corners android:radius="5dip" />
</shape>
que j'applique à un widget de l'interface :
<RadioGroup
android:id="@+id/rgModeGPS"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:background="@drawable/radiogroup3" >
(...)
</RadioGroup>
Qui donne ceci :
Solution
La solution passe par l'utilisation simultanée du
dégradé et d'un
rectangle noir. Pour cela il faut utiliser plusieurs couches (
layer)
Le drawable XML (res/drawable/radiogroup3.xml) doit comprendre un
item avec le
gradient et un item avec
solid noir :
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<!-- Définition du gradient -->
<item
android:bottom="0dip"
android:left="0dip"
android:right="0dip"
android:top="0dip">
<shape>
<solid android:color="#112233" />
<gradient
android:angle="270"
android:endColor="#0048ff"
android:startColor="#00fffc" />
<corners android:radius="5dip" />
</shape>
</item>
<!-- Définition du fond noir -->
<item
android:bottom="5dip"
android:left="5dip"
android:right="5dip"
android:top="5dip">
<shape>
<!-- Le padding aère le contenu -->
<padding
android:bottom="10dip"
android:left="10dip"
android:right="10dip"
android:top="10dip" />
<solid android:color="#000" />
<corners android:radius="5dip" />
</shape>
</item>
</layer-list>
Tadaaaaaaaaaaaaaa!
