Change View Color with alpha animation

Question

I am writing an code where need to modified view background from one color to other color along alpha animation.

I tried with

ObjectAnimator backgroundColorAnimator = ObjectAnimator.ofObject(stickyLayout,
                        "backgroundColor",
                        new ArgbEvaluator(),
                        0xFFFFFFFF,
                        0xff78c5f9);

EDIT: Since most of us not clear, Assume we need to change this color with alpha on seekbar updated values above mentioned solution work somewhat but not as expected with alpha...any suggestion?

It might be help you: [How to make a background transparent 20% in android](http://stackoverflow.com/a/16890937/2668136) — Blo, Jan 05 '15 at 13:57
That is fine ff and Fllo...since I wanted to move from complete white to complete Dark say 0xff78c5f9...any suggestion ! — CoDe, Jan 05 '15 at 14:00
so if start alpha and end alpha == 0xff, then any values in between will also be 0xff, do you expect other values? — pskink, Jan 05 '15 at 14:10
@pskink I need similar how PlayStore Action bar color get changed on Scroll...any suggestion? — CoDe, Jan 06 '15 at 10:54

score 10 · Answer 1 · edited Nov 11 '15 at 14:10

10

ValueAnimator colorAnim = ObjectAnimator.ofInt(**myView**, "backgroundColor", Color.RED, Color.BLUE);
colorAnim.setDuration(3000);
colorAnim.setEvaluator(new ArgbEvaluator());
colorAnim.setRepeatCount(ValueAnimator.INFINITE);
colorAnim.setRepeatMode(ValueAnimator.REVERSE);
colorAnim.start();

Where myView is the view on which you want to apply Animation

edited Nov 11 '15 at 14:10

Kyslik

8,217
5
54
87

answered Mar 25 '15 at 07:57

Divyang Panchal

1,889
1
19
27

try changing property name to "cardBackgroundColor" instead of "backgroundColor" for CardView – Divyang Panchal Apr 09 '20 at 10:38

score 2 · Answer 2 · answered Mar 20 '15 at 21:04

You don't really need these methods: initHeaderColor & translateHeaderView.

Define an ArgbEvaluator as a class member:

ArgbEvaluator mArgbEvaluator;

// define start & end colors
int mStartColor, mEndColor;

// initialize start & end colors

Call ArgbEvaluator's evaluate method with parameters (slideOffset, startColor, endColor), cast the return value to Integer, and use it to set the background color of fmActionBar:

void updateActionBarbgColor(float slideOffset) {
    if (mArgbEvaluator == null)
        mArgbEvaluator = new ArgbEvaluator();

    int bgColor = (Integer) mArgbEvaluator.evaluate(slideOffset, mStartColor, mEndColor);
    fmActionBar.setBackgroundColor(bgColor);
}

For reference, ArgbEvaluator#evaluate(...):

public Object evaluate(float fraction, Object startValue, Object endValue) {
    int startInt = (Integer) startValue;
    int startA = (startInt >> 24) & 0xff;
    int startR = (startInt >> 16) & 0xff;
    int startG = (startInt >> 8) & 0xff;
    int startB = startInt & 0xff;

    int endInt = (Integer) endValue;
    int endA = (endInt >> 24) & 0xff;
    int endR = (endInt >> 16) & 0xff;
    int endG = (endInt >> 8) & 0xff;
    int endB = endInt & 0xff;

    return (int)((startA + (int)(fraction * (endA - startA))) << 24) |
            (int)((startR + (int)(fraction * (endR - startR))) << 16) |
            (int)((startG + (int)(fraction * (endG - startG))) << 8) |
            (int)((startB + (int)(fraction * (endB - startB))));
}

hmm. thought this would fade/ darken colour as i scrolled in onOffsetChanged?? — filthy_wizard, Feb 18 '19 at 06:23
using it in onOffsetChanged causes a jump between colours not a slow fade? — filthy_wizard, Feb 18 '19 at 06:33
@filthy_wizard can you try debugging the code to check the value of `slideOffset`? It should be between 0f & 1f. — Vikram, Feb 20 '19 at 03:27

score 1 · Answer 3 · answered May 30 '20 at 04:20

1

Use Color.parseColor instead of directly 0x value. Code example in Kotlin though

val objectAnimator = ObjectAnimator.ofObject(my_2_text, "backgroundColor",  ArgbEvaluator(),
    Color.parseColor("#FFFFFFFF"), Color.parseColor("#FF78c5f9"))

answered May 30 '20 at 04:20

Elye

53,639
54
212
474

score 0 · Answer 4 · answered Jan 05 '15 at 14:11

0

You can use different evaluator or animate alpha independently with AnimatorSet.

answered Jan 05 '15 at 14:11

Bracadabra

3,609
3
26
46

score 0 · Accepted Answer · answered Mar 20 '15 at 11:32

This is working code I found so far:

    /**
     * Initialise header color while translate animation
     */
    private void initHeaderColor(int startColor, int endColor) {

        initR = Color.red(startColor);
        initG = Color.green(startColor);
        initB = Color.blue(startColor);
        initAlpha = Color.alpha(startColor);

        endR = Color.red(endColor);
        endG = Color.green(endColor);
        endB = Color.blue(endColor);
        endAlpha = Color.alpha(endColor);
    }

and set offset of your wish.

   /**
     * Translate header view component
     * @param slideOffset
     */
    private void translateHeaderView(float slideOffset) {

            finalR = (int) (initR + (endR - initR) * slideOffset);
            finalG = (int) (initG + (endG - initG) * slideOffset);
            finalB = (int) (initB + (endB - initB) * slideOffset);
            finalAlpha = (int) (initAlpha + (endAlpha - initAlpha) * slideOffset);

            int color = Color.argb(finalAlpha, finalR, finalG, finalB);
            fmActionBar.setBackgroundColor(color);
        }

Lukas Olsen · Answer 6 · 2015-03-20T11:51:35.010

I use an static helper Method to interpolate two colors.

public static int interpolateColor(int colorA, int colorB, float proportion) {
float[] hsva = new float[3];
float[] hsvb = new float[3];
Color.colorToHSV(colorA, hsva);
Color.colorToHSV(colorB, hsvb);
for (int i = 0; i < 3; i++) {
  hsvb[i] = interpolate(hsva[i], hsvb[i], proportion);
}
int alpha1 = Color.alpha(colorA);
int alpha2 = Color.alpha(colorB);
int newAlpha = interpolate(alpha1, alpha2, proportion);
return Color.HSVToColor(newAlpha, hsvb);  }

Also the interpolate Method:

private static float interpolate(float a, float b, float proportion) {
return (a + ((b - a) * proportion)); }

This method gives the correct color for a proportion value betwenn 0-1 where 0 is colorA is fully visible and 1 means colorB is fully visible.

You then can use a ValueAnimator add an onUpdateListener and get the animationPercentage and pass it as proportion to the interpolate Method.

As you can see i added the alpha values into the method aswell.

Change View Color with alpha animation

6 Answers6