Gradiant Custom Shape in Android XML

Question

I am looking for some tutorial or some reference which can help me to create some custom shapes like below-mentioned shape. Background Shape

I have tried creating a shape using the standard shape in android xml, but I am not able to find an appropriate solution for it.

It would be a good help if someone can explain how can I achieve this.

Answer 1

Try using this layer-list in drawable folder

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <shape android:shape="rectangle"  android:tint="#0000ff">
        <padding android:bottom="5dp" android:left="5dp" android:right="5dp" android:top="5dp"></padding>
    </shape>
</item>

<item>
    <bitmap
        android:gravity="right"
        android:src="Your_blur_backgound_image" />
    // you can use any other image here
</item>

Answer 2

You should use a <layer-list> , 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">
            <solid android:color="#ffffff"/>
            <size android:height="30dp" android:width="40dp"/>
        </shape>
    </item>

    <item>
        <shape
            android:shape="oval">
            <gradient
                android:type="radial"
                android:gradientRadius="15dp"
                android:endColor="#ffffff"
                android:startColor="#0000ff" />
        </shape>
    </item>

    <item>
        <inset
            android:insetLeft="5dp"
            android:insetRight="15dp"
            android:insetTop="5dp"
            android:insetBottom="5dp">
            <shape android:shape="rectangle">
                <solid android:color="#ff0000"/>
            </shape>
        </inset>
    </item>
</layer-list>

Result:

Answer 3

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:angle="0"      
        android:centerX="0.1"
        android:centerY="0.1" 
        android:centerColor="#1976d2"
        android:startColor="#00e5ff"
        android:endColor="#6200ea"
        android:gradientRadius="100"
        android:type="linear"/>
    <padding android:left="5dp"
        android:top="4dp"
        android:right="4dp"
        android:bottom="4dp" />
    <corners android:radius="6dp" /> 
</shape>