Okrągły gradient w Androidzie

109

Próbuję stworzyć gradient, który emituje biały kolor ze środka ekranu i zmienia kolor na czarny, gdy przesuwa się w kierunku krawędzi ekranu.

Kiedy tworzę „normalny” gradient, taki jak ten, eksperymentowałem z różnymi kształtami:

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

Używając „owalnego” kształtu, uzyskałem przynajmniej okrągły kształt, ale nie było efektu gradientu. Jak mogę to osiągnąć?

pgsandstrom
źródło

Odpowiedzi:

241

Możesz uzyskać okrągły gradient za pomocą 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
źródło
108
Nie tylko zadziałało, ale także rozwiązało problem głodu na świecie! Dzięki!
pgsandstrom
2
Uwaga dodatkowa: możliwe jest również użycie bajtu przezroczystości w kolorze. # ff00ff00 do # 7f0000ff zbledną od całkowicie nieprzezroczystej czerwieni do półprzezroczystego niebieskiego.
Simon Forsberg,
10
android: gradientRadius = "250" zostanie zignorowany. Należy wskazać zasób dimen z wartością px lub dp, na przykład: android: gradientRadius = "@ dimen / gradient_radius"
Bolling
2
Dzięki Bolling, masz rację, że android: gradientRadius = "250" w ogóle nie działa, myślę, że zachowywał się inaczej na starszych wersjach Androida.
Justin
113

Zawsze uważam, że obrazy są pomocne podczas uczenia się nowej koncepcji, więc jest to odpowiedź uzupełniająca.

wprowadź opis obrazu tutaj

Te %pśrodki procent rodzica, czyli procent od najwęższego wymiaru cokolwiek zobaczyć możemy ustawić nasz rozciągliwej dalej. Powyższe obrazy zostały wygenerowane przez zmianę gradientRadiusw tym kodzie

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>

Które można ustawić w backgroundatrybucie widoku, takim jak ten

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

Środek

Możesz zmienić środek promienia za pomocą

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

gdzie ułamki dziesiętne to ułamki szerokości i wysokości odpowiednio dla xi y.

wprowadź opis obrazu tutaj

Dokumentacja

Oto kilka uwag z dokumentacji wyjaśniających nieco więcej.

android:gradientRadius

Promień gradientu, używany tylko z gradientem radialnym. Może być jawnym wymiarem lub wartością ułamkową w stosunku do minimalnego wymiaru kształtu.

Może być wartością zmiennoprzecinkową, na przykład „1,2”.

Może to być wartość wymiaru, która jest liczbą zmiennoprzecinkową z dołączoną jednostką, na przykład „14,5sp”. Dostępne jednostki to: px (piksele), dp (piksele niezależne od gęstości), sp (piksele skalowane w oparciu o preferowany rozmiar czcionki), w (cale) i mm (milimetry).

Może być wartością ułamkową, która jest liczbą zmiennoprzecinkową z dodaniem% lub% p, na przykład „14,5%”. Sufiks% zawsze oznacza procent rozmiaru podstawowego; opcjonalny sufiks% p podaje rozmiar w odniesieniu do pewnego kontenera nadrzędnego.

Suragch
źródło
w typie kikat radial będzie działał po usunięciu% p z promienia gradientu Dla Kikat android: gradientRadius = "10"
mehmoodnisar125
1
@ mehmoodnisar125, dodałem notatkę z dokumentacji wyjaśniającą różnicę między włączaniem %a nie.
Suragch
4

Możesz to również zrobić w kodzie, jeśli potrzebujesz większej kontroli, na przykład wielu kolorów i pozycjonowania. Oto mój fragment Kotlina do tworzenia rysowalnego gradientu radialnego:

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

Podstawowe użycie (ale możesz dostosować je za pomocą dodatkowych parametrów):

view.background = ShaderUtils.radialGradientBackground(Color.TRANSPARENT, BLACK)
Gasper Kolenc
źródło
1

Myślę, że powinieneś dodać 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>

W tym przykładzie jest wyświetlany gradient poziomy od białego do czarnego do białego.

dhesse
źródło
13
Tę odpowiedź należy oznaczyć jako rozwiązanie. Bez względu na to, czy chcesz uzyskać gradient radialny, zrób poziomy!
erdomester
1

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

Nazmul
źródło
1

Oto kompletny plik XML z gradientem, skokiem i okrągłym kształtem.

<?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
źródło
Dobry przykład. Dzięki.
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
źródło