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

Escheat

Hi can you get picture of your expected shape – Cusco

hi @Cusco this pic of the shape i expected. i.sstatic.net/UMvDq.png – Escheat

Answer 1

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.

Pectoralis

yeeyy, its works for me. awesome. thx u very much. you save my day. :) @avi – Escheat

@avi This works, but I need to set the width of this shape to match parent. How do I do that? – Wan

Do you want to remove padding from left right or something else is required? – Pectoralis

just replace this line in above code with *android:pathData="M 0,0 L 0,11 C 1,12 5,12 8,12 C 12,12 12,11 12,11 L 12,0 0,0" * to achieve this. – Pectoralis

How can I add a gradient color here, instead of solid color? – Jaan

I haven't check but might be this:- https://mcmap.net/q/418991/-can-gradientcolor-be-used-to-define-a-gradient-for-a-fill-or-stroke-entirely-in-xml can help you – Pectoralis

Answer 2

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.

Antung

Answer 3

Change your corners to this:

    <corners
    android:radius="200dp"
    android:topLeftRadius="0dp"
    android:topRightRadius="0dp"
    />

It will be perfectly rounded, maybe not the level you want.

Leet

just tried android:radius="200dp". but still didn't perfect that i expected, like i.sstatic.net/UMvDq.png. thx for the idea btw. :) – Escheat