Dégradé circulaire dans android

Je suis en train de faire un dégradé qui émet à partir du milieu de l'écran en blanc, et devient noir comme il se déplace vers les bords de l'écran.

Que je fais une "normale" dégradé comme ceci, j'ai fait des expériences avec 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 "ovale"-la forme j'ai au moins appris une forme ronde, mais il n'y avait aucun effet de dégradé. Comment puis-je y parvenir?'

InformationsquelleAutor pgsandstrom | 2010-03-18

android gradient

228

Vous pouvez obtenir un dégradé circulaire à l'aide de 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>
```
- Elle a permis non seulement de travail, il a également résolu la famine dans le monde! Merci!
- Remarque: Il est également possible d'utiliser la transparence octets dans la couleur. #ff00ff00 à #7f0000ff va s'estomper à partir de entièrement opaque rouge semi-transparent bleu.
- android:gradientRadius="250" sera ignoré. Vous devriez point à une dimen de ressources avec un px ou de la valeur de dp, comme: android:gradientRadius="@dimen/gradient_radius"
- Grâce Bolling, vous avez raison, le android:gradientRadius="250" ne fonctionne pas du tout, je suppose qu'il s'est comporté différemment sur les anciennes versions d'Android.
InformationsquelleAutor Dan Lew
90

J'ai toujours trouver des images utiles lors de l'apprentissage d'un nouveau concept, c'est donc un complément de réponse.

La %p signifie un pourcentage de la mère, c'est un pourcentage de la plus petite dimension de ce que la vue nous avons mis notre drawable sur. Les images ci-dessus ont été générés par la modification de la 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>
```
Qui peut être réglé sur une vue background attribut comme ce
```
<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 une fraction de la largeur et de la hauteur de x et y respectivement.

Documentation

Voici quelques remarques à partir de la la documentation expliquer les choses un peu plus.

android:gradientRadius

Rayon de la pente, utilisés seulement avec un dégradé radial. Peut-être un
dimension explicite ou d'une fraction de la valeur par rapport à la forme
dimension minimale.

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

Peut être une valeur de dimension, qui est un nombre à virgule flottante ajouté
avec une unité telle que "14.5 sp". Les unités disponibles sont: px (pixels), dp
(indépendante de la densité de pixels), sp (mise à l'échelle des pixels en fonction préférée
taille de la police), en (pouces), et de mm (millimètres).

Peut être une valeur fractionnaire, qui est un nombre à virgule flottante ajouté
par % ou %p, tels que "de 14,5%". L' % suffixe signifie toujours un
pourcentage de la taille de base; l'option %p suffixe offre une taille
par rapport à certains conteneur parent.
- dans kikat type radial fonctionnera lorsque vous supprimez %p du gradient de rayon Pour android Kikat:gradientRadius="10"
- J'ai ajouté une note à partir de la documentation expliquant la différence entre, y compris la % ou pas.
InformationsquelleAutor Suragch

Vous pouvez aussi le faire dans le code si vous avez besoin de plus de contrôle, par exemple une multitude de couleurs et de positionnement. Voici mon Kotlin extrait de code pour créer un drawable dégradé radial:

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
    }
}

D'utilisation de base (mais n'hésitez pas à ajuster avec d'autres params):

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

InformationsquelleAutor Gasper Kolenc

1

Je pense 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.
- Cette réponse doit être marquée comme étant la solution. Peu importe que vous voulez faire un dégradé radial, ne horizontal!
InformationsquelleAutor dhesse

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

InformationsquelleAutor Nazmul

Voici le xml complet avec dégradé, stoke & de 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>

Bon exemple. Merci.

InformationsquelleAutor Shihab Uddin

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

InformationsquelleAutor CHirag RAmi

Vous devez vous connecter pour publier un commentaire.

Centre

Documentation