Question

I know Spannable can help me color any specific letters in a textview. However, is it possible to color 1/2 or 1/3 of a letter. I wanted to color text within a textview by percentage instead of by letter. Thanks for reading, and please let me know if you had some idea or solution to this.

thanks

Answer 1

It may be easier to use Spanned thought android.text.HTML

So something like this:

Spanned text = HTML.fromHtml("Sp<span style=\"color:red\">ann</span>able");
textView.setText(text);

It can also be used to add images, but it a bit more complicated.

---

UPDATE

I re-read your question and thought of a solution. You could create a custom view that has two textViews in a FrameLayout (on top of each other) and then resize the one on the top relative to the percentage. Something like this:

import android.content.Context;
import android.content.res.ColorStateList;
import android.util.AttributeSet;
import android.widget.FrameLayout;
import android.widget.TextView;

public class ProgressTextView extends FrameLayout {

    private TextView backgroundTextView;
    private TextView foregroundTextView;
    private CharSequence text;

    private ProgressTextView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init(context, attrs);
    }

    private ProgressTextView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context, attrs);
    }

    private ProgressTextView(Context context) {
        super(context);
        init(context, null);
    }

    private void init(Context context, AttributeSet attrs) {
        backgroundTextView = new TextView(context);
        foregroundTextView = new TextView(context);
        addView(backgroundTextView);
        addView(foregroundTextView);
        // process custom attributeSet from xml to set the colours
    }

    public void setBackgroundTextColor(int color) {
        backgroundTextView.setTextColor(color);
    }

    public void setBackgroundTextColor(ColorStateList colors) {
        backgroundTextView.setTextColor(colors);
    }

    public void setForegroundTextColor(int color) {
        backgroundTextView.setTextColor(color);
    }

    public void setForegroundTextColor(ColorStateList colors) {
        backgroundTextView.setTextColor(colors);
    }

    public void setPercentage(float per) {
        foregroundTextView.setWidth((((float) backgroundTextView.getWidth()) / 100f) * per);
    }

    public void setText(CharSequence text) {
        this.text = text;
        backgroundTextView.setText(text);
        foregroundTextView.setText(text);
    }

    public CharSequence getText() {
        return text;
    }

}

PS: not tested 😉 just an idea

---

MORE UPDATE

Apparently, with this method the text gets shortened instead of just cropped as I expected. The maybe on creation of the foregroundTextView you could do this:

foregroundTextView = new TextView(context) {

    @Override
    protected void onDraw (Canvas canvas) {
        super.onDraw(canvas);
        Rect bounds = canvas.getClipBounds();
        bounds.right (((float) bounds.right) / 100.0f) * per;
        canvas.clipRect(bounds);
    }
};

And also add the per variable and modify setPercentage(float per) to be just a setter:

private float per = 0.0f;

public void setPercentage(float per) {
    this.per = per;
}

Hope this one works 😉