CODEWITHSUNDEEP
androidxmldrawableandroid-drawablexml-drawable
Harikrishnan
Harikrishnan

Reputation: 8063

Rounded rectangle with stroke on top android drawable XML

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

Upvotes: 2

Views: 10514

Answers (3)

Samoka
Samoka

Reputation: 1333

i think you should create 2 shapes the black one and the red one, just overlay the other shape to become the image you're looking for. you can't accomplish that with one shape in android.

Upvotes: 0

MilapTank
MilapTank

Reputation: 10076

try this is works let me know

this tool is helps me you can also get help from it

http://angrytools.com/android/button/

<?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:topLeftRadius="0dp"
           android:topRightRadius="0dp"
           android:bottomLeftRadius="7dp"
           android:bottomRightRadius="7dp"/> 

        <padding android:bottom="1dp"/>
    </shape>
</item>

Upvotes: 2

Ashok
Ashok

Reputation: 637

        <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

Upvotes: 3

Related Questions