Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to make a double gradient with XML (iphone like)

How can I make this kind of drawable gradient with XML?

Double gradient image

I can do a simple gradient from color A to color B but i don't know how to combine two gradients in the same drawable.

like image 919
grunk Avatar asked Jul 11 '11 15:07

grunk


People also ask

How do I color a gradient in XML?

To create a gradient color we need to create a . xml file in the drawable folder. So go to app -> res -> drawable and right-click on drawable -> New -> Drawable Resource File and create gradient_drawable. xml file.


1 Answers

I finally found a solution with a layer-list which is good enough for me :

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- First part is a gradient -->
    <item android:left="0dp" android:right="0dp"> 
        <shape android:shape="rectangle">

            <gradient android:angle="-90" android:startColor="#9dcbf6"
                android:endColor="#177ee6" />

        </shape>
    </item>
    <!-- Second part is plain color. Slightly transparent -->
    <item android:top="1sp" android:bottom="20sp" > 
        <shape android:shape="rectangle">
            <solid android:color="#10ffffff"/>
        </shape>

    </item>
</layer-list>

The middle is set to 20 sp because the container has a 40sp height , but you can adjust to your will by editing : android:bottom="20sp"

like image 64
grunk Avatar answered Sep 20 '22 16:09

grunk