CODEWITHSUNDEEP
androidandroid-layoutuser-interfaceanimationandroid-progressbar
Mr.Me
Mr.Me

Reputation: 9286

TextView as a progressbar with textcolor minipulation?

I'm working on improving my app's UI. And in the design I'm using I have a TextView that will act as a progress bar at certain time. The ruslt should look like this :

enter image description here

The thing is that parts of text will change their color while the progress is changing

I looked into spannablestring in android it would work if I can find the letters that are covered by the progress ( but I don't think this would be easy/accurate)

What I'm planning todo now is to use the following:

Is there a better approach?

Upvotes: 5

Views: 3512

Answers (3)

Danilo
Danilo

Reputation: 1084

I know this is an old question but I'm posting this because it might help someone else looking into similar situations hopefully it'll help someone going through this now. Here's an example

1 2 3

My solution basically is drawing in the canvas using drawText. The trick here is that you draw two texts, one inside the bar bounds and one inside the view bounds and using the following Z-index order (according to example used):

  • Text (white)
  • Red bar
  • Text (black)
  • view background

I've made an example on how to implement this, in this sample/lib I used a custom imageview to do it. Feel free to use it as anyway you like it: https://github.com/danilodanicomendes/InvertedTextProgressBar

Upvotes: 3

Zielony
Zielony

Reputation: 16537

Much better approach would require you to override TextView class. You can use clipping, to split the TextView and draw two parts in different colors.

TextView tv = new TextView(this){
    @Override
    public void draw(Canvas canvas) {
        int color1 = Color.WHITE;
        int color2 = Color.GREEN;

        canvas.save();
        setTextColor(color1);
        setBackgroundColor(color2);
        canvas.clipRect(new Rect(0, 0, (int)(getWidth() * percent), getHeight()));
        super.draw(canvas);
        canvas.restore();

        canvas.save();
        setTextColor(color2);
        setBackgroundColor(color1);
        canvas.clipRect(new Rect((int)(getWidth() * percent), 0, getWidth(), getHeight()));
        super.draw(canvas);
        canvas.restore();
    }  
};

I hope you get the point

Upvotes: 9

Mark
Mark

Reputation: 5566

The easiest solution would be to use ProgressBar and a TextView on a Relative Layout. You provide your own style for both and that's it. There is no point in trying to do it on a TextView when ProgressBar has all what you need. Your layout would look like that:

<RelativeLayout android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <ProgressBar android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"/>

        <TextView android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Doing something"
            android:gravity="center"
            android:layout_centerVertical="true"/>          
</RelativeLayout>

You just need to play with widths and heights as you want them :)

Upvotes: 1

Related Questions