Change TextView background based on width percentage

Savan Luffy

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:

enter image description here
It should look like this:

enter image description here

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"

Akaki Kapanadze

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

enter image description here

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

css percentage based background

Percentage based height and width of jquery ui slider

Alignment of fixed width item in percentage based parent

progress bar changing color based on percentage width

CSS grid items based on minimum width and percentage

Clipping CSS linear gradient based on width percentage

Animate background based on width element

Apply background color to width based on content width

Change background color of histogram according to a percentage

Change the TextView value based on other TextView

Swift - TextView Heigth & Width change when typing

Reduce vector of structs based on percentage change

change selected columns based on regex to percentage

Efficient way to calculate percentage change based on criteria

How to change TextView's background color dynamically?

How to change textView properties from background thread

How to change the background color of a TextView inside of an ActionMode

custom TextView that can change background color

Change text Background color of Specific word in a TextView

How to change the resource background color of TextView?

Menu item selection does not change textview background

multiple colors on progress bar with css or jquery based on width percentage

Automatically set height based on percentage width in flex display

html increase elements width based on the percentage of browser size increased

Scale Background Image Height Based on Width

Change color based on background color

Change text colour based on background

android change textview text based on http request

Calculate percentage between inputs then change background colouraccourding to result percentage using Jquery