How to create curved bottom border rectangle in android?

Question

how to create android drawable with perfect curved bottom using xml like this :

i have tried this xml, but the result didn't perfect

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#5f9c63"/>

    <padding android:left="1dp"
        android:top="1dp"
        android:right="1dp"
        android:bottom="1dp" />

    <corners android:bottomRightRadius="100dp"
        android:bottomLeftRadius="100dp"
        android:topLeftRadius="0dp"
        android:topRightRadius="0dp"/>
</shape>

Any idea ?

Thanks

Answer 1

You can use the oval shape as the below.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
            android:bottom="0dp"
            android:left="-160dp"
            android:right="-160dp"
            android:top="-80dp">
        <shape android:shape="oval">
            <solid android:color="@color/colorPrimary"/>
        </shape>
    </item>
</layer-list>

You can change the left,right,top values to make more or less curve.

Answer 2

I think you are looking for something like this:-

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="48dp"
        android:height="48dp"
        android:viewportHeight="12"
        android:viewportWidth="12">

    <path
        android:fillColor="@android:color/holo_red_light"
        android:pathData="M 2,9 C 2,9 4,10 6,10 C 8,10 10,9 10,9 L 10,0 2,0 2,8"
        android:strokeWidth="0.1"/>

</vector>

Use the latest Android vector drawable which give you more power in drawing and better result. You can manage the drawing pixel by pixel.

Let me attach multiple options so you can get clear picture what small changes can do in vector drawable

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

    <path
        android:fillColor="@android:color/holo_red_light"
        android:pathData="M 2,9 C 2,9.5 4,10 6,10 C 8,10 10,9.5 10,9 L 10,0 2,0 2,8"
        android:strokeWidth="0.1"/>

</vector>

In this second image, you can see curve is more rounded by changing the little value. If you really want to learn about vector drawable please refer here, It will provide you great experience to work with vector drawable.