Android background color change using a value

Question

I'm trying to change the background color of a layout but depending on a value.

For example. 100 means read, 75: orange 60: yellow-ish and 20 like blue. Also, have a transition between each color.

I'm new on Android development and I'm not sure exactly what to search for. If you can point me in the right direction, class, website or something.

update

I'm currently trying:

if(percentage <= 100 && percentage >= 85) {
        // red
 } else if(percentage < 85 && percentage >= 70) {

}
...

I updated the question with the example but I'm sure that there must be a better way to do it and add the transitions — dacastro4, Oct 15 '18 at 00:16
So you have a value from 0 to 100 and you want to change a color based on the value? You also mentioned transition.. is the value periodicaly changing? — kristyna, Oct 15 '18 at 00:17

score 0 · Answer 1 · answered Oct 15 '18 at 00:26

Try something like below - In your Layout, assign an id to the View whose background you want to change, for e.g.

<LinearLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/linear"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical"
android:background="#e5e5e5">

 <!-- Other Views -->
</LinearLayout>

then in Activity -

LinearLayout ll = findViewById(R.id.linear);
if(percentage <= 100 && percentage >= 85) ll.setBackgroundColor(Color.RED);
else if(percentage < 85 && percentage >= 70) ll.setBackgroundColor(Color.BLUE);

score 0 · Answer 2 · answered Oct 15 '18 at 03:32

I put together a demo. Assuming

amount is from 0 to 100
0 = rgb(0, 0, 255) - blue
50 = rgb(255, 255, 0) - yellow
100 = rgb(255, 0, 0) - red

This is a sample activity changing color every 2 seconds:

class BackgroundActivity : Activity() {
    private lateinit var root: LinearLayout
    private val values = arrayOf(0F, 40F, 60F, 100F, 10F)
    private var counter = 0

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_background)

        root = findViewById(R.id.background)

        val timer = Timer()
        val task = object : TimerTask() {
            override fun run() {
                changeBackground(values[counter])
                counter++
                if (counter >= values.size)
                    timer.cancel()
            }
        }
        timer.schedule(task, 0, 2000)
    }


    private fun changeBackground(amount: Float) {
        val r = Math.min(255*amount*2/100, 255F)
        val g = if (50 > amount) 255*amount*2/100 else 255*(100-amount)*2/100
        val b = Math.max(255*(1-amount*2/100), 0F)

        val color = getIntFromColor(r.toInt(), g.toInt(), b.toInt())

        runOnUiThread {
            root.setBackgroundColor(color)
        }
    }

    private fun getIntFromColor(r: Int, g: Int, b: Int): Int {
       val red = r shl 16 and 0x00FF0000 //Shift red 16-bits and mask out other stuff
        val green = g shl 8 and 0x0000FF00 //Shift Green 8-bits and mask out other stuff
        val blue = b and 0x000000FF //Mask out anything not blue.

        return -0x1000000 or red or green or blue //0xFF000000 for 100% Alpha. Bitwise OR everything together.
    }

}

The important part is the changeBackground() method - based on the amount calculates final color (int).

I am not really sure about the transition.

(thanks @initramfs for this answer)

score 0 · Accepted Answer · answered Jan 23 '19 at 14:26

I ended up using something else

boolean good = false;
double percentage = getPercentage((int) temp);
int screenHeight = getScreenHeight();
int pos1 = 0, pos2 = 0;

Integer[] firstColor = new Integer[]{0, 155, 255}, secondColor = new Integer[]{255, 152, 0};

if (percentage <= 0) {
    firstColor = new Integer[]{0, 155, 255};
    secondColor = new Integer[]{163, 235, 255};
    pos1 = 0;
    pos2 = 50;
    good = true;
}

if (percentage <= 50 && !good) {
    firstColor = new Integer[]{0, 155, 255};
    secondColor = new Integer[]{163, 235, 255};
    pos1 = 0;
    pos2 = 50;
    good = true;
}

if (percentage <= 100 && !good) {
    firstColor = new Integer[]{163, 235, 255};
    secondColor = new Integer[]{255, 152, 0};
    pos1 = 50;
    pos2 = 100;
}

int firstColor_X = screenHeight * (pos1 / 100);
int secondColor_X = (int) (screenHeight * ((double) pos2 / 100) - firstColor_X);
double slider_X = (screenHeight * (percentage / 100) - firstColor_X);
double ratio = slider_X / secondColor_X;

ArrayList<Integer> result = hexColor(secondColor, firstColor, ratio);

int red = result.get(0);
int green = result.get(1);
int blue = result.get(2);

background.setBackgroundColor(Color.rgb(red, green, blue));

Android background color change using a value

update

3 Answers3