Using a gradientDrawable with more than three colors set

Question

According to what I've read, you can use a gradientDrawable and have three colors set for it, for example:

<gradient startColor="#00FF00" centerColor="#FFFF00" endColor="#FFFFFF"/>

But what if I want more than three colors, and not only that, I want to be able to set where to put each (in weight/percentage)?

Is it possible using the API or should I make my own customized drawable? If I need to make my own customized drawable, how should I do it?

I think you can find the answer [here](http://stackoverflow.com/questions/4381033/multi-gradient-shapes). — Androidz, Dec 24 '12 at 11:14

score 26 · Accepted Answer · edited Nov 24 '14 at 11:58

26

put this code in your onCreate() method:

ShapeDrawable.ShaderFactory shaderFactory = new ShapeDrawable.ShaderFactory() {
    @Override
    public Shader resize(int width, int height) {
        LinearGradient linearGradient = new LinearGradient(0, 0, width, height,
            new int[] { 
                0xFF1e5799, 
                0xFF207cca, 
                0xFF2989d8, 
                0xFF207cca }, //substitute the correct colors for these
            new float[] {
                0, 0.40f, 0.60f, 1 },
            Shader.TileMode.REPEAT);
         return linearGradient;
    }
};
PaintDrawable paint = new PaintDrawable();
paint.setShape(new RectShape());
paint.setShaderFactory(shaderFactory);

and use this drawable as a background.

You can add more than three colors in xml also by creating layers. But in XML it is quite complicated.

edited Nov 24 '14 at 11:58

Mickäel A.

9,012
5
54
71

answered Feb 12 '13 at 09:43

Bhaskar

527
5
6

this looks pretty good, but how do i use it? also , is it possible to have it as a customized drawable ? – android developer Feb 12 '13 at 10:14
Like if you have to set actionbar background: getActionBar().setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM); getActionBar().setBackgroundDrawable(paint); or if you have a button: //define a button in ur xml file with Id as a button Button button = (Button)findViewById(R.id.button); button.setBackgroundDrawable((Drawable)paint); – Bhaskar Feb 12 '13 at 10:46
this seems very cool . so if i want to have a customized drawable , all i need to do is extend PaintDrawable and then put the code you've set , only to set it on itself ? – android developer Feb 12 '13 at 11:02
You can customize color and their positions in above code. if you have customized image in drawable then you can do like this: button.setBackgroundDrawable(getResources().getDrawable(R.drawable.background_image)); – Bhaskar Feb 12 '13 at 11:30
i don't understand . about customized drawable, i meant having it as a class , so that i could use it anywhere , and customize its colors and positions in different layouts etc... – android developer Feb 12 '13 at 12:24
yeah sure you can make class and customize according to you. – Bhaskar Feb 12 '13 at 13:18
but what did you mean (on the post before i wrote what i meant) ? – android developer Feb 12 '13 at 13:49
you can draw gradient in paint or using any software and can use this image as background. – Bhaskar Feb 12 '13 at 19:43
this i know . but when you do it , and the view is too large , you lose the quality . anyway , what's the width&height that you've used ? i've tried the code using imageView.setImageDrawable , and it didn't work. when using setBackgroundDrawable , it worked but it showed a diagonal gradient instead of a linear one. – android developer Feb 12 '13 at 20:10
width and height must be any integer or width = 0 or imageView.getWidht() or button.getWidht(), and height = imageView.getHeight() or button.getHeight() – Bhaskar Feb 12 '13 at 21:09
1

please try to show a sample . when testing your code , i get a diagonal gradient . – android developer Feb 12 '13 at 21:27
2

This answer works great. For a gradient from top to bottom replace the creation of gradient to the following: "LinearGradient(0, 0, 0, height,..." (So replace the second gradient point to be at 0|height instead of width|height) – sunadorer Dec 06 '13 at 15:03
@sunadorer this seems to work well now. thank you. I could even set the entire rainbow colors: new int[] {0xFFff0000,0xFFFFA500,0xFFFFFF00,0xFF00FF00,0xFF0000FF,0xFF000099,0xFF8F00FF},new float[] {0,0.16f,0.33f,0.5f,0.66f,0.83f,1},Shader.TileMode.REPEAT); – android developer Dec 29 '13 at 23:00
Looks very not bad – Yahor10 Nov 28 '20 at 14:02

score 8 · Answer 2 · answered Nov 28 '17 at 09:34

8

It is not possible to do into a xml file, but you can apply +3 color gradient in yout java code with GradientDrawable class:

GradientDrawable gradientDrawable = new GradientDrawable(
                Orientation.TOP_BOTTOM,
                new int[]{ContextCompat.getColor(this, R.color.color1),
                        ContextCompat.getColor(this, R.color.color2),
                        ContextCompat.getColor(this, R.color.color3),
                        ContextCompat.getColor(this, R.color.color4)});

        findViewById(R.id.background).setBackground(gradientDrawable);

answered Nov 28 '17 at 09:34

Pelanes

3,451
1
34
32

This is also a nice solution, and short. – android developer Nov 28 '17 at 10:29
1

But how to set the positions of the colors? – Aaron Lee Jul 19 '18 at 03:26
Array color positions correspond to the colors positions in the gradient. Be aware of the orientation you have setup. – Pelanes Jul 19 '18 at 06:59

sai Pavan Kumar · Answer 3 · 2021-02-12T14:22:15.553

Using GradientDrawble we can achieve this

GradientDrawable gradientInsta = new GradientDrawable(GradientDrawable.Orientation.LEFT_RIGHT,
                new int[] {
                        Color.parseColor("#F9ED32"),
                        Color.parseColor("#F6C83F"),
                        Color.parseColor("#F2735F"), 
                        Color.parseColor("#EF3E73"),
                        Color.parseColor("#EE2A7B"),
                        Color.parseColor("#D22A8A"),
                        Color.parseColor("#8B2AB1"),
                        Color.parseColor("#1C2AEF"),
                        Color.parseColor("#002AFF"),
                        ContextCompat.getColor(MainActivity.this, R.color.colorPrimary)
        });
findViewById(R.id.insta).setBackground(gradientInsta);

I think it’s my browser mistake which translated “ to quoted string , it will work fine now. — sai Pavan Kumar, Feb 12 '21 at 14:24

score 1 · Answer 4 · answered Dec 24 '12 at 11:15

1

I think the below are possible solutions.

You can create multiple shapes with gradients and form a bigger shape.
You can create your own GradientDrawable by extending the GradientDrawable Class refer to the below doc.
Gradient Drawable Documentation

answered Dec 24 '12 at 11:15

Lalith B

11,843
6
29
47

Can you please show a sample of how to do the second one? – android developer Nov 02 '17 at 22:11

score 0 · Answer 5 · answered Apr 16 '20 at 09:00

In Kotlin you can do it like this:

replace color1,2,..n with your color values

                 //Create Gradient 
                val gradientDrawable = GradientDrawable(
                    GradientDrawable.Orientation.TOP_BOTTOM,
                    intArrayOf(color1,color1 ,color1, colorn)
                );
                gradientDrawable.cornerRadius = 0f;

Using a gradientDrawable with more than three colors set

5 Answers5

Linked