How to use Android GradientDrawable

Question

I try to use the GradientDrawable to set a gradient to some backgrounds and buttons. Sadly the documentation is not very detailed.

What are the main attributes to configure the gradient? I understand start and endcolor but some of the other attributes could need some explanation.

At the moment I used images as the background for the buttons but a drawable defined in XML would be much nicer.

I try to get a look like this (It is a very light gradient): alt text http://janusz.de/~janusz/RedButton.png

score 48 · Accepted Answer · answered Apr 19 '10 at 10:21

48

use this xml as background to the imageview.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient android:angle="90" android:startColor="#7c0000" android:endColor="#A71C1C"/>
</shape>

thats it.

answered Apr 19 '10 at 10:21

Praveen

90,477
74
177
219

set the xml attributes in the documentation you mentioned. the very first one android:angle – Praveen Apr 19 '10 at 12:16
... The problem in the documentation is that it does not show what the attribute angle is doing. Your answer produces a shape but I still have no clue how the gradientDrawable works. – Janusz Apr 19 '10 at 12:24
it works to me properly. i have no idea about your problem. if i got any idea let u know. – Praveen Apr 19 '10 at 13:06
3

it works for me too but I would like to understand how it works... Some code snippets don't help me understand the problem – Janusz Apr 23 '10 at 13:45
I second that. Code samples are useful in trying to answer a specific question, but an understanding of what the properties do would be extremely useful. – atraudes Jan 07 '11 at 21:34
1

I believe you can think of the shape as a box with one end of the box being the start color and the opposite end being the end color. The angle rotates the angle of that box. It takes playing around with, but I believe angle 0 will be | start color --> end color | (horizontally). angle 90 probably rotates the box clockwise putting the start color above the end color. – Dandre Allison Jan 16 '13 at 22:45
I tested it, and I had the rotation assumption backwards, it's counter-clockwise, so angle 90 puts the start color BELOW the end color. – Dandre Allison Jan 16 '13 at 22:58
this is in xml, but How can we use `GradientDrawable` in code? – Mneckoee Sep 01 '16 at 06:35
Can we access this xml file programmatically, I want to change them - start,center, end and the angle. – RoCkDevstack Apr 26 '17 at 16:02

score 42 · Answer 2 · edited May 23 '17 at 10:31

I will give the same answer as Praveen, but will try to explain the settings as well.

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient 
       android:type="linear" 
       android:angle="-90" 
       android:startColor="#7c0000" 
       android:endColor="#A71C1C" />
</shape>

android:type

There are 3 types of gradients, the default and the one for this question is "linear". The other 2 are "radial" and "sweep".

android:angle

Counter-clockwise rotation of the gradient, where 0 is | start color --> end color | (horizontally).

android:startColor

Color the gradient starts from, start is defined by the rotation.

android:endColor

Color the gradient ends with, end is defined by the rotation.

android:centerColor

There can also be a color in between the start and end color, if desired.

good. just to clarify, in case the angle is 270 (or -90), the start color is at the top while the end color is at the bottom. — android developer, Mar 27 '13 at 09:29
@Dandre Allison Hey, can we change xml gradient value at run time — Akash kumar, Dec 07 '16 at 11:13

score 7 · Answer 3 · answered Jul 17 '17 at 04:38

Code

I originally found this question because I wanted to do it in code. Here is how to do it programmatically.

int startColor = 0xfff6ee19; // yellow
int endColor = 0xff115ede;   // blue
GradientDrawable gradientDrawable = new GradientDrawable(
        GradientDrawable.Orientation.LEFT_RIGHT,
        new int[] {startColor, endColor});

View myView = findViewById(R.id.my_view);
myView.setBackgroundDrawable(gradientDrawable);

The different orientations in the image at the top can be achieved by changing the Orientation in the constructor.

XML

As already answered, this is how you do it in xml.

my_gradient_drawable.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:type="linear"
        android:angle="0"
        android:startColor="#f6ee19"
        android:endColor="#115ede" />
</shape>

You set it to the background of some view. For example:

<View
    android:layout_width="200dp"
    android:layout_height="100dp"
    android:background="@drawable/my_gradient_drawable"/>