Gradiente circolare in Android


109

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

Risposte:


241

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>

108
Non solo ha funzionato, ma ha anche risolto la fame nel mondo! Grazie!
pgsandstrom

2
Nota a margine: è anche possibile utilizzare il byte di trasparenza nel colore. Da # ff00ff00 a # 7f0000ff passeranno dal rosso completamente opaco al blu semitrasparente.
Simon Forsberg

10
android: gradienteRadius = "250" verrà ignorato. Dovresti puntare a una risorsa dimen con un valore px o dp, come: android: gradienteRadius = "@ dimen / gradiente_radius"
Bolling

2
Grazie Bolling, hai ragione sul fatto che android: gradienteRadius = "250" non funziona affatto, immagino che si sia comportato in modo diverso sulle vecchie versioni di Android.
Justin

113

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

inserisci qui la descrizione dell'immagine

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.

inserisci qui la descrizione dell'immagine

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.


in kikat il tipo radiale funzionerà quando rimuovi% p dal raggio del gradiente Per Kikat android: gradienteRadius = "10"
mehmoodnisar125

1
@ mehmoodnisar125, ho aggiunto una nota dalla documentazione che spiega la differenza tra l'inclusione %o meno.
Suragch

4

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)

1

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.


13
Questa risposta dovrebbe essere contrassegnata come la soluzione. Non importa se vuoi creare un gradiente radiale, creane uno orizzontale!
erdomester

1

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


1

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>

Buon esempio. Grazie.
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>
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.