Dennis van Opstal
Dennis van Opstal

Reputation: 1338

Can't get rounded corners for my layer-list drawable

I have made a button drawable that consists of a gradient shape and a solid shape, both in a layer-list like this:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:height="25dp">
        <shape android:shape="rectangle" >
            <gradient
                android:angle="90"
                android:startColor="@color/greyDark1"
                android:endColor="@color/greyDark2"/>
        </shape>
    </item>
    <item android:top="25dp" android:height="25dp">
        <shape android:shape="rectangle" >
            <solid android:color="@color/black" />
        </shape>
    </item>
</layer-list>

But I can't get the corners right. I need rounded corners around the entire shape, but not on the inside (so topRight and topLeft op the top half and bottomRight and bottomLeft for the bottom half).

If I set both halves with <corners android:radius="8dp"> the bottom corners of the top half and the top corners of the bottom half are rounded too, and that's not what I want.

If I set <corners android:topRightRadius="8dp" android:topLeftRadius"8dp"> for the top half and <corners android:bottomRightRadius="8dp" android:bottomLeftRadius"8dp"> for the bottom half the top half would be the full size of the drawable making the gradient not working properly and the bottom corners are that same color too.

Here is an image of what I'm trying to accomplish:

ButtonDrawable

Does someone know a solution to this?

EDIT:

I have gotten some answers and I'm thankful for that, but sadly enough they don't seem to work.

The answers I got from bofredo and Bhuvnesh Chasta resulted in something like this:

ButtonDrawable wrong (looks a bit like a burger)

And the answer I got from curiousMind looks pretty nice, but isn't what I'm aiming for:

ButtonDrawable wrong (although it looks pretty nice)

FINAL EDIT:

I have discussed this problem with someone I was working with and we both agree that it isn't that important to have it look like this, so we went with a solid color.

I still want to thank everybody who helped, all the current answers will get an upvote and I will accept the answer from waqaslam because he came very close to what I wanted.

Upvotes: 3

Views: 7951

Answers (5)

mike_
mike_

Reputation: 1

Found this question today and solved, I'm sharing it in case anyone else will find it unsolved as the OP wanted, and wants to know the right way as I'm sure the OP doesn't need it anymore. I made starting point/ending point for each item's draw, the gradient for the top starts where the button starts, ends after 20dp, for the bottom starts after 20dp and it ends in the end of the button. You can even see from the attachment that it is the same as the OP's wanted result! :) (I don't have 10 reputation to post images.) Button Preview from Android Studio

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:bottom="20dp">
        <shape
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:shape="rectangle">
            <gradient
                android:angle="270"
                android:startColor="#4e4e4e"
                android:endColor="#626262"
                android:type="linear"/>
        </shape>
    </item>
    <item android:top="20dp">
        <shape
            android:shape="rectangle" >
            <gradient
                android:angle="270"
                android:startColor="#4c4c4c"
                android:endColor="#1c1c1c"
                android:type="linear"/>
            <corners android:bottomLeftRadius="8dp" android:bottomRightRadius="8dp"/>
        </shape>
    </item>
</layer-list>

Upvotes: 0

Bhunnu Baba
Bhunnu Baba

Reputation: 1802

Try this one. You should use to corners in shape for round to corner.

<?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="#b2d1d1ef" />
        <corners android:radius="1dp"/>
    </shape>
</item>
<item android:right="1dp" android:left="1dp" android:bottom="2dp" android:top="1dp">
    <shape
        android:shape="rectangle">
        <solid android:color="#FFFFFF"/>
        <corners android:radius="5dp"/>
    </shape>
</item>

Upvotes: 1

waqaslam
waqaslam

Reputation: 68187

I think that's the closest you can reach to your desired drawable using xml.

enter image description here

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <shape android:shape="rectangle">
        <corners android:radius="2dp"/>
        <gradient android:startColor="#4e4e4e" android:centerColor="#626262" android:endColor="@android:color/transparent" android:angle="270" />
    </shape>
</item>
<item>
    <shape android:shape="rectangle">
        <corners android:radius="2dp"/>
        <gradient android:startColor="@android:color/transparent" android:centerColor="#4c4c4c" android:endColor="#1c1c1c" android:angle="270" />
    </shape>
</item>

Perhaps you should use 9-patch drawable to get the exact effect.

Upvotes: 2

curiousMind
curiousMind

Reputation: 2812

try like this

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

<gradient
    android:angle="270"
    android:endColor="#000"
    android:startColor="#787575" />

<corners android:radius="8dip" />

Upvotes: 1

bofredo
bofredo

Reputation: 2348

I had this problem quite some time ago aswell. You can find that question HERE

This is from the working answer:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
   <item>
     <shape xmlns:android="http://schemas.android.com/apk/res/android" >   
     <solid android:color="@color/cocus_orange"/>
     <corners android:radius="15px"/>
     <padding android:left="1dp" android:top="1dp" android:right="1dp" android:bottom="1dp" /> 
</shape>
</item>
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient android:angle="90" 
        android:startColor="#880f0f10" 
        android:centerColor="#880d0d0f" 
        android:endColor="#885d5d5e"/>
        <corners
            android:radius="15px" />
 </shape> 
</item>
</layer-list>

Upvotes: 1

Related Questions