Gradien melingkar di android


109

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

Jawaban:


241

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>

108
Tidak hanya berhasil, itu juga mengatasi kelaparan dunia! Terima kasih!
pgsandstrom

2
Catatan samping: Dimungkinkan juga untuk menggunakan byte transparansi dalam warna. # ff00ff00 hingga # 7f0000ff akan memudar dari merah yang sepenuhnya buram menjadi biru semi transparan.
Simon Forsberg

10
android: gradientRadius = "250" akan diabaikan. Anda harus mengarahkan ke sumber daya dimen dengan nilai px atau dp, seperti: android: gradientRadius = "@ dimen / gradient_radius"
Bolling

2
Terima kasih Bolling, Anda benar bahwa android: gradientRadius = "250" tidak berfungsi sama sekali, saya rasa itu berperilaku berbeda pada versi Android yang lebih lama.
Justin

113

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

masukkan deskripsi gambar di sini

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.

masukkan deskripsi gambar di sini

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.


dalam tipe kikat radial akan bekerja ketika Anda menghapus% p dari radius gradien Untuk Kikat android: gradientRadius = "10"
mehmoodnisar125

1
@ mehmoodnisar125, saya menambahkan catatan dari dokumentasi yang menjelaskan perbedaan antara menyertakan %atau tidak.
Suragch

4

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)

1

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.


13
Jawaban ini harus ditandai sebagai solusinya. Tidak peduli Anda ingin membuat gradien radial, lakukan yang horizontal!
erdomester

1

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


1

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>

Contoh yang baik. Terima kasih.
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>
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.