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?

Behm

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

Experience

Is it possible to create animation in this ? For example for completing a task with animation it'll grow animation to color greenish ? I really want to make this background in one of my activity. – Haemorrhage

@Haemorrhage which type of animation you want – Experience

Something like waving or level increasing level which will smoothly change the color. For example the of user has no lives the color should be alerting with redish and if user got one live/chance then will change the color. – Haemorrhage

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

Trudey

nice copy paste please don't do this – Experience

@NileshRathod, I am really sorry man. I didn't check your answer. I didn't do it intentionally. – Trudey