190

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?

2

10 Answers 10

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

7
  • 156
    Exploring this further, I found an even better solution: <corners android:radius="1dp" android:topLeftRadius="6dp" android:topRightRadius="6dp" android:bottomLeftRadius="0dp" android:bottomRightRadius="0dp"/> - this produces perfectly square bottom corners without even a hint of rounding. However your solution pretty much works.
    – Aleks G
    Jan 20, 2012 at 9:33
  • 1
    How to do it in code, given a bitmap? And how to add outline (AKA stroke) around it? Mar 31, 2016 at 13:19
  • @Aleks G i don't see that it's necessary to specify android:radius="1dp"
    – hmac
    Aug 13, 2019 at 14:27
  • @hmac it is necessary. Read the documentation, it makes it clear.
    – Aleks G
    Aug 13, 2019 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, 2019 at 15:20
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.

2
  • See my own answer - it's perfectly acceptable to have different radius for different corners.
    – Aleks G
    Apr 6, 2015 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 6, 2015 at 15:49
15

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>
1
  • 1
    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, 2016 at 16:08
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"
1
  • 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, 2021 at 17:56
9

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/...".

1
  • 6
    @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, 2016 at 20:55
9

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:

  1. cornerFamily in two category: rounded and cut
  2. edgeTreatment with TriangleEdgeTreatment, OffsetEdgeTreatment, ...
  3. 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)
}
2

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.

2

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

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

try

  1. Giving android : bottomLeftRadius="0.1dp" instead of 0. if its not working
  2. 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

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

Try removing these attributes altogether.

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

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.