Gradien melingkar di android

Saya mencoba membuat gradien yang memancar dari tengah layar menjadi putih, dan berubah menjadi hitam saat bergerak ke arah tepi layar.

Saat saya membuat gradien "normal" seperti ini, saya telah bereksperimen dengan berbagai bentuk:

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

Saat menggunakan bentuk "oval", setidaknya saya mendapatkan bentuk bulat, tetapi tidak ada efek gradien. Bagaimana saya bisa mencapai ini? '

Anda bisa mendapatkan gradien melingkar menggunakan 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>

Saya selalu menemukan gambar berguna saat mempelajari konsep baru, jadi ini adalah jawaban tambahan.

The %pberarti persentase dari orangtua, yaitu, persentase dari dimensi sempit apapun melihat kita set ditarik kami pada. Gambar di atas dibuat dengan mengubah gradientRadiuskode ini

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>

Yang bisa disetel pada backgroundatribut tampilan seperti ini

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

Pusat

Anda dapat mengubah pusat radius dengan

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

dimana desimal adalah pecahan dari lebar dan tinggi untuk xdan ymasing - masing.

Dokumentasi

Berikut adalah beberapa catatan dari dokumentasi yang menjelaskan lebih banyak hal.

android:gradientRadius

Radius gradien, hanya digunakan dengan gradien radial. Bisa berupa dimensi eksplisit atau nilai pecahan yang relatif terhadap dimensi minimum bentuk.

Mungkin nilai floating point, seperti "1.2".

Bisa berupa nilai dimensi, yang merupakan bilangan floating point yang ditambahkan dengan unit seperti "14.5sp". Satuan yang tersedia adalah: px (piksel), dp (piksel tanpa kerapatan), sp (piksel yang diskalakan berdasarkan ukuran font yang disukai), in (inci), dan mm (milimeter).

Bisa berupa nilai pecahan, yang merupakan bilangan floating point yang ditambahkan dengan% atau% p, seperti "14.5%". Sufiks% selalu berarti persentase dari ukuran dasar; sufiks% p opsional menyediakan ukuran yang relatif terhadap beberapa wadah induk.

Anda juga dapat melakukannya dalam kode jika Anda membutuhkan lebih banyak kontrol, misalnya beberapa warna dan pemosisian. Berikut adalah cuplikan Kotlin saya untuk membuat gradien radial yang dapat digambar:

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

Penggunaan dasar (tapi jangan ragu untuk menyesuaikan dengan parameter tambahan):

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

Saya kira Anda harus menambahkan 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>

Contoh ini menampilkan gradien horizontal dari putih ke hitam ke putih.

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

Berikut adalah xml lengkap dengan bentuk gradien, stoke & melingkar.

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