Custome drawable Shape android

Question

Anyone know how to make this type of custom shape drawable view in android.

Answer 1

Create an XML file and place it in drawable folder.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:right="100dp">
        <shape android:shape="rectangle">
            <size
                android:width="100dp"
                android:height="100dp" />
            <solid android:color="#F40D20" />
        </shape>
    </item>

    <item android:left="100dp">
        <shape android:shape="rectangle">
            <size
                android:width="100dp"
                android:height="100dp" />
            <solid android:color="#FFFFFFFF" />
        </shape>
    </item>

    <item android:top="100dp">
        <shape android:shape="rectangle">
            <size
                android:width="100dp"
                android:height="100dp" />
            <solid android:color="#FFFFFFFF" />
            <corners android:topLeftRadius="30dp" />
        </shape>

    </item>

    <item android:bottom="100dp">
        <shape android:shape="rectangle">
            <size
                android:width="100dp"
                android:height="100dp" />
            <solid android:color="#F40D20" />
            <corners android:bottomRightRadius="30dp" />
        </shape>
    </item>
</layer-list>

Restult:

Change the Radius to looke exactly as you want.

Answer 2

It depends on how you want this view to scale, but how about this?

public class WeirdView extends View {

    private Paint red;
    private Paint white;

    public WeirdView(Context context) {
        super(context);
        initDrawingComponents();
    }

    private void initDrawingComponents() {
        red = new Paint(Paint.ANTI_ALIAS_FLAG);
        red.setColor(0xFFFF0000);
        white = new Paint(Paint.ANTI_ALIAS_FLAG);
        white.setColor(0xFFFFFFFF);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        float width = getWidth();
        float height = getHeight();
        float horizontalLinePos = height * 0.25f;
        float leftCircleRadius = height * 0.25f;
        float rightCircleRadius = width * 0.15f;
        float rightCircleBorderDist = width * 0.12f;

        canvas.drawRect(0, 0, leftCircleRadius, horizontalLinePos + leftCircleRadius, red);
        canvas.drawCircle(leftCircleRadius, horizontalLinePos + leftCircleRadius, leftCircleRadius, white);
        canvas.drawRect(0, 0, width - rightCircleBorderDist, horizontalLinePos, red);
        canvas.drawCircle(width - rightCircleBorderDist, horizontalLinePos - rightCircleRadius, rightCircleRadius, red);
    }
}

This looks pretty much like the image you posted here.