Simple Trick to Make Multi-color Gradient Background using XML in Android

By default, XML in Android only supports gradient backgrounds with up to 3 colors. However, there is a workaround to create multi-gradient effects. This article will show you how to do it.

We’ll create the following background:

There are four colors in the gradient:

1. #34ECD5
2. #00BCD4
3. #D300D4
4. #EEC782

First, create 3 drawable resource files for the gradient background:

gradient_background1:

It contains a gradient background with the first and second colors.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:type="linear"
        android:angle="0"
        android:startColor="#34ECD5"
        android:endColor="#00BCD4" />
</shape>

gradient_background2:

It contains a gradient background with second and third colors.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:type="linear"
        android:angle="0"
        android:startColor="#00BCD4"
        android:endColor="#D300D4" />
</shape>

gradient_background3:

It contains a gradient background with third and fourth colors.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:type="linear"
        android:angle="0"
        android:startColor="#D300D4"
        android:endColor="#EEC782" />
</shape>

Next, in the activity layout file, create a LinearLayout and add three child Views. Set the same weight for all of them. Set the first gradient to the first child, the second one to the second child, and so on…

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <LinearLayout
        android:id="@+id/linear_layout_gradient_background"
        android:layout_width="0dp"
        android:layout_height="64dp"
        android:layout_margin="8dp"
        android:orientation="horizontal"
        android:weightSum="3"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <View
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@drawable/gradient_background1" />

        <View
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@drawable/gradient_background2" />

        <View
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@drawable/gradient_background3" />
    </LinearLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

The final output looks like this:

This is a simple trick to create a multi-color gradient background using XML in Android. I hope you have learned something new. If you have any doubts, leave a comment below.

Related Articles:

References:

• Android docs