web-dev-qa-db-fra.com

Dégradé circulaire dans android

J'essaie de créer un dégradé qui émet depuis le milieu de l'écran en blanc et devient 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>

En utilisant la forme "ovale", j'ai au moins eu une forme ronde, mais il n'y avait pas d'effet de dégradé. Comment puis-je atteindre cet objectif?'

androidgradient
93
pgsandstrom

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="250"
        Android:startColor="#E9E9E9" Android:endColor="#D4D4D4" />
</shape>
217
Daniel Lew

Je trouve toujours les images utiles lors de l’apprentissage d’un nouveau concept. C’est donc une réponse complémentaire.

enter image description here

Le %p signifie 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 changeant le gradientRadius dans 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>

Ce qui peut être défini sur l'attribut background d'une vue comme ceci

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

Centre

Vous pouvez changer 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 x et y respectivement.

enter image description here

Documentation

Voici quelques notes tirées 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 fractionnelle par rapport à la dimension minimale de la forme.

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

Peut être une valeur de dimension, qui est un nombre à virgule flottante ajouté à 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 fractionnelle, qui est un nombre à virgule flottante ajouté avec% ou% p, tel que "14,5%". Le suffixe% signifie toujours un pourcentage de la taille de base; le suffixe facultatif% p fournit une taille relative à un conteneur parent.

77
Suragch

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)
2
Gasper Kolenc
<gradient
    Android:centerColor="#c1c1c1"
    Android:endColor="#4f4f4f"
    Android:gradientRadius="400"
    Android:startColor="#c1c1c1"
    Android:type="radial" >
</gradient>
1
Nazmul

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>
1
Shihab Uddin

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.

1
dhesse
<!-- 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>
0
CHirag RAmi