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?

Solution 1

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.

Solution 2

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);

Solution 3

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);

Solution 4

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

View more solutions

Comments

[Androidz]

I think you can find the answer here.

[android developer]

this looks pretty good, but how do i use it? also , is it possible to have it as a customized drawable ?

[Bhaskar]

Like if you have to set actionbar background: getActionBar().setDisplayOptions(ActionBar.DISPLAY_SHOW_CUST‌​OM); 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);

[android developer]

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 ?

[Bhaskar]

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.dr‌​awable.background_im‌​age));

[android developer]

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...

[Bhaskar]

yeah sure you can make class and customize according to you.

[android developer]

but what did you mean (on the post before i wrote what i meant) ?

[Bhaskar]

you can draw gradient in paint or using any software and can use this image as background.

[android developer]

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.

[Bhaskar]

width and height must be any integer or width = 0 or imageView.getWidht() or button.getWidht(), and height = imageView.getHeight() or button.getHeight()

[android developer]

please try to show a sample . when testing your code , i get a diagonal gradient .

[sunadorer]

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)

[android developer]

@sunadorer this seems to work well now. thank you. I could even set the entire rainbow colors: new int[] {0xFFff0000,0xFFFFA500,0xFFFFFF00,0xFF00FF00,0xFF0000FF,0xFF‌​000099,0xFF8F00FF},n‌​ew float[] {0,0.16f,0.33f,0.5f,0.66f,0.83f,1},Shader.TileMode.REPEAT);

[android developer]

Can you please show a sample of how to do the second one?

[android developer]

This is also a nice solution, and short.

[Aaron Lee]

But how to set the positions of the colors?

[Pelanes]

Array color positions correspond to the colors positions in the gradient. Be aware of the orientation you have setup.

[Yahor10]

Looks very not bad

[sai Pavan Kumar]

I think it’s my browser mistake which translated “ to quoted string , it will work fine now. 👍