Defining multi-color gradients

Question

first post here. Also excuse me in case any of this is glaringly obvious. I am a total newbie at xml & java and mainly a designer.

I want to implement the design I created in Adobe Illustrator and Photoshop for an app I am working on. I know you can use XML with start/center/end color for basic gradients. But I want to create exactly the one I designed, with as many colors as desired and custom intervals where they start and end. I found this solution in another thread:

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

How do I include colors I manually defined via values/colors? It doesn't let me use @color/darkgrey etc. obviously, as they are not integer. Also I cannot put them in in hexa-code for probably the same reason.

I'd like to do new int [] {@color/A, @color/B, ...}

Also, second question: the float seems to define the custom intervals from which the colors are used. In his example he had 4 int colors, and 4 float values - but that would only define 3 intervals from what I understand (?): [0,0.4] [0.4,0.6] [0.6,1] in percentages. Or does it work in a different way?

I'll specify further details, if neccessary.

From https://stackoverflow.com/questions/13929877/how-to-make-gradient-background-in-android/13968524#13968524 what do you mean by "It doesn't let me use @color/darkgrey etc" ? — miroslavign, Oct 29 '17 at 23:43

score 2 · Accepted Answer · answered Oct 29 '17 at 23:18

How do I include colors I manually defined via values/colors?

If you want to use color resource values in java, you will need access to a Context object or one of its subclasses (like Activity). Then you can call

int color = ContextCompat.getColor(context, R.color.my_color_name);

the float seems to define the custom intervals from which the colors are used

Not exactly. The float[] values define the point from 0 to 1 where each color is placed. So if you have four colors, you'll want four positions (and the first and last should be 0 and 1).

With that in mind, you could write something like this:

int[] colors = new int[] {
    ContextCompat.getColor(context, R.color.color_one),
    ContextCompat.getColor(context, R.color.color_two),
    ContextCompat.getColor(context, R.color.color_three),
    ContextCompat.getColor(context, R.color.color_four);
};

float[] positions = new float[] {
    0, 0.33, 0.67, 1
};

LinearGradient linearGradient = 
    new LinearGradient(0, 0, width, height, colors, positions, Shader.TileMode.REPEAT);

This would produce a gradient from:

color_one to color_two at 0 to 0.33
color_two to color_three at 0.33 to 0.67
color_three to color_four at 0.67 to 1.

Thank you very much! At first I was a bit confused regarding the context argument, however I replaced it with LoginActivity.this (the one it's applied in) and it worked, after some Google search. How do I now also influence the angle? That's the last thing missing, currently it's diagonal. — Gérard, Oct 30 '17 at 00:09
The first four arguments (in my example, `0, 0, width, height`) are two points, so my example gradient draws from `(0,0)` to `(width,height)`. The relative positioning of the two points defines the angle. — Ben P., Oct 30 '17 at 01:45

score 0 · Answer 2 · answered Oct 29 '17 at 23:29

0

@Ben's answer is complete and answers most of your questions. To answer also the last point

Also I cannot put them in in hexa-code for probably the same reason.

In Java you prepend '0x' to indicate an hexa notation. Colors are expressed as ARGB (Alpha/R/G/B), so the expressions

int red = 0xffff0000, blue = 0xff0000ff, green = 0xff00ff00;
int red_half_alpha = 0x80ff0000;

are correct.

answered Oct 29 '17 at 23:29

rupps

9,712
4
55
95

Thanks for your clarification regarding the 0x, know I understand how to apply that; using the above method Ben provided would be better in terms of consistency, though, and also to avoid having to look up ARGBs all the time, I assume? – Gérard Oct 30 '17 at 00:08
yeah, the less stuff hardcoded the better, of course, just wanted to tell you how to use hex values in Java should you need it sometime :) – rupps Oct 30 '17 at 00:58

Defining multi-color gradients

2 Answers2