Create a drawable with rounded top corners and a border on bottom

Question

This is what I came up with.

<?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/grey" />

            <padding
                android:bottom="1dp" />
            <corners 
                android:radius="0dp"/> 
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle" >
            <solid android:color="@color/white" />
            <corners 
                android:radius="1dp" 
                android:bottomRightRadius="0dp" 
                android:bottomLeftRadius="0dp" 
                android:topLeftRadius="5dp" 
                android:topRightRadius="5dp"/> 
        </shape>
    </item>
</layer-list>

This is working however the bottom radius is showing up whatever values I place on it.

Actually in only takes the topLeftRadius to make it looks like this

    <corners  
        android:bottomRightRadius="0dp" 
        android:bottomLeftRadius="0dp" 
        android:topLeftRadius="5dp" 
        android:topRightRadius="0dp"/>

enter image description here

Hey, can u add more information about the requirement or a screenshot for how it should look like? — Permita, Sep 27 '13 at 06:41

score 7 · Answer 1 · answered Dec 10 '13 at 05:06

I had same problem, try it. it worked for me fine. I just add android:top="10dp" to second item. So, it causes to round just top corners.

<?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/dialog_title_bar_blue"/>

            <corners
                android:topLeftRadius="10dp"
                android:topRightRadius="10dp"/>
        </shape>
    </item>
    <item
        android:top="10dp">
        <shape android:shape="rectangle">
            <solid
                android:color="@color/dialog_title_bar_blue"/>
        </shape>
    </item>
</layer-list>

Mehul Joisar · Answer 2 · 2013-09-27T05:06:42.083

Issue: there is a bug as mentioned here

Solution: the bug has been solved in api12.

so give it a try by providing appropriate resources.create two xml files with same name and put one of them into drawable folder and another into drawable-v12 folder.

-> In drawable folder:

<?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/grey" />

        <padding
            android:bottom="1dp" />
        <corners 
            android:radius="0dp"/> 
    </shape>
</item>
<item>
    <shape android:shape="rectangle" >
        <solid android:color="@color/white" />
        <corners 
            android:radius="1dp"
            android:bottomRightRadius="0dp" 
            android:bottomLeftRadius="0dp" 
            android:topLeftRadius="5dp" 
            android:topRightRadius="5dp"/> 
    </shape>
</item>
</layer-list>

-> In drawable-v12 folder:

<?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/grey" />

        <padding
            android:bottom="1dp" />
        <corners 
            android:radius="0dp"/> 
    </shape>
</item>
<item>
    <shape android:shape="rectangle" >
        <solid android:color="@color/white" />
        <corners 
            android:bottomRightRadius="0dp" 
            android:bottomLeftRadius="0dp" 
            android:topLeftRadius="5dp" 
            android:topRightRadius="5dp"/> 
    </shape>
</item>
</layer-list>

I hope it will be helpful !

done that , I added it because it seems to be the solution as I lurked here on SO. removing that will not do anything. See this http://stackoverflow.com/questions/6105521/android-shape-corners-do-not-work-when-setting-individual-corners — bman, Sep 27 '13 at 04:40
thanks for the help , however I am just targeting v17 to v18. doesn't seem to work when removing ``android:radius="1dp"`` — bman, Sep 27 '13 at 05:09

DropAndTrap · Answer 3 · 2013-09-27T04:58:44.297

0

Hi here is your solution "Cheers :) "

first add this layout as background. Then in the below add a view as aline.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:padding="10dp"
    android:shape="rectangle" >

    <!-- you can use any color you want I used here gray color -->
    <solid android:color="#ffffff" />

    <corners
        android:topLeftRadius="3dp"
        android:topRightRadius="3dp" />

</shape>

And the view

<View
    android:layout_width="fill_parent"
    android:layout_height="1dp"
    android:background="@android:color/black"/>

edited Sep 27 '13 at 04:58

answered Sep 27 '13 at 04:46

DropAndTrap

1,538
16
24

this one i have done in my project. Its working fine. Does your requirement is like that u cant add a line in below Refresh the page i have updated the code – DropAndTrap Sep 27 '13 at 05:02

score 0 · Answer 4 · answered Sep 27 '13 at 05:59

<item>
    <shape>
        <corners
            android:bottomLeftRadius="0.1dp"
            android:bottomRightRadius="0.1dp"
            android:topLeftRadius="10dp"
            android:topRightRadius="10dp" />

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

        <stroke
            android:width="3dp"
            android:color="@android:color/black" />
    </shape>
</item>
<item android:bottom="3dp">
    <shape>
        <corners
            android:bottomLeftRadius="0.1dp"
            android:bottomRightRadius="0.1dp"
            android:topLeftRadius="10dp"
            android:topRightRadius="10dp" />

        <solid android:color="#800000" />
    </shape>
</item>

Create a drawable with rounded top corners and a border on bottom

4 Answers4

Linked