Rounded rectangle with stroke on top android drawable XML

Harikrishnan picture Harikrishnan · Jul 12, 2014 · Viewed 9.2k times · Source

I was trying to make a drawable using XML in android. The requirement is I need to have a rounded rectangle(all 4 corners rounded) with a stroke of 7dp height only on the top edge. I am using the following XML for that:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <stroke android:width="5dp" android:color="@color/theme_color" />
            <solid android:color="@color/theme_color" />
            <corners
                android:radius="7dp"/>
            <padding android:top="7dp"/>
        </shape>
    </item>

    <item>
        <shape
            android:shape="rectangle">
            <stroke android:width="1dp" android:color="@color/designer_cell_background" />
            <solid android:color="@color/designer_cell_background" />
            <corners
                android:radius="7dp"
                android:topRightRadius="0dp"
                android:topLeftRadius="0dp"/>
            <padding android:bottom="1dp"/>
        </shape>
    </item>
</layer-list>

I am getting this working almost OK, except that the bottomRight and bottomLeft corners are not rounded.

Question - 1 : How to get the bottom corners rounded?

Question - 2 : Is this the correct way to achieve what I actually want? Is there a better way? I am asking this because, I understand what I do here is actually making two rectangles, one on top of another, the second one is being slightly lowered from the top edge of the first rectangle so that the color of the first rectangle appears as a line on top of the second one. And then adding corner radius to each rectangle individually. I don't think it is the right solution. But I failed when I tried to add a stroke of 7dp width to the top of a rounded rectangle. The stroke I gave was appearing on all the edges.

EDIT

Here is what I want:

Expected Output

And this is what I currently get:

Actual Output

Answer

Ashok picture Ashok · Jul 12, 2014

        <stroke
            android:width="1dp"
            android:color="#FFFFFF" />

        <solid android:color="#ffffff" />

        <padding
                android:left="0dp"
                android:right="0dp"
                android:top="0dp" />

        <corners android:radius="12dp" />

    </shape>

ur using the radius value increased curve shape wil increase