Android - drawable with rounded corners at the top only
AndroidDrawableRounded CornersAndroid Problem Overview
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?
Android Solutions
Solution 1 - Android
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
Solution 2 - Android
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.
Solution 3 - Android
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>
Solution 4 - Android
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/..."
.
Solution 5 - Android
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"
Solution 6 - Android
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)
}
P.S:
In addition to abilities that xml
drawables provides (fillColor, stroke...), MaterialShapeDrawable
supports:
cornerFamily
in two category:rounded
andcut
edgeTreatment
withTriangleEdgeTreatment
,OffsetEdgeTreatment
, ...- doesn't need to context and getting resource
]
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)
}
Solution 7 - Android
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.
Solution 8 - Android
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.
Solution 9 - Android
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>
Solution 10 - Android
Try removing these attributes altogether.
android:bottomLeftRadius="0dp" android:bottomRightRadius="0dp"