Flip this android pathdata upside down

Issue

I found a similar xml file on stack overflow but i don't have much knowledge in android path data.

<vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="8dp"
    android:viewportWidth="24.0"
    android:viewportHeight="24.0">

    <path
        android:fillColor="#FFff0000"
        android:pathData="M24 24v-24h-24v24a20 36 0 0 1 24 0z"/>

</vector>

This is what i found, but in this the curve is on bottom. but I need that curve on top. like the image bellow.

And the white part on the image bellow must be transparent. Any solution's?

Solution

You can wrap the path into a group and set the rotation & pivotX,Y attributes:

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="8dp"
    android:viewportWidth="24.0"
    android:viewportHeight="24.0">
    <group
        android:pivotX="12"
        android:pivotY="12"
        android:rotation="180">
        <path
            android:fillColor="#FFff0000"
            android:pathData="M24 24v-24h-24v24a20 36 0 0 1 24 0z" />
    </group>
</vector>

Answered By - Zain