Change TextView background based on width percentage

Question

I've got a simple TextView with a lightgreen background:

<TextView
    android:layout_width="match_parent"
    android:layout_height="20dp"
    android:background="@color/lightgreen"
/>

Basically I am using this TextView as a custom "overview/progressbar". Thus, I want to change the background in the different colors.

For example:

0%-25% of width = light green color

25%-66% of width = yellow color

66%-100% of width = red color

So instead looking like this:

It should look like this:

Is there any good solution doing this?

I've tried using different Segment ProgressBar libraries, however none of them had the option to set the percentage times of the color "dividers"

Does text view contain text? Or is it just a background color? — Mr.Droid, Jan 16 '22 at 17:06
Can you use LinearLayout with weights for 4 children? It would be faster. You could also use xml to declare three shape colors. — deadfish, Jan 16 '22 at 22:37
Maybe [this](https://stackoverflow.com/a/64444959/6287910) will help from a previous answer of mine. — Cheticamp, Jan 17 '22 at 04:04

score 1 · Accepted Answer · answered Jan 17 '22 at 19:53

You can do this using the ClipDrawable. Create a layer-list (LayerDrawable) with the list of progress layers like:

progress_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <clip android:drawable="@color/red" />
    </item>
    <item>
        <clip android:drawable="@color/yellow" />
    </item>
    <item>
        <clip android:drawable="@color/green" />
    </item>
</layer-list>

and use it as the background of a TextView.

<TextView
    android:id="@+id/progress_text_view"
    android:layout_width="match_parent"
    android:layout_height="20dp"
    android:background="@drawable/progress_bg" />

To apply progress values:

private static final int MAX_LEVEL = 10_000;
private static final float[] LEVELS_PCT = new float[]{.25f, .66f, 1f};
//
final LayerDrawable progressBg = (LayerDrawable) progressTextView.getBackground();
for (int index = 0, count = LEVELS_PCT.length; index < count; index++) {
    progressBg.getDrawable(count - 1 - index)
            .setLevel((int) (MAX_LEVEL * LEVELS_PCT[index]));
}

score 0 · Answer 2 · answered Jan 16 '22 at 16:20

0

Try this method:

//Get the percentage ProgressBar and then apply the command to the text
float x = LoadingProgress.getProgress() ;
        

if (x > 0.2 && x < 0.6){
                MyTextView.setTextColor(getResources().getColor(R.color.colorGreen));
            }
            else if (x > 0.7)
            {
                MyTextView.setTextColor(getResources().getColor(R.color.colorYellow));
            } else {
                MyTextView.setTextColor(getResources().getColor(R.color.colorRed));
            }

Hope this solution helps you

answered Jan 16 '22 at 16:20

Amin Alhossein

53
12

1)That changes the textcolor, not the background color. And 2) it only shows one color at a time and not three – Savan Luffy Jan 16 '22 at 16:21
Do you want to change only the background color of the progress bar and the splitting of colors? – Amin Alhossein Jan 16 '22 at 16:23
https://stackoverflow.com/questions/16893209/how-to-customize-a-progress-bar-in-android?rq=1 – Amin Alhossein Jan 16 '22 at 16:25
1

Here are some answers for how to create a custom progress bar, you can control the programming file a little bit to get the desired result – Amin Alhossein Jan 16 '22 at 16:25

Change TextView background based on width percentage

2 Answers2