Android custom shape

Question

I know it is possible to make a shape looking something like this:

But I don\'

Answer 1

Refer this doc for details and you need to use Layer List.

Here is the code as per your image:

custom_layer_list.xml

<layer-list
    xmlns:android="http://schemas.android.com/apk/res/android" >
    <item
        android:drawable="@drawable/topCircular" />

    <item
        android:drawable="@drawable/rect"
        android:top="20dp" />
</layer-list>

topCircular.xml

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >

<solid
    android:color="#000000" />
<corners
    android:topLeftRadius="25dp"
    android:topRightRadius= "25dp" />

</shape>

rect.xml

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >

<solid
    android:color="#000000" />

</shape>

Answer 2

You can define it in xml in a shapes file, but it may be a lot easier to make a simple 9 patch graphic, then you can easily customise how and where the curved and straight segments will be stretched.

See http://developer.android.com/tools/help/draw9patch.html for more info

EDIT

For more info on shapes see here: http://developer.android.com/guide/topics/resources/drawable-resource.html#Shape

Answer 3

Oh look at that, I was wrong - gradients are not a problem:

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.LinearGradient;
import android.graphics.Paint;
import android.graphics.Rect;
import android.graphics.RectF;
import android.graphics.Shader;
import android.view.View;

public class ButtonShadow extends View {

    public ButtonShadow(Context context)
    {
        super(context);
    }

    @Override
    public void onDraw(Canvas canvas)
    {
        RectF space = new RectF(this.getLeft(), this.getTop(), this.getRight(), this.getBottom());

        Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);

        paint.setShader(new LinearGradient(0, getWidth(), 0, 0, Color.BLACK, Color.WHITE, Shader.TileMode.MIRROR));

        canvas.drawArc(space, 180, 360, true, paint);

        Rect rect = new Rect(this.getLeft(),this.getTop() + (this.getHeight() / 2),this.getRight(),this.getBottom());
        canvas.drawRect(rect, paint);
    }
}

For more on gradient fills look here: How to fill a Path in Android with a linear gradient?

Answer 4

You can do it only with shape:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#000000" />
    <padding android:left="7dp"
        android:top="7dp"
        android:right="7dp"
        android:bottom="7dp" />
    <corners  
        android:topLeftRadius="90dip"
        android:topRightRadius="90dip"
        android:bottomLeftRadius="0dip"
        android:bottomRightRadius="0dip" />
</shape>