can we make multi color gradient in xml for android background?

Question

I have been trying to make a multi-color background in XML but there only 3 option available start, center, end and specified angles. Can't we make backgrounds like this below..

Can we make like this background in android ??

see http://stackoverflow.com/questions/14020530/using-a-gradientdrawable-with-more-than-three-colors-set and http://stackoverflow.com/questions/4381033/multi-gradient-shapes — Ayush Bansal, Mar 01 '17 at 10:29
These are only two colors i believe. These gradients can be made. — CoderP, Mar 01 '17 at 10:29
no, in xml you can only use max 3 colors, if you need more, you have to use `android.graphics.drawable.GradientDrawable` — pskink, Mar 01 '17 at 10:40

score 50 · Answer 1 · answered Mar 04 '17 at 11:32

50

According to developers.android you can... and this is the code they used

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

also here's a tutorial

hope this helps

answered Mar 04 '17 at 11:32

Hamza

674
4
13

2

I need multiple colors not only 3 .. but anyway i have i have done it thanks for help. – Tapan Kumar Patro Mar 04 '17 at 12:10
29

Tapan Kumar Patro please share what you've done to achieve it – Farhan Farooqui Aug 31 '17 at 07:10

Pelanes · Answer 2 · 2017-12-10T16:46:13.203

You cannot implement +3 gradient color in a xml file. But you can do it into your java/kotlin code with GradientDrawable class. This is the Java version, replace the array of colors with your colors ids.

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);

Too late ... In my activity I have some `findelementbyid` and when I add your code to end of my code it produces error and those `findelementbyid` become red! — C.F.G, Dec 15 '22 at 20:17

score 32 · Answer 3 · edited Aug 15 '22 at 09:14

This can be achieved by using vector graphics i have made this background gradient in adobe illustrator and then import that vector asset as xml in to android studio and it works perfectly with the scalability of vectors

and here is the code for this vector/xml drawable

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

To show the gradient in a horizontal orientation, use the following xml code :

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

Read more about VectorDrawable gradients here - https://blog.stylingandroid.com/vectordrawable-gradients-part1/

Do you know what I need to change here (if possible) to make this background horizontally? — Tamir Abutbul, Sep 24 '19 at 12:34
no you have to recreate the vector file from scratch it's as easy as pie — Harvinder Singh, Sep 25 '19 at 09:02
Wonderful answer, i'd like to upvote it more if i could. Didn't occur to me to user vectors for this. — Martin Price, Feb 10 '20 at 13:47
Agreed, would be good to provide guidance on how to rotate horizontal. — JCutting8, Sep 08 '21 at 06:26

score 8 · Answer 4 · answered Dec 16 '18 at 10:09

Create a new xml file in drawable and copy this code:

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

score 2 · Answer 5 · answered Dec 31 '20 at 04:14

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

score 1 · Answer 6 · answered Jan 02 '21 at 01:36

Create New xml file under drawable folder and follow the code

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

In main.xml set your background to the new xml file created in drawable

Hrafn · Answer 7 · 2021-12-31T16:05:17.130

In case anyone has this question in regards to how to achieve this kind of results with the new UI toolkit Jetpack Compose then it is fairly simple by way of using the Brush utility:

@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()
    )
}

This creates a linear gradient from the top right most corner down to the left most corner (the offset sets the angle and direction, up or down).

The more colors are supplied at intervals between the first and last colours, the closer to the correct gradient you will get. Here I only use 5 colors.

The resulting background being as follows:

score 0 · Answer 8 · answered Nov 17 '17 at 15:23

0

You can do it with layer-list of radial gradients, then you set different opacity for different items

answered Nov 17 '17 at 15:23

Pete

19

score 0 · Answer 9 · answered Jul 08 '21 at 16:48

In Kotlin you can just use this extension function, code is taken by @Pelanes

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

can we make multi color gradient in xml for android background?

9 Answers9