Home » Android » android – Creating a rectangle shape with only two rounded edges

android – Creating a rectangle shape with only two rounded edges

Posted by: admin April 23, 2020 Leave a comment

Questions:

I can create a shape that is a rectangle with all edges rounded. However, what I’m wanting is a rectangle shape with only 2 of the edges rounded. Is this possible?

I’m essentially hacking together a ListView that looks like a bubble with rounded edges. I’m looking to add a header that has the two top edges rounded and a footer with the two bottom edges rounded.

How to&Answers:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" android:padding="10dp">
<solid android:color="#FFFFFF"/>
<corners 
android:bottomRightRadius="0dp"
android:bottomLeftRadius="0dp"
android:topLeftRadius="15dp"
android:topRightRadius="15dp"/>
</shape>

This code is just working (since?) Android version 2.2. Referring to the documentation, the code should look like the following:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" android:padding="10dp">
<solid android:color="#FFFFFF"/>
<corners 
android:radius="2dp"
android:bottomRightRadius="0dp"
android:bottomLeftRadius="0dp"
android:topLeftRadius="15dp"
android:topRightRadius="15dp"/>
</shape>

Answer:

You might find this helpful.

<?xml version="1.0" encoding="utf-8"?>
<!--  res/drawable/rounded_edittext.xml -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" android:padding="10dp">
 <solid android:color="#FFFFFF"/>
    <corners
     android:bottomRightRadius="0dp"
     android:bottomLeftRadius="0dp"
  android:topLeftRadius="15dp"
  android:topRightRadius="15dp"/>
</shape>

Answer:

I changed the android:radius attribute to android:topRightRadius and android:topLeftRadius

Answer:

I think the best (to my understanding of your question) is to create a 9patch image and use it as background – can be defined to stretch as you need and set at the XML level saving some code work

Answer:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" android:padding="10dp">
<solid android:color="#FFFFFF"/>
<corners 
android:bottomRightRadius="0dp"
android:bottomLeftRadius="0dp"
android:topLeftRadius="15dp"
android:topRightRadius="15dp"/>
</shape>

Use the above code

Answer:

I would try drawing a rounded rectangle, and then two additional rectangles of the same size as the rounded rectangle’s corner radius, and place them in the corners that you don’t want to be rounded.

So for example, a rounded rectangle with a radius of 15px, and two regular rectangles 15x15px, placed into the corners of the rounded rectangle that should not be rounded.

EDIT: Re-reading your question, you might be better off making a simple 9-patch image for the top and bottom of your listview. They would stretch to any size that way without pixelization. That would require you to create the images beforehand, though, and doing things with the rectangle shapes would be easier to modify in code later. However, the 9-patch way would be less of a hack.

Answer:

Draw a rounded rectangle and then draw a normal rectangle over the rounded one with the same color.