GradientColor peut-il être utilisé pour définir un dégradé pour un remplissage ou un trait entièrement en XML ?

Question

J'ai consulté la documentation relative à GradientColor https://developer.Android.com/reference/Android/R.styleable.html#GradientColor . Comment définir un dégradé de couleurs en XML et l'appliquer à un objet vectoriel XML ?

J'ai essayé dans color.xml, styles.xml et dans un dessin vectoriel XML.

J'obtiens l'erreur " Failed to convert @id/gradclor into a ColorStateList " avec :

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

    <path
        android:name="play_triangle"
        android:pathData="M 30 30 L 30 90 L 80 60 z"
        android:strokeColor="@id/gradclor"
        android:strokeWidth="5"/>

    <color
        android:name="@+id/gradclor"
        android:startColor="#FFFFFF"
        android:endColor="#00FFFF"
        android:angle="145"/>

</vector>

ou "Failed to convert #FFFFFF #00FFFFFF 145 into a ColorStateList" lors de l'utilisation de :

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

    <path
        android:name="play_triangle"
        android:pathData="M 30 30 L 30 90 L 80 60 z"
        android:strokeColor="@color/GradientStrokeBorder"
        android:strokeWidth="5"/>

</vector>

avec ce qui suit dans color.xml :

<color name="GradientStrokeBorder">
    <item name="android:startColor">#FFFFFF</item>
    <item name="android:endColor">#00FFFF</item>
    <item name="android:angle">145</item>
</color>

Answer 1

J'ai finalement réussi à le faire fonctionner. La fonction de couleur dégradée n'est pas encore supportée dans Android Studio (la version actuelle est la 2.2) donc il ne vous aide pas avec l'autocomplétion mais marque la balise gradient comme une erreur à la place. Néanmoins, la fonctionnalité fonctionne, je l'ai testé avec succès sur Nexus 5X / API 24. Bien sûr, vous devez utiliser un appareil API 24+ car sinon cette fonctionnalité n'est pas supportée par le système d'exploitation.

Tout d'abord, vous devez ajouter un fichier de ressources de couleur comme suit :

<?xml version="1.0" encoding="utf-8"?>
<gradient xmlns:android="http://schemas.android.com/apk/res/android"
    android:startColor="#FFFFFF"
    android:centerColor="#0000FF"
    android:endColor="#00FFFF"
    android:angle="145"
    android:startX="30"
    android:endX="70"
    android:startY="30"
    android:endY="70"
    android:type="linear"/>

Veuillez prêter attention aux paramètres de début et de fin, car j'ai constaté qu'ils sont essentiels pour les dégradés vectoriels.

Placez ce fichier dans le dossier res/color sous un nom quelconque. Je l'ai appelé gradient.xml, le chemin complet est donc res/color/gradient.xml. Ensuite, vous pouvez faire référence à cette ressource dans les attributs de couleur, y compris les couleurs des chemins vectoriels :

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

    <path
        android:name="play_triangle"
        android:pathData="M 30 30 L 30 90 L 80 60 z"
        android:strokeWidth="10"
        android:strokeColor="@color/gradient"/>

</vector>

Remarquez la référence à la ressource de couleur de gradient dans strokeColor. J'espère que cela vous aidera !

Answer 2

La dernière version d'Android (3.1 Canary 6) contient un exemple utilisant une ressource vectorielle avec un dégradé.

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:aapt="http://schemas.android.com/aapt"
    android:width="108dp"
    android:height="108dp"
    android:viewportHeight="108"
    android:viewportWidth="108">
    <path
        android:fillType="evenOdd"
        android:pathData="M32,64C32,64 38.39,52.99 44.13,50.95C51.37,48.37 70.14,49.57 70.14,49.57L108.26,87.69L108,109.01L75.97,107.97L32,64Z"
        android:strokeColor="#00000000"
        android:strokeWidth="1">
        <aapt:attr name="android:fillColor">
            <gradient
                android:endX="78.5885"
                android:endY="90.9159"
                android:startX="48.7653"
                android:startY="61.0927"
                android:type="linear">
                <item
                    android:color="#44000000"
                    android:offset="0.0" />
                <item
                    android:color="#00000000"
                    android:offset="1.0" />
            </gradient>
        </aapt:attr>
    </path>
    <path
        android:fillColor="#FFFFFF"
        android:fillType="nonZero"
        android:pathData="M66.94,46.02L66.94,46.02C72.44,50.07 76,56.61 76,64L32,64C32,56.61 35.56,50.11 40.98,46.06L36.18,41.19C35.45,40.45 35.45,39.3 36.18,38.56C36.91,37.81 38.05,37.81 38.78,38.56L44.25,44.05C47.18,42.57 50.48,41.71 54,41.71C57.48,41.71 60.78,42.57 63.68,44.05L69.11,38.56C69.84,37.81 70.98,37.81 71.71,38.56C72.44,39.3 72.44,40.45 71.71,41.19L66.94,46.02ZM62.94,56.92C64.08,56.92 65,56.01 65,54.88C65,53.76 64.08,52.85 62.94,52.85C61.8,52.85 60.88,53.76 60.88,54.88C60.88,56.01 61.8,56.92 62.94,56.92ZM45.06,56.92C46.2,56.92 47.13,56.01 47.13,54.88C47.13,53.76 46.2,52.85 45.06,52.85C43.92,52.85 43,53.76 43,54.88C43,56.01 43.92,56.92 45.06,56.92Z"
        android:strokeColor="#00000000"
        android:strokeWidth="1" />
</vector>

Answer 3

Je n'en suis pas sûr, mais d'après le présent document :

Android:strokeColor Spécifie la couleur utilisée pour dessiner le contour du chemin. Peut être une couleur ou, pour SDK 24+ une liste d'états de couleur ou une couleur de dégradé (voir GradientColor et GradientColorItem). Si cette propriété est animée, toute valeur définie par l'animation remplacera la valeur d'origine. Aucun contour de chemin n'est dessiné si cette propriété n'est pas spécifiée.

si votre sdk est <24, il ne devrait y avoir qu'une seule couleur.

d'autre part, si votre sdk est supérieur à 24, je pense qu'il serait préférable d'utiliser <gradient/> pour remplir votre chemin au lieu de <color/>