Have different Linear progress bar's indicator color with different level

Question

I'm stuck with this one implementation of material LinearProgressIndicator but have no idea on how I can make it functional in that way.

My naive approach is to have different color at different percentage level such as for "10%-Red, 25%-Yellow, 35%-Orange, 50%+ Green". So, I just wanted to know if there exist any other way for gradient color which starts from red and goes all above upto green.

Updated Question with picture

Something like this picture!

No, that's not the expected output! I'll update my question with expected outcome. — GAMING INC, Mar 15 '22 at 02:15
I have attached an example picture which suggests what I actually wanted to implemented! — GAMING INC, Mar 15 '22 at 10:58
So you're asking how to draw lines of four different colours? Or how to calculate a colour, based on a percentage? — Dawood ibn Kareem, Mar 15 '22 at 19:12

score 2 · Accepted Answer · answered Mar 15 '22 at 12:09

One of the solutions can be to generate a color from the progress and update it to the progress bar.

 private fun updateProgress(progress: Int) {
    val color = when (progress) {
        in 0..10 -> Color.RED
        in 11..34 -> Color.YELLOW
        in 35..54 -> Color.MAGENTA
        else -> Color.GREEN
    }
    updateProgressBar(progress, color)
}

private fun updateProgressBar(progress: Int, color: Int) {
    binding.progressBar.apply {
        setProgress(progress)
        setIndicatorColor(color)
    }
}

Have different Linear progress bar's indicator color with different level

1 Answers1