14

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.

Alexander Farber
  • 21,519
  • 75
  • 241
  • 416
grunk
  • 14,718
  • 15
  • 67
  • 108

2 Answers2

15

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"

grunk
  • 14,718
  • 15
  • 67
  • 108
12

You can have three colors in a gradient. A start color, end color and a center color.

<gradient
        android:angle="integer"
        android:centerX="integer"
        android:centerY="integer"
        android:centerColor="integer"
        android:endColor="color"
        android:gradientRadius="integer"
        android:startColor="color"
        android:type=["linear" | "radial" | "sweep"]
        android:usesLevel=["true" | "false"] />

Alternatively you can use a LayerList Drawable and just piece them together.

CaseyB
  • 24,780
  • 14
  • 77
  • 112
  • Thanks for your answer , but using centerColor don't seems to be the solution. Looks at my question again , i added some informations – grunk Jul 12 '11 at 06:40
  • Then you'll have to move on to the second half of may answer and make two gradients and use a LayerList. – CaseyB Jul 12 '11 at 19:39
  • Don't seems possible to easily adjust a shape to 50% of height. i will probably use a stretchable image. Thanks for your time. – grunk Jul 13 '11 at 07:07
  • @grunk You are right, you wouldn't be able to get that crisp line where one of the gradients ends at 50% of the drawable's height. Others might find it useful to know that you CAN specify top/right/bottom/left on each in your but unfortunately, you can only provide a dimension like 50dp, not a relative value like 50%. That makes them scale poorly, which kind of defeats the point of defining a drawable this way (IMO.) – spaaarky21 Mar 05 '14 at 23:53