Android Canvas for 2 coloured background

Question

I want to achieve below meter by use of canvas .

enter image description here

As you can see the black portion has 2 colors in it . I am able to set color of the black moving image using shape drawable. Code and image that I have achieved so far is given below. How can I have desired result. I am novice in canvas .

enter image description here

    float[] outerR = new float[] { 7, 7,curve , curve, curve, curve, 7, 7};
    ShapeDrawable mMovingRectangle = new ShapeDrawable();
    mMovingRectangle.setShape(new RoundRectShape(outerR, null, null));
    mMovingRectangle.getPaint().setColor(getResources().getColor(R.color.black_alfa_60));

I cant set drawable for shapedrawable .Is there any other way to achieve this .@SpringBreaker — Payal, May 15 '15 at 05:36
`Shader progress=new LinearGradient(0, 0, 0, 20, new int[]{Color.BLACK,Color.BLUE}, new float[]{0, 1}, TileMode.CLAMP); mMovingRectangle.getPaint().setShader(progress);` Play with the `LinearGradient` , Haven't tested but I guess you will get it. — Spring Breaker, May 15 '15 at 05:44
I dont need gradient :( . There need to be separate difference between the two colors @SpringBreaker — Payal, May 15 '15 at 06:09

score 0 · Answer 1 · answered May 15 '15 at 05:47

Look at this ShapeDrawable with shaderfactory

private void FillCustomGradient(View v) {
    final View view = v;
    Drawable[] layers = new Drawable[1];

    ShapeDrawable.ShaderFactory sf = new ShapeDrawable.ShaderFactory() {
        @Override
        public Shader resize(int width, int height) {
            LinearGradient lg = new LinearGradient(
                    0,
                    0,
                    0,
                    view.getHeight(),
                    new int[] {
                             getResources().getColor(R.color.color1), // please input your color from resource for color-1,2,3,4
                             getResources().getColor(R.color.color2),
                             getResources().getColor(R.color.color3),
                             getResources().getColor(R.color.color4)},
                    new float[] { 0, 0.49f, 0.50f, 1 },
                    Shader.TileMode.CLAMP);
            return lg;
        }
    };
    PaintDrawable p = new PaintDrawable();
    p.setShape(new RectShape());
    p.setShaderFactory(sf);
    p.setCornerRadii(new float[] { 5, 5, 5, 5, 0, 0, 0, 0 });
    layers[0] = (Drawable) p;

    LayerDrawable composite = new LayerDrawable(layers);
    view.setBackgroundDrawable(composite);
}

may be this is helpful to you

I dont need gradient :( . There need to be separate difference between the two colors — Payal, May 15 '15 at 06:10
then set R.color.color1 == R.color.color2 and R.color.color3 == R.color.color4 — pskink, May 15 '15 at 06:22

Android Canvas for 2 coloured background

1 Answers1