Gradient circulaire sous Android

109

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?'

pgsandstrom
la source

Réponses:

241

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>
Dan Lew
la source
108
Non seulement cela a fonctionné, mais cela a également résolu la famine mondiale! Merci!
pgsandstrom
2
Remarque: Il est également possible d'utiliser l'octet de transparence dans la couleur. # ff00ff00 à # 7f0000ff passera du rouge totalement opaque au bleu semi-transparent.
Simon Forsberg
10
android: gradientRadius = "250" sera ignoré. Vous devez pointer vers une ressource dimen avec une valeur px ou dp, comme: android: gradientRadius = "@ dimen / gradient_radius"
Bolling
2
Merci Bolling, vous avez raison de dire que l'android: gradientRadius = "250" ne fonctionne pas du tout, je suppose qu'il se comportait différemment sur les anciennes versions d'Android.
Justin
113

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

entrez la description de l'image ici

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.

entrez la description de l'image ici

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.

Suragch
la source
dans le type kikat radial fonctionnera lorsque vous supprimez% p du rayon de gradient Pour Kikat android: gradientRadius = "10"
mehmoodnisar125
1
@ mehmoodnisar125, j'ai ajouté une note de la documentation expliquant la différence entre inclure le %ou non.
Suragch
4

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)
Gasper Kolenc
la source
1

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.

dhesse
la source
13
Cette réponse doit être marquée comme la solution. Peu importe que vous souhaitiez créer un dégradé radial, faites-en un horizontal!
erdomester le
1

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

Nazmul
la source
1

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>
Shihab Uddin
la source
Bon exemple. Merci.
Sinan Ceylan
-1

<!-- 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>
CHirag RAmi
la source