In Android, how do I smoothly fade the background from one color to another? (How to use threads)

Question

I\'ve been playing with Android programming on and off for a couple of weeks, and I\'m trying to get something to work that seems simple, but I think I am missing something.

Answer 1

Better answer to this question would be to use ObjectAnimator

ObjectAnimator colorFade = ObjectAnimator.ofObject(view, "backgroundColor" /*view attribute name*/, new ArgbEvaluator(), mContext.getResources().getColor(R.color.colorMenuOverlay) /*from color*/, Color.WHITE /*to color*/);
                colorFade.setDuration(3500);
                colorFade.setStartDelay(200);
                colorFade.start();

Answer 2

If anyone's looking for a pre 3.0 solution, Nine Old Androids will allow you to use the animation API on devices back to Android 1.0. http://nineoldandroids.com/

Answer 3

I found another way to change the background color if you're interested--I think using animation will be easier than what you currently have :)

If you are using API Level 11 or above, you can use ObjectAnimator on the background color of your LinearLayout.

 ObjectAnimator colorFade = ObjectAnimator.ofObject(screen, "backgroundColor", new ArgbEvaluator(), Color.argb(255,255,255,255), 0xff000000);
  colorFade.setDuration(7000);
  colorFade.start();

Also, just a quick note, the 32-bit int color codes must be used. See http://developer.android.com/reference/android/graphics/Color.html for details but you can use Color.argb, Color.rgb, the hex as I used above, or look at the int color constants.

Hope this helps!

Answer 4

In your loop, your setting on background is so fast that the UI is not (will not) able to schedule the update of display. Yes, you better use a second thread to update the background or else you will stall the UI thread. Try following:

LinearLayout screen;
Handler handler = new Handler();

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);

    screen = (LinearLayout) findViewById(R.id.screen);

    (new Thread(){
        @Override
        public void run(){
            for(int i=0; i<255; i++){
                handler.post(new Runnable(){
                    public void run(){
                        screen.setBackgroundColor(Color.argb(255, i, i, i));
                    }
                });
                // next will pause the thread for some time
                try{ sleep(10); }
                catch{ break; }
            }
        }
    }).start();
}

This is a threaded version of your code.

Answer 5

A couple more solutions for old devices:

TIMER

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);
    final Timer myTimer = new Timer();
    final View myview = getWindow().getDecorView().findViewById(
            android.R.id.content);

    myTimer.schedule(new TimerTask() {
        int color = 0;
        @Override
        public void run() {
            // If you want to modify a view in your Activity
            runOnUiThread(new Runnable() {
                public void run() {
                    color++;
                    myview.setBackgroundColor(Color.argb(255, color, color,
                            color));
                    if (color == 255)
                        myTimer.cancel();
                }
            });
        }
    }, 1000, 20); // initial delay 1 second, interval 1 second

}

THREAD

    @Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);
    new Thread() {
        int color = 0;
        View myview = getWindow().getDecorView().findViewById(
                android.R.id.content);
        @Override
        public void run() {
            for (color = 0; color < 255; color++) {
                try {
                    sleep(20);
                    runOnUiThread(new Runnable() {
                        @Override
                        public void run() {
                            myview.setBackgroundColor(Color.argb(255,
                                    color, color, color));
                        }
                    });
                } catch (InterruptedException e) {
                    e.printStackTrace();
                }
            }
        }
    }.start();
}

Answer 6

private fun applyColorFade(fromColor: Int, toColor: Int) {
    ObjectAnimator.ofObject(
        toolbar, "backgroundColor", ArgbEvaluator(), 
        fromColor,
        toColor
    ).apply {
      duration = 2000
      startDelay = 200
      start()
    }
}

// this is a reusable method for color fade animation for a view