Kreisförmiger Gradient bei Android

109

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

pgsandstrom
quelle

Antworten:

241

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>
Dan Lew
quelle
108
Es hat nicht nur funktioniert, sondern auch den Hunger in der Welt gelöst! Vielen Dank!
Pgsandstrom
2
Randnotiz: Es ist auch möglich, das Transparenzbyte in der Farbe zu verwenden. # ff00ff00 bis # 7f0000ff werden von vollständig undurchsichtigem Rot zu halbtransparentem Blau ausgeblendet.
Simon Forsberg
10
android: gradientRadius = "250" wird ignoriert. Sie sollten auf eine Dimen-Ressource mit einem px- oder dp-Wert zeigen, wie: android: gradientRadius = "@ dimen / gradient_radius"
Bolling
2
Danke Bolling, Sie haben Recht, dass das Android: gradientRadius = "250" überhaupt nicht funktioniert. Ich denke, es hat sich bei älteren Android-Versionen anders verhalten.
Justin
112

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

Geben Sie hier die Bildbeschreibung ein

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.

Geben Sie hier die Bildbeschreibung ein

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.

Suragch
quelle
im kikat-Typ funktioniert radial, wenn Sie% p aus dem Gradientenradius entfernen. Für Kikat android: gradientRadius = "10"
mehmoodnisar125
1
@ mehmoodnisar125, ich habe einen Hinweis aus der Dokumentation hinzugefügt, der den Unterschied zwischen dem Einbeziehen des %oder des Nichteinschlusses erklärt .
Suragch
4

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

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.

dhesse
quelle
13
Diese Antwort sollte als Lösung markiert werden. Egal, ob Sie einen radialen Farbverlauf erstellen möchten, machen Sie einen horizontalen!
Erdomester
1

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

Nazmul
quelle
1

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>
Shihab Uddin
quelle
Gutes Beispiel. Vielen Dank.
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
quelle