我们能否在Android背景中使用XML制作多彩渐变？

Question

我一直尝试在XML中制作多彩背景，但只有三个选项可用：开始、中间和结束以及指定的角度。我们不能制作下面这样的背景吗？

在Android中，我们可以像这样制作背景吗？

- Tapan Kumar Patro

---

请参考以下网址：https://dev59.com/FmYr5IYBdhLWcg3wAFvE 和 https://dev59.com/xW855IYBdhLWcg3wYTH_。 - Ayush Bansal

你能告诉我怎么做吗？ - Tapan Kumar Patro

这只是两种颜色，我相信。这些渐变可以制作。 - CoderP

不，你只能在XML中使用最多3种颜色，如果需要更多，必须使用android.graphics.drawable.GradientDrawable。 - pskink

使用多层！ - Elias Fazel

Answer 1

根据developers.android的说法，你可以...这是他们使用的代码

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

<gradient
    android:angle="45"
    android:endColor="#87CEEB"
    android:centerColor="#768087"
    android:startColor="#000"
    android:type="linear" />

</shape>

还有这里有一个教程。

希望这可以帮助到你。

- Hamza

---

我需要多种颜色，不仅仅是三种...但无论如何，我已经完成了，感谢您的帮助。 - Tapan Kumar Patro

Tapan Kumar Patro，请分享您为实现此目标所做的事情。 - Farhan Farooqui

Answer 2

您无法在XML文件中实现+3渐变色。但是，您可以使用GradientDrawable类将其放入Java / Kotlin代码中。这是Java版本，在其中用您的颜色ID替换颜色数组。

GradientDrawable gradientDrawable = new GradientDrawable(
                Orientation.TOP_BOTTOM,
                new int[]{ContextCompat.getColor(this, R.color.color1),
                        ContextCompat.getColor(this, R.color.color2),
                        ContextCompat.getColor(this, R.color.color3),
                        ContextCompat.getColor(this, R.color.color4)});

        findViewById(R.id.background).setBackground(gradientDrawable);

- Pelanes

---

太晚了...在我的活动中，我有一些findelementbyid，当我将您的代码添加到我的代码末尾时，它会产生错误，并且那些findelementbyid变成了红色！ - C.F.G

Answer 3

通过使用矢量图形可以实现这一点。 我使用Adobe Illustrator创建了此背景渐变，然后将该矢量资产作为xml导入到Android Studio中，它可以完美地与矢量的可伸缩性配合使用。

这是用于此矢量/XML可绘制对象的代码。

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:aapt="http://schemas.android.com/aapt"
    android:width="987.3dp"
    android:height="870.3dp"
    android:viewportWidth="987.3"
    android:viewportHeight="870.3">
    <path android:pathData="M0,870l0,-870l987,0l0,870z">
        <aapt:attr name="android:fillColor">
            <gradient
                android:endX="493.5"
                android:endY="870"
                android:startX="493.5"
                android:startY="2.6645353E-14"
                android:type="linear">
                <item
                    android:color="#FF0000FF"
                    android:offset="0" />
                <item
                    android:color="#FF6AFCFF"
                    android:offset="0.1974" />
                <item
                    android:color="#FFE900D0"
                    android:offset="0.3786" />
                <item
                    android:color="#FFFF7D15"
                    android:offset="0.5906" />
                <item
                    android:color="#FFE6FF55"
                    android:offset="0.7513" />
                <item
                    android:color="#FFED1E79"
                    android:offset="1" />
            </gradient>
        </aapt:attr>
    </path>
</vector>

为了以水平方向显示渐变，使用以下xml代码：

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:aapt="http://schemas.android.com/aapt"
    android:width="96dp"
    android:height="96dp"
    android:viewportHeight="100"
    android:viewportWidth="100">
    <path android:pathData="M0,870l0,-870l987,0l0,870z">
        <aapt:attr name="android:fillColor">
            <gradient
                android:endX="99"
                android:endY="50"
                android:startX="1"
                android:startY="50"
                android:type="linear">
                <item
                    android:color="#FF0000FF"
                    android:offset="0" />
                <item
                    android:color="#FF6AFCFF"
                    android:offset="0.1974" />
                <item
                    android:color="#FFE900D0"
                    android:offset="0.3786" />
                <item
                    android:color="#FFFF7D15"
                    android:offset="0.5906" />
                <item
                    android:color="#FFE6FF55"
                    android:offset="0.7513" />
                <item
                    android:color="#FFED1E79"
                    android:offset="1" />
            </gradient>
        </aapt:attr>
    </path>
</vector>

了解更多有关VectorDrawable渐变的信息 - https://blog.stylingandroid.com/vectordrawable-gradients-part1/

- Harvinder Singh

---

你知道我需要在这里改变什么（如果可能的话），才能使背景水平吗？ - Tamir Abutbul

没有，你必须从头开始重新创建向量文件，这很容易。 - Harvinder Singh

很棒的答案，如果可以的话，我想给它更多的赞。我没有想到要使用向量来解决这个问题。 - Martin Price

同意，提供如何旋转水平方向的指导会很不错。 - JCutting8

Answer 4

在drawable中创建一个新的xml文件，然后复制以下代码：

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

<gradient android:startColor="#9A0C0C"
          android:centerColor="#CE9908"
          android:endColor="#3091FF"
          android:angle="270"/>
</shape>

- Maryam Azhdari

Answer 5

<?xml version="1.0" encoding="utf-8"?>

<gradient
    android:endColor="#243638"
    android:centerColor="#3c6869"
    android:startColor="#7d695c"
    android:type="radial"
    android:centerX="100%"
    android:centerY="100%"
    android:gradientRadius="900dp"/>

- user8485133

Answer 6

如果有人想知道如何使用新的UI工具包Jetpack Compose实现这种结果，那么很简单，只需使用Brush实用程序即可：

@Preview(
    device = Devices.PIXEL_4
)
@Composable
public fun GradientComposable() {
    val topRightCornerColor = Color(0xFF365d6a)
    val second = Color(0xFF126e87)
    val third = Color(0xFF769397)
    val fourth = Color(0xFF555361)
    val bottomLeftCornerColor = Color(0xFF4f4858)
    val angleBrush = Brush.linearGradient(
        colors = listOf(
            topRightCornerColor,
            second,
            third,
            fourth,
            bottomLeftCornerColor
        ), start = Offset(
            x = Float.POSITIVE_INFINITY,
            y = 0f
        ), end = Offset(
            x = 0f,
            y = Float.POSITIVE_INFINITY
        )
    )
    Box(
        modifier = Modifier
            .background(brush = angleBrush)
            .fillMaxSize()
    )
}

这将创建一个线性渐变，从右上角到左下角（偏移量设置角度和方向，向上或向下）。

提供在第一个和最后一个颜色之间的间隔内更多的颜色，您将更接近正确的渐变。在这里，我只使用了5种颜色。

得到的背景如下：

- Hrafn

Answer 7

在drawable文件夹下创建新的xml文件，并按照代码进行操作。

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <shape>
        
        <gradient
            android:startColor="#1fa2ff"
            android:centerColor="#12d8fa"
            android:endColor="#a6ffcb"
            android:angle="45"/>
    </shape>
</item>

- Sandipan

Answer 8

你可以使用径向渐变的图层列表来实现，然后为不同的项目设置不同的透明度。

- Pete

Answer 9

在 Kotlin 中，您可以使用此扩展函数，代码由 @Pelanes 提供。

fun ImageView.setGradientDrawable(colorArray: IntArray) {
val gradientDrawable = GradientDrawable(
    GradientDrawable.Orientation.TOP_BOTTOM, colorArray
)
this.background = gradientDrawable}

- Ahmet B.