How to create half circle filled shape using xml drawable in android?

Question

I want to create a half filled circle shape using xml drawble?

Like this

Here is my efforts that i have tried so far

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#FCD83500"/>
    <size
        android:width="10dp"
        android:height="5dp"/>
    <corners
        android:bottomLeftRadius="50dp"
        android:bottomRightRadius="50dp"/>
</shape>

Using above code i can create half circle but i don't know how to make half circle transparent

I have also visited some SO post but unable to find any solution

If need more information please do let me know. Thanks in advance. Your efforts will be appreciated.

Is it necessary to use xml drawable? Otherwise, you can use vector graphics as well. — Balvinder Singh, Mar 07 '19 at 06:35
@BalvinderSingh feel free to post solution using `vector graphics` — Goku, Mar 07 '19 at 06:42

Goku · Answer 1 · 2019-03-07T07:15:18.477

UPDATE

Use this

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="90"
    android:pivotX="50%"
    android:pivotY="50%"
    android:toDegrees="90">
    <vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="314.015"
        android:viewportHeight="314.015">
        <path
            android:fillColor="#FCD83500"
            android:pathData="M157.007,0C70.291,0 0,70.289 0,157.007c0,86.712 70.29,157.007 157.007,157.007c86.709,0 157.007,-70.295 157.007,-157.007C314.014,70.289 243.716,0 157.007,0zM31.403,157.015c0,-69.373 56.228,-125.613 125.604,-125.613V282.62C87.631,282.62 31.403,226.38 31.403,157.015z" />
    </vector>
</rotate>

OUTPUT

Finally i got solution using layer-list to Achieve this

A LayerDrawable is a drawable object that manages an array of other drawables. Each drawable in the list is drawn in the order of the list—the last drawable in the list is drawn on top.

MY CODE

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:left="26px"
        android:right="26px">

        <shape xmlns:android="http://schemas.android.com/apk/res/android"
            android:shape="oval"
            android:useLevel="false">
            <solid android:color="#00006AC5" />
            <size
                android:width="50dp"
                android:height="50dp" />
            <stroke
                android:width="2dp"
                android:color="#00BCD4" />
        </shape>

    </item>

    <item
        android:width="50dp"
        android:height="25dp"
        android:end="2dp"
        android:gravity="center"
        android:start="2dp"
        android:top="22dp">

        <shape xmlns:android="http://schemas.android.com/apk/res/android"
            android:shape="rectangle">
            <solid android:color="#00BCD4" />
            <size
                android:width="10dp"
                android:height="5dp" />
            <corners
                android:bottomLeftRadius="50dp"
                android:bottomRightRadius="50dp" />
        </shape>

    </item>

</layer-list>

OUTPUT

Note : feel free to post answer if you have any other solution's

Warning : `Attribute end is only used in API level 23 and higher (current min is 16)` — Pratik Butani, Mar 07 '19 at 06:58
I think you will get error : `Element vector is not allowed here` — Pratik Butani, Mar 07 '19 at 07:22

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

I have created code from Vector Graphics :

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="314.015"
    android:viewportHeight="314.015">
    <path
        android:fillColor="#FCD83500"
        android:pathData="M157.007,0C70.291,0 0,70.289 0,157.007c0,86.712 70.29,157.007 157.007,157.007c86.709,0 157.007,-70.295 157.007,-157.007C314.014,70.289 243.716,0 157.007,0zM31.403,157.015c0,-69.373 56.228,-125.613 125.604,-125.613V282.62C87.631,282.62 31.403,226.38 31.403,157.015z" />
</vector>

Output will be:

Now if you want to display in as per your angle:

You can use as below:

android:rotation="90"

in your ImageView

Update for `TextView` Drawable:

Create custom method for rotate drawable.

private Drawable rotate(Drawable drawable, int degree) {
    Bitmap iconBitmap = ((BitmapDrawable) drawable).getBitmap();

    Matrix matrix = new Matrix();
    matrix.postRotate(degree);
    Bitmap targetBitmap = Bitmap.createBitmap(iconBitmap, 0, 0, iconBitmap.getWidth(), iconBitmap.getHeight(), matrix, true);

    return new BitmapDrawable(getResources(), targetBitmap);
}

Use as below:

Drawable result = rotate(ContextCompat.getDrawable(mContext, R.drawable.ic_round), 90);
yourTextView.setCompoundDrawablesWithIntrinsicBounds(result, null, null, null);

Note: If you will find SVG image as you want then you do now have to do above code. I have tried to find image but didn't found so Rotation code is necessary here.

Hope it will help you.

Thank you.

This is nice idea but i want use this inside a `TextView` as `android:drawableEnd` so i can't use `android:rotation="90"` — Goku, Mar 07 '19 at 06:58
hey thanks for your time i have found how to rotate `vector` check my below answer +1 for your help — Goku, Mar 07 '19 at 07:17
Here I have posted [question](https://stackoverflow.com/questions/55038379/android-rotate-vector-image-to-90-degree) and got [answer](https://stackoverflow.com/a/55038948/1318946). — Pratik Butani, Mar 07 '19 at 12:34
thank you i have already checked your question, mean while you can update your answer, thanks for the help i will accept your answer — Goku, Mar 09 '19 at 06:25

score 0 · Answer 3 · answered Mar 07 '19 at 06:49

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">
            <stroke
                android:color="#FCD83500"
                android:width="1dp"/>
            <size
                android:width="20dp"
                android:height="20dp"/>
            <corners
                android:radius="50dp"/>
        </shape>
    </item>
    <item android:top="10dp">
        <shape android:shape="rectangle">
            <solid android:color="#FCD83500"/>
            <size
                android:width="20dp"
                android:height="10dp"/>
            <corners
                android:bottomLeftRadius="50dp"
                android:bottomRightRadius="50dp"/>
        </shape>
    </item>
</layer-list>

Thanks, but your code is not working please check the [output using your code](https://i.stack.imgur.com/d0f2c.png) — Goku, Mar 07 '19 at 06:52

score 0 · Answer 4 · answered Mar 07 '19 at 16:53

Use this code to make half circle vector image. if you want to rotate the vector image means use group tag with rotation element . Refer this link

<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"

android:viewportWidth="314.015"
android:viewportHeight="314.015">
<group
    android:translateX="314.015"
    android:rotation="90">
<path
    android:fillColor="#FCD83500"
    android:pathData="M157.007,0C70.291,0 0,70.289 0,157.007c0,86.712 70.29,157.007 157.007,157.007c86.709,0 157.007,-70.295 157.007,-157.007C314.014,70.289 243.716,0 157.007,0zM31.403,157.015c0,-69.373 56.228,-125.613 125.604,-125.613V282.62C87.631,282.62 31.403,226.38 31.403,157.015z" />

</group>
</vector>

How to create half circle filled shape using xml drawable in android?

4 Answers4

Update for TextView Drawable:

Update for `TextView` Drawable: