Kreisförmiger Gradient bei Android

Ich versuche, einen Farbverlauf zu erstellen, der von der Mitte des Bildschirms in Weiß ausgeht und sich in Richtung der Bildschirmränder in Schwarz verwandelt.

Während ich einen "normalen" Farbverlauf wie diesen mache, habe ich mit verschiedenen Formen experimentiert:

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

Bei Verwendung der "ovalen" Form habe ich zumindest eine runde Form erhalten, aber es gab keinen Verlaufseffekt. Wie kann ich das erreichen? '

Sie können einen kreisförmigen Verlauf erhalten, indem Sie 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>

Ich finde Bilder immer hilfreich, wenn ich ein neues Konzept lerne, daher ist dies eine ergänzende Antwort.

Die %pMittel ein Prozentsatz der Eltern, das heißt, ein Prozentsatz der schmalste Dimension was sehen wir unsere ziehbar setzen auf. Die obigen Bilder wurden durch Ändern des gradientRadiusin diesem Code erzeugten erzeugt

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>

Welches kann auf das backgroundAttribut einer Ansicht wie folgt eingestellt werden

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

Center

Sie können den Mittelpunkt des Radius mit ändern

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

wobei die Dezimalstellen Bruchteile der Breite und Höhe für xbzw. ysind.

Dokumentation

Hier sind einige Anmerkungen aus der Dokumentation , die die Dinge etwas näher erläutern.

android:gradientRadius

Radius des Gradienten, wird nur mit radialem Gradienten verwendet. Kann eine explizite Bemaßung oder ein Bruchwert relativ zur Mindestbemaßung der Form sein.

Kann ein Gleitkommawert sein, z. B. "1.2".

Kann ein Dimensionswert sein, bei dem es sich um eine Gleitkommazahl handelt, an die eine Einheit wie "14.5sp" angehängt ist. Verfügbare Einheiten sind: px (Pixel), dp (dichteunabhängige Pixel), sp (skalierte Pixel basierend auf der bevorzugten Schriftgröße), in (Zoll) und mm (Millimeter).

Kann ein Bruchwert sein, bei dem es sich um eine Gleitkommazahl handelt, an die entweder% oder% p angehängt ist, z. B. "14,5%". Das Suffix% bedeutet immer einen Prozentsatz der Basisgröße. Das optionale Suffix% p gibt eine Größe relativ zu einem übergeordneten Container an.

Sie können dies auch im Code tun, wenn Sie mehr Kontrolle benötigen, z. B. mehrere Farben und Positionierungen. Hier ist mein Kotlin-Snippet, um einen zeichnbaren radialen Farbverlauf zu erstellen:

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

Grundlegende Verwendung (aber Sie können sie gerne mit zusätzlichen Parametern anpassen):

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

Ich denke du solltest android hinzufügen: 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>

In diesem Beispiel wird ein horizontaler Farbverlauf von Weiß über Schwarz nach Weiß angezeigt.

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

Hier ist die komplette XML mit Farbverlauf, Stoke & Kreisform.

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