CODEWITHSUNDEEP
androidandroid-layoutlayer-list
Richardweber32
Richardweber32

Reputation: 168

Drawable with 2 solid colours

I'm trying to create a drawable to act as the background for one of my layouts, and can't get it to display two solid colours divided in the middle.

Currently I'm attempting to use a layer-list with the background being solid, and an overlay of a semi transparent white rectangle to tint the original solid background colour along the top half of the rectangle. It doesn't need to be done like this though.

Gradient will not work unless you can find a way to make the transition immediate. 

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <shape android:shape="rectangle">
        <size android:height="@dimen/basic_runners_height"></size>
        <solid android:color="@color/brb_orange"
            android:gravity="bottom"></solid>
    </shape>
</item>
<item>
    <shape android:shape="rectangle">
        <size android:height="@dimen/basic_runners_height_halved"></size>
        <solid android:color="@color/md_white_1000"
            android:alpha="127"
            android:gravity="top"></solid>

    </shape>
</item>

So, my understanding of this is that there should be two shapes, one half the size of the other. The first shape covers the whole drawable in orange and the other is white, and ~50% transparent (alpha = 127), takes up half the drawable and gravitates toward the top.

The preview of the drawable is fully white, without a hint of orange. What am I doing wrong?

Edit:

Right, to make this even simpler, I've added the tinted colour to my @color so that I don't even need to bother with transparency. The XML is as shown below:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:top="@dimen/basic_runners_height_halved">
    <shape android:shape="rectangle" >
        <size android:height="@dimen/basic_runners_height_halved" />
        <solid android:color="@color/brb_orange_tint" />
    </shape>
</item>

<item android:top="@dimen/basic_runners_height">
    <shape android:shape="rectangle" >
        <size android:height="@dimen/basic_runners_height" />
        <solid android:color="@color/brb_orange" />
    </shape>
</item>

But this doesn't even do the trick... runners_height_halved is half the dp of runners_height but this doesn't split it down the middle. Maybe 10% of the drawable is the tinted colour, and for some reason they are reversed so that the tinted colour is at the bottom. This should be the most simple thing...

Upvotes: 2

Views: 2122

Answers (1)

Gioan Le
Gioan Le

Reputation: 1168

Try to use padding(top,left, right, bottom) in the <item> tag. Hope it helps

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <shape android:shape="rectangle">
        <size android:height="@dimen/basic_runners_height"></size>
        <solid android:color="@color/brb_orange"
            android:gravity="bottom"></solid>
    </shape>
</item>
<item android:top="10dp"
        android:left="10dp"
        android:right="10dp"
        android:bottom="10dp">
    <shape android:shape="rectangle">
        <size android:height="@dimen/basic_runners_height_halved"></size>
        <solid android:color="@color/md_white_1000"
            android:alpha="127"
            android:gravity="top"></solid>

    </shape>
</item>

Upvotes: 1

Related Questions