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

61,780

Solution 1

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

Solution 2

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

Solution 3

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

enter image description here

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>

Solution 4

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>

enter image description here

Solution 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"/>
Share:
61,780
Tapan Kumar Patro
Author by

Tapan Kumar Patro

Updated on August 01, 2022

Comments

  • Tapan Kumar Patro
    Tapan Kumar Patro almost 2 years

    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..multi color at different angle

    multi color at different angle

    Can we make like this background in android ??