Gradiente circolare in Android

Sto cercando di creare un gradiente che emette dal centro dello schermo in bianco e diventa nero mentre si sposta verso i bordi dello schermo.

Mentre realizzo un gradiente "normale" come questo, ho sperimentato diverse forme:

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

Usando la forma "ovale" ho ottenuto almeno una forma rotonda, ma non c'era alcun effetto sfumato. Come posso raggiungere questo obiettivo?'

Puoi ottenere una sfumatura circolare usando 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>

Trovo sempre le immagini utili quando imparo un nuovo concetto, quindi questa è una risposta supplementare.

I %pmezzi una percentuale del genitore, che è, una percentuale della dimensione più stretta di ciò osserviamo abbiamo impostato il nostro drawable on. Le immagini sopra sono state generate modificando gradientRadiusin questo codice

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>

Che può essere impostato su un backgroundattributo di vista come questo

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

Centro

È possibile modificare il centro del raggio con

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

dove i decimali sono frazioni della larghezza e dell'altezza rispettivamente per xe y.

Documentazione

Ecco alcune note dalla documentazione che spiegano le cose un po 'di più.

android:gradientRadius

Raggio del gradiente, utilizzato solo con gradiente radiale. Può essere una dimensione esplicita o un valore frazionario relativo alla dimensione minima della forma.

Può essere un valore in virgola mobile, ad esempio "1.2".

Può essere un valore di dimensione, che è un numero in virgola mobile aggiunto a un'unità come "14,5 sp". Le unità disponibili sono: px (pixel), dp (pixel indipendenti dalla densità), sp (pixel ridimensionati in base alla dimensione del carattere preferita), in (pollici) e mm (millimetri).

Può essere un valore frazionario, che è un numero in virgola mobile aggiunto con% o% p, ad esempio "14,5%". Il suffisso% indica sempre una percentuale della dimensione di base; il suffisso% p facoltativo fornisce una dimensione relativa a un contenitore genitore.

Puoi anche farlo nel codice se hai bisogno di più controllo, ad esempio più colori e posizionamento. Ecco il mio frammento di Kotlin per creare un gradiente radiale disegnabile:

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

Utilizzo di base (ma sentiti libero di modificare con parametri aggiuntivi):

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

Immagino che dovresti aggiungere 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>

Questo esempio mostra un gradiente orizzontale dal bianco al nero al bianco.

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

Ecco l'XML completo con gradiente, tratto e forma circolare.

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