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.

What I am trying to do is have the background fade from, say, white to black smoothly.

I've tried a few things, none of which seem to work.

The first thing I did was using a for loop and the setBackgroundColor method for LinearLayout, changing the R, G, and B values together from 0 to 255. It doesn't work.

I can do one-of settings changes, but when I do the loop I get nothing but the last value. What I think is happening is the UI is locking up while the loop is in progress and unfreezing when the loop ends. I've tried putting delays in the loop (ugly nested loop delays and Thread.sleep), all to no avail.

Can anyone give me any pointers as to how to get this working? Do I need a second thread to do the change to the color? I've got a vague idea of threads, although I have never used them.

My sample code showing roughly what I am trying to do is as follows:

main.xml is:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:id="@+id/screen"
    >
<TextView  
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:text="@string/hello"
    />
</LinearLayout>

And my java code is (the 0.01 inc. is just to act as an ugly delay mechanism to try to see the viewing of colors change slowly):

package nz.co.et.bgfader;

import android.app.Activity;
import android.os.Bundle;
import android.widget.LinearLayout;

public class bgfader extends Activity {

    LinearLayout screen;

/** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        screen = (LinearLayout) findViewById(R.id.screen);
        for (int i = 0; i < 65535; i+=0.01) {
            screen.setBackgroundColor(0xff000000 + i);
        }
    }
}

Any help would be greatly appreciated

Cheers

Steve

score 100 · Answer 1 · edited Dec 24 '22 at 03:59

100

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.

edited Dec 24 '22 at 03:59

starball

20,030
7
43
238

answered Jan 11 '13 at 16:18

Amy

1,166
2
8
5

Thanks for that - I was using 2.2, so this solution wouldn't have worked... and given that it was for a nightlight app for my daughter, and her tablet was 2.2-based I would have needed to stick with the original threaded option... but I like this way for its simplicity so I might have a tinker with it. Cheers – Steve Jan 15 '13 at 04:10
Really good to know. Shame its only for 3.0+. looking for a similar solution for 2.2/2.3+ – speedynomads May 23 '13 at 11:27

score 13 · Answer 2 · answered Mar 08 '17 at 19:05

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

score 12 · Accepted Answer · answered Mar 05 '11 at 01:02

12

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.

answered Mar 05 '11 at 01:02

xandy

27,357
8
59
64

5

Thanks! :) That got it going, with a few minor changes. I had to make i a global, as it couldn't be accessed inside the run method otherwise (or I could have passed it in I guess). I also had to tweak the try/catch as it wouldn't compile for me as it was. Many many thanks, thats been driving me nuts for a couple of days. I'll have a play with threads and see if I can make something interesting with this code now its working. – Steve Mar 05 '11 at 01:58
3

This is not a good practice. You're not allows up update UI from a bg thread. @Amy's suggestion is the correct one. There is the project http://nineoldandroids.com/ that implements the ObjectAnimator for Android pre-3.0 – tofi9 Jun 06 '13 at 12:36
What if I want to fade one color to another using a `seekbar` value in `TextView`? – Si8 Jan 01 '14 at 22:39
Should updating per update frame and using the delta time variable to multiple the result, this will increase and decrease with speed on certain devices. – Oliver Dixon May 19 '16 at 12:25

score 3 · Answer 4 · answered Jun 06 '14 at 00:55

3

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/

answered Jun 06 '14 at 00:55

jokigenki

61
3

score 1 · Answer 5 · answered Jul 08 '14 at 22:12

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

score 0 · Answer 6 · answered Aug 05 '20 at 09:30

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

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

6 Answers6

Linked