Android - drawable with rounded corners at the top only

Question

I had this drawable to have a rounded rectangle as a background:

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/white" />
    <stroke android:width="1dp" android:color="@color/light_gray" />
    <padding android:left="10dp" android:top="10dp" android:right="10dp" android:bottom="10dp" />
    <corners android:radius="6dp" />
</shape>

This is working fine, as expected.

Now, I want to change this to only round the top corners, so I change it to this:

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/white" />
    <stroke android:width="1dp" android:color="@color/light_gray" />
    <padding android:left="10dp" android:top="10dp" android:right="10dp" android:bottom="10dp" />
    <corners android:topLeftRadius="6dp" android:topRightRadius="6dp"
             android:bottomLeftRadius="0dp" android:bottomRightRadius="0dp"/>
</shape>

But now none of the corners are rounded and I get a plain rectangle. What am I missing here?

This is really not a solution but I think I once had a similar problem. Increasing the stoke to 2 pixels helped, but you know, that's not a solution. — Code Poet, Jan 19 '12 at 18:00
Here's an issue with shape corners: http://code.google.com/p/android/issues/detail?id=939 — Knickedi, Jan 19 '12 at 18:21

score 374 · Accepted Answer · edited Sep 19 '18 at 07:00

374

Try giving these values:

 <corners android:topLeftRadius="6dp" android:topRightRadius="6dp"
         android:bottomLeftRadius="0.1dp" android:bottomRightRadius="0.1dp"/>

Note that I have changed 0dp to 0.1dp.

EDIT: See Aleks G comment below for a cleaner version

edited Sep 19 '18 at 07:00

Mahendran Sakkarai

8,381
6
44
66

answered Jan 19 '12 at 18:29

aqs

5,632
3
24
24

156

Exploring this further, I found an even better solution: `` - this produces perfectly square bottom corners without even a hint of rounding. However your solution pretty much works. – Aleks G Jan 20 '12 at 09:33
1

How to do it in code, given a bitmap? And how to add outline (AKA stroke) around it? – android developer Mar 31 '16 at 13:19
@Aleks G i don't see that it's necessary to specify `android:radius="1dp"` – hmac Aug 13 '19 at 14:27
@hmac it is necessary. Read the documentation, it makes it clear. – Aleks G Aug 13 '19 at 14:36
@AleksG Yeah the documentation is wrong, testing on Samsung 10, Android 9: "Every corner must (initially) be provided a corner radius greater than 1, or else no corners are rounded. If you want specific corners to not be rounded, a work-around is to use android:radius to set a default corner radius greater than 1, but then override" - not true, i specify bottom right, top right, top left as zero and bottom left +ve and bottom left is correctly curved – hmac Aug 14 '19 at 15:20
@hmac first note the date of the question. It was asked about Android 1.6 in January 2012. Second, without specifying radius, it worked on don't phones but not on many others. With it, it either on all devices I tested on. – Aleks G Aug 14 '19 at 15:22
@AleksG I'm sure you've noticed by now that your question is still relevant to this day. Would you consider editing the question and specifing which Android version it related to (I feel this would be much better than having readers infer this information from the date of posting)? Perhaps mentioning the device(s) it needed to work on could also be helpful to future readers. I would remove "Android" from the title as per modern SO standards for question tagging. – Dev-iL Dec 29 '19 at 07:52

score 15 · Answer 2 · answered Apr 06 '15 at 13:27

15

Try to do something like this:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:bottom="-20dp" android:left="-20dp">
        <shape android:shape="rectangle">
            <solid android:color="@color/white" />

            <corners android:radius="20dp" />
        </shape>
    </item>
</layer-list>

It seems does not suitable to set different corner radius of rectangle. So you can use this hack.

answered Apr 06 '15 at 13:27

busylee

2,540
1
16
35

See my own answer - it's perfectly acceptable to have different radius for different corners. – Aleks G Apr 06 '15 at 15:47
I tried this approach, it is not acceptable, ide tells that it does not appropriatr to have different rsdius and ignores it – busylee Apr 06 '15 at 15:49

score 15 · Answer 3 · answered Apr 05 '16 at 13:02

In my case below code

    <?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:top="10dp" android:bottom="-10dp"
        >

        <shape android:shape="rectangle">
            <solid android:color="@color/maincolor" />

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

    </item>
    </layer-list>

Top and bottom properties on the item are not needed unless you want a padding in the view, but otherwise this works. — RominaV, May 13 '16 at 16:08

Fortran · Answer 4 · 2021-06-30T09:11:36.187

13

bg.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#FFFFFF"/>
    <corners android:topLeftRadius="24dp" android:topRightRadius="24dp"
        android:bottomLeftRadius="0dp" android:bottomRightRadius="0dp"/>
</shape>

add in your layout:

android:background="@drawable/bg"

edited Jun 30 '21 at 09:11

answered Jun 11 '21 at 16:50

Fortran

2,218
2
27
33

If you read the question in full, you will notice that this doesn’t work and this is why the question was asked in the first place. – Aleks G Jun 11 '21 at 17:56

score 9 · Answer 5 · edited May 23 '17 at 12:26

Building upon busylee's answer, this is how you can make a drawable that only has one unrounded corner (top-left, in this example):

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@color/white" />
            <!-- A numeric value is specified in "radius" for demonstrative purposes only,
                  it should be @dimen/val_name -->
            <corners android:radius="10dp" />
        </shape>
    </item>
    <!-- To keep the TOP-LEFT corner UNROUNDED set both OPPOSITE offsets (bottom+right): -->
    <item
        android:bottom="10dp"
        android:right="10dp">
        <shape android:shape="rectangle">
            <solid android:color="@color/white" />
        </shape>
    </item>
</layer-list>

Please note that the above drawable is not shown correctly in the Android Studio preview (2.0.0p7). To preview it anyway, create another view and use this as android:background="@drawable/...".

@AleksG - Of course. It is relevant today as it was then (as evidence - I needed something like that). You must know that over the years some ways of doing things become deprecated and may need to be replaced with more modern ones. As **busylee** mentioned, the IDE complains when defining different corner radii, which is not the case with the present method. Moreover, since this question was my 1st hit on Google (iirc), it made sense for me to update it. Anyhow, I'm sure SO won't mind a few more KB of code... :) — Dev-iL, Jan 23 '16 at 20:55

score 9 · Answer 6 · edited Aug 20 '21 at 13:27

try to use MaterialShapeDrawable and configure it in kotlin/java code.

val backgroundShapeModel:ShapeAppearanceModel = ShapeAppearanceModel.builder()
    .setTopLeftCorner(CornerFamily.ROUNDED, 16F.toPx)
    .setTopRightCorner(CornerFamily.ROUNDED, 16F.toPx)
    .build()
textView.background = MaterialShapeDrawable(backgroundShapeModel).apply {
    fillColor = ColorStateList.valueOf(Color.GREEN)
}

enter image description here

P.S:

In addition to abilities that xml drawables provides (fillColor, stroke...), MaterialShapeDrawable supports:

cornerFamily in two category: rounded and cut
edgeTreatment with TriangleEdgeTreatment, OffsetEdgeTreatment, ...
doesn't need to context and getting resource

enter image description here ]

val backgroundShapeModel = ShapeAppearanceModel.builder()
    .setTopLeftCorner(CornerFamily.ROUNDED, 16F.toPx)
    .setTopRightCorner(CornerFamily.CUT, 16F.toPx)
    .setAllEdges(TriangleEdgeTreatment(5f.toPx, true))
    .build()
textView.background = MaterialShapeDrawable(backgroundShapeModel).apply {
    fillColor = ColorStateList.valueOf(Color.GREEN)
    setStroke(2f.toPx,Color.RED)
}

score 2 · Answer 7 · answered May 29 '16 at 01:48

You may need read this https://developer.android.com/guide/topics/resources/drawable-resource.html#Shape

and below there is a Note.

Note Every corner must (initially) be provided a corner radius greater than 1, or else no corners are rounded. If you want specific corners to not be rounded, a work-around is to use android:radius to set a default corner radius greater than 1, but then override each and every corner with the values you really want, providing zero ("0dp") where you don't want rounded corners.

score 2 · Answer 8 · answered Dec 14 '18 at 08:54

Create roung_top_corners.xml on drawable and copy the below code

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<corners
    android:topLeftRadius="22dp"
    android:topRightRadius="22dp"
    android:bottomLeftRadius="0dp"
    android:bottomRightRadius="0dp"
    />
<gradient
    android:angle="180"
    android:startColor="#1d2b32"
    android:centerColor="#465059"
    android:endColor="#687079"
    android:type="linear" />
<padding
    android:left="0dp"
    android:top="0dp"
    android:right="0dp"
    android:bottom="0dp"
    />
<size
    android:width="270dp"
    android:height="60dp"
    /></shape>

score 2 · Answer 9 · edited Dec 25 '18 at 13:43

2

I tried your code and got a top rounded corner button. I gave the colors as @ffffff and stroke I gave #C0C0C0.

try

Giving android : bottomLeftRadius="0.1dp" instead of 0. if its not working
Check in what drawable and the emulator's resolution. I created a drawable folder under res and using it. (hdpi, mdpi ldpi) the folder you have this XML. this is my output.

enter image description here

edited Dec 25 '18 at 13:43

Ajay2707

5,690
6
40
58

answered Jan 19 '12 at 18:29

AD14

1,218
19
32

What android version is this? My app must run on 1.6 - and the emulator 1.6 had the problem. – Aleks G Jan 19 '12 at 22:34

score 0 · Answer 10 · answered Mar 05 '21 at 01:01

0

Try removing these attributes altogether.

android:bottomLeftRadius="0dp" android:bottomRightRadius="0dp"

answered Mar 05 '21 at 01:01

Blye

619
4
20

Android - drawable with rounded corners at the top only

10 Answers10

P.S:

Linked

Related