How can I recreate this background in xml?

Question

I've been trying to recreate a background image in xml (as drawable). Since the background is a simple shape, it would be better if it is created as xml drawable.

The

is a really large gradient circle that squares off at the left, top and right border.

---

What I've tried

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape
           android:shape="rectangle">
            <size
               android:height="20dp" />
            <gradient
               android:type="linear"
               android:startColor="@color/gradientLeft"
               android:centerColor="@color/gradientMiddle"
               android:endColor="@color/gradientRight"
               android:angle="0" />
        </shape>
    </item>
    <item>
        <shape
           android:shape="oval">
            <padding
               android:top="20dp" />
            <gradient
               android:type="linear"
               android:startColor="@color/gradientLeft"
               android:centerColor="@color/gradientMiddle"
               android:endColor="@color/gradientRight"
               android:angle="0" />
        </shape>
    </item>
</layer-list>

I've tried to create a layer-list. This layer list contains 2 shapes, a rectangle and an oval.

The rectangle has a gradient and a height of 20dp (to test).

The oval also has the same gradient, and has a top padding of 20dp.

---

This however, doesn't create a circular shape, but fills the whole shape with the gradient. Can someone help me?

Answer 1

Try this

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle" />
    </item>
    <item
        android:bottom="300dp"
        android:left="-100dp"
        android:right="-100dp"
        android:top="-80dp">
        <shape android:shape="oval">
            <size android:height="20dp" />
            <gradient
                android:angle="0"
                android:centerColor="@color/colorAccent"
                android:endColor="@color/red"
                android:startColor="@color/colorPrimary"
                android:type="linear" />
        </shape>
    </item>
</layer-list>

OUTPUT

Answer 2

Try this

    <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item>
          <shape android:shape="rectangle" >
        <solid android:color="#ffffff"/>
    </shape>
 </item> <item
        android:bottom="400dp"
        android:left="-200dp"
        android:right="-200dp"
        android:top="-100dp">
        <shape android:shape="oval">
            <size android:height="20dp" />
            <gradient
                android:type="linear"
                android:startColor="#FD4F33"
                android:centerColor="#EE3A53"
                android:endColor="#DF2772"
                android:angle="0" />
        </shape> </item> </layer-list>

The background will be like this