Gradient circulaire sous Android

J'essaie de créer un dégradé qui émet du milieu de l'écran en blanc et vire au noir en se déplaçant vers les bords de l'écran.

En créant un dégradé "normal" comme celui-ci, j'ai expérimenté différentes formes:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient android:startColor="#E9E9E9" android:endColor="#D4D4D4"
        android:angle="270"/>
</shape>

Lors de l'utilisation de la forme "ovale", j'ai au moins obtenu une forme ronde, mais il n'y avait aucun effet de dégradé. Comment puis-je atteindre cet objectif?'

Vous pouvez obtenir un dégradé circulaire en utilisant android:type="radial":

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient android:type="radial" android:gradientRadius="250dp"
        android:startColor="#E9E9E9" android:endColor="#D4D4D4" />
</shape>

Je trouve toujours les images utiles lors de l'apprentissage d'un nouveau concept, c'est donc une réponse supplémentaire.

Le %psignifie un pourcentage du parent, c'est-à-dire un pourcentage de la dimension la plus étroite de la vue sur laquelle nous définissons notre dessin. Les images ci-dessus ont été générées en modifiant le gradientRadiusdans ce code

my_gradient_drawable

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:type="radial"
        android:gradientRadius="10%p"
        android:startColor="#f6ee19"
        android:endColor="#115ede" />
</shape>

Qui peut être défini sur l' backgroundattribut d' une vue comme celui-ci

<View
    android:layout_width="200dp"
    android:layout_height="100dp"
    android:background="@drawable/my_gradient_drawable"/>

Centre

Vous pouvez modifier le centre du rayon avec

android:centerX="0.2"
android:centerY="0.7"

où les décimales sont des fractions de la largeur et de la hauteur pour xet yrespectivement.

Documentation

Voici quelques notes de la documentation expliquant un peu plus les choses.

android:gradientRadius

Rayon du dégradé, utilisé uniquement avec le dégradé radial. Peut être une dimension explicite ou une valeur fractionnaire par rapport à la dimension minimale de la forme.

Peut être une valeur à virgule flottante, telle que "1,2".

Il peut s'agir d'une valeur de dimension, qui est un nombre à virgule flottante ajouté avec une unité telle que "14,5sp". Les unités disponibles sont: px (pixels), dp (pixels indépendants de la densité), sp (pixels mis à l'échelle en fonction de la taille de police préférée), in (pouces) et mm (millimètres).

Peut être une valeur fractionnaire, qui est un nombre à virgule flottante ajouté avec% ou% p, comme "14,5%". Le suffixe% signifie toujours un pourcentage de la taille de base; le suffixe optionnel% p fournit une taille relative à un conteneur parent.

Vous pouvez également le faire dans le code si vous avez besoin de plus de contrôle, par exemple plusieurs couleurs et positionnement. Voici mon extrait de code Kotlin pour créer un dégradé radial pouvant être dessiné:

object ShaderUtils {
    private class RadialShaderFactory(private val colors: IntArray, val positionX: Float,
                                      val positionY: Float, val size: Float): ShapeDrawable.ShaderFactory() {

        override fun resize(width: Int, height: Int): Shader {
            return RadialGradient(
                    width * positionX,
                    height * positionY,
                    minOf(width, height) * size,
                    colors,
                    null,
                    Shader.TileMode.CLAMP)
        }
    }

    fun radialGradientBackground(vararg colors: Int, positionX: Float = 0.5f, positionY: Float = 0.5f,
                                 size: Float = 1.0f): PaintDrawable {
        val radialGradientBackground = PaintDrawable()
        radialGradientBackground.shape = RectShape()
        radialGradientBackground.shaderFactory = RadialShaderFactory(colors, positionX, positionY, size)
        return radialGradientBackground
    }
}

Utilisation de base (mais n'hésitez pas à ajuster avec des paramètres supplémentaires):

view.background = ShaderUtils.radialGradientBackground(Color.TRANSPARENT, BLACK)

Je suppose que vous devriez ajouter android: centerColor

<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
  android:startColor="#FFFFFF"
  android:centerColor="#000000"
  android:endColor="#FFFFFF"
  android:angle="0" />
</shape>

Cet exemple affiche un dégradé horizontal du blanc au noir au blanc.

<gradient
    android:centerColor="#c1c1c1"
    android:endColor="#4f4f4f"
    android:gradientRadius="400"
    android:startColor="#c1c1c1"
    android:type="radial" >
</gradient>

Voici le xml complet avec dégradé, stoke et forme circulaire.

<?xml version="1.0" encoding="utf-8"?>

<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval" >

    <!-- You can use gradient with below attributes-->
    <gradient
        android:angle="90"
        android:centerColor="#555994"
        android:endColor="#b5b6d2"
        android:startColor="#555994"
        android:type="linear" />

    <!-- You can omit below tag if you don't need stroke -->
   <stroke android:color="#3b91d7" android:width="5dp"/>

    <!-- Set the same value for both width and height to get a circular shape -->
    <size android:width="200dp" android:height="200dp"/>


    <!--if you need only a single color filled shape-->
    <solid android:color="#e42828"/>


</shape>

<!-- Drop Shadow Stack -->
<item>
    <shape android:shape="oval">
        <padding
            android:bottom="1dp"
            android:left="1dp"
            android:right="1dp"
            android:top="1dp" />

        <solid android:color="#00CCCCCC" />

        <corners android:radius="3dp" />
    </shape>
</item>
<item>
    <shape android:shape="oval">
        <padding
            android:bottom="1dp"
            android:left="1dp"
            android:right="1dp"
            android:top="1dp" />

        <solid android:color="#10CCCCCC" />

        <corners android:radius="3dp" />
    </shape>
</item>
<item>
    <shape android:shape="oval">
        <padding
            android:bottom="1dp"
            android:left="1dp"
            android:right="1dp"
            android:top="1dp" />

        <solid android:color="#20CCCCCC" />

        <corners android:radius="3dp" />
    </shape>
</item>
<item>
    <shape android:shape="oval">
        <padding
            android:bottom="1dp"
            android:left="1dp"
            android:right="1dp"
            android:top="1dp" />

        <solid android:color="#30CCCCCC" />

        <corners android:radius="3dp" />
    </shape>
</item>
<item>
    <shape android:shape="oval">
        <padding
            android:bottom="1dp"
            android:left="1dp"
            android:right="1dp"
            android:top="1dp" />

        <solid android:color="#50CCCCCC" />

        <corners android:radius="3dp" />
    </shape>
</item>

<!-- Background -->
<item>
    <shape android:shape="oval">
        <gradient
            android:startColor="@color/colorAccent_1"
            android:centerColor="@color/colorAccent_2"
            android:endColor="@color/colorAccent_3"
            android:angle="45"
            />
        <corners android:radius="3dp" />
    </shape>
</item>

<color name="colorAccent_1">#6f64d6</color>
<color name="colorAccent_2">#7668F8</color>
<color name="colorAccent_3">#6F63FF</color>