Appliquer un gradient XML pour le contour d'un shape

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!