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

hi @Sheychan this pic of the shape i expected. https://i.stack.imgur.com/UMvDq.png — andri_sasuke, May 31 '17 at 04:32

score 8 · Answer 1 · answered Apr 06 '19 at 12:03

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.

VikasGoyal · Accepted Answer · 2017-05-31T04:43:02.207

3

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.

edited May 31 '17 at 04:43

answered May 31 '17 at 04:37

VikasGoyal

3,308
1
22
42

yeeyy, its works for me. awesome. thx u very much. you save my day. :) @avi – andri_sasuke May 31 '17 at 04:42
@avi This works, but I need to set the width of this shape to match parent. How do I do that? – Mayur More Dec 01 '17 at 13:39
Do you want to remove padding from left right or something else is required? – VikasGoyal Dec 04 '17 at 04:59
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. – VikasGoyal Dec 04 '17 at 05:38
How can I add a gradient color here, instead of solid color? – user2189878 Dec 04 '18 at 03:46
I haven't check but might be this:- https://stackoverflow.com/a/40927551/1562659 can help you – VikasGoyal Dec 04 '18 at 04:53

score 1 · Answer 3 · answered May 31 '17 at 03:29

1

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.

answered May 31 '17 at 03:29

statosdotcom

3,109
2
17
40

just tried `android:radius="200dp"`. but still didn't perfect that i expected, like https://i.stack.imgur.com/UMvDq.png. thx for the idea btw. :) – andri_sasuke May 31 '17 at 04:35

How to create curved bottom border rectangle in android?

3 Answers3

Linked

Related