Search code examples
androidandroid-xmlandroid-drawablexml-drawable

How to create curved bottom border rectangle in android?


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

enter image description here

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


Solution

  • 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>
    

    enter image description here

    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>
    

    enter image description here

    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.