android中的圆形梯度

我试着做一个渐变，从屏幕中间发射白色，当它向屏幕边缘移动时变成黑色

当我做一个像这样的“正常”渐变时，我一直在尝试不同的形状：

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

---

当使用“椭圆形”形状时，我至少得到了一个圆形，但没有梯度效果。我怎样才能做到这一点？“

我想你应该添加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>

---

此示例显示从白色到黑色到白色的水平渐变

您可以使用android:type=“radial”获得圆形渐变：

---

我总是觉得图像在学习新概念时很有用，所以这是一个补充答案

%p

表示父视图的百分比，即我们设置可绘制视图的最窄维度的百分比。上述图像是通过更改此代码中的

梯度中心

生成的

我的(梯度)(可绘制)

居中 可以使用更改半径的中心

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

其中，小数分别是

x

和

y

的宽度和高度的分数

文档 这里有一些注释，从解释事情多一点

android:gradientRadius

渐变半径，仅与径向渐变一起使用。可能是 显式尺寸标注或相对于形状尺寸的分数值 最小尺寸

可以是浮点值，例如“1.2”

可以是维度值，它是附加的浮点数 使用诸如“14.5sp”之类的单位。可用单位为：像素（px），dp （与密度无关的像素），sp（基于首选像素的缩放像素） 字体大小），英寸和毫米

可以是小数，它是附加的浮点数 使用%或%p，例如“14.5%”。%后缀始终表示a 基本尺寸的百分比；可选的%p后缀提供了一个大小 相对于某个父容器

---

如果需要更多的控制，例如多种颜色和定位，也可以在代码中完成。下面是创建可绘制径向渐变的Kotlin片段：

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

基本用法（但可随意使用其他参数进行调整）：

---

下面是带有渐变、斯托克和圆形的完整xml

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

#6f64d6
#7668F8
#6F63FF

它不仅有效，还解决了世界饥饿问题！谢谢旁注：也可以在颜色中使用透明度字节#ff00ff00到#7f0000ff将从完全不透明的红色渐变为半透明的蓝色。android:gradientRadius=“250”将被忽略。你应该指向一个具有px或dp值的dimen资源，比如：android:gradientRadius=“@dimen/gradient_radius”谢谢Bolling，你是对的，android:gradientRadius=“250”根本不起作用，我猜它在旧的android版本上表现不同。这个答案应该被标记为解决方案。无论你想做一个径向梯度，做一个水平梯度！在kikat类型中，当您从kikat android:gradientRadius=“10”的渐变半径中删除%p时，radial将起作用。在API 21中，您确实需要

android:gradientRadius=“10%p”

（使用

p

），否则将出现异常。您还可以设置

android:centerX=“20%”

@CoolMind，您介意编辑答案并更新它以反映这些更改吗？我现在正在用Flutter做更多的工作，所以我没有更新我的Android答案。@Suragch，谢谢你提供详细的答案！我只想说你干得不错。不是每个作者都能添加所有这些属性并描述它们的含义。很好的例子。谢谢

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

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

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

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

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

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:padding="10dp"
    android:shape="rectangle">

    <gradient
        android:endColor="@color/color1"
        android:gradientRadius="250dp"
        android:startColor="#8F15DA"
        android:type="radial" />

    <corners
        android:bottomLeftRadius="50dp"
        android:bottomRightRadius="50dp"
        android:radius="3dp"
        android:topLeftRadius="0dp"
        android:topRightRadius="50dp" />
</shape>