What is the best way to colorize part of a letter?

Question

I want to achieve something like this:

The first thing that comes to mind is to draw the text on the canvas twice and cover the first text with a figure. But perhaps there is a better solution.

Answer 1

In one approach, it is used PorterDuffXfermodeto arrange a blue rectangle over text. You can expand TextViewand override onDraw()to draw a rectangle after the text has been drawn, and with the correct mode (I believe that XORis the one you want), it should achieve the desired effect. Something like that:

public class ProgressTextView extends TextView {

    private static final float MAX_PROGRESS = ...;

    private Paint mPaint;

    public ProgressTextView(Context context) {
        super(context);
        initPaint();
    }

    /* other constructor omitted, but do the same pattern in those */

    private void initPaint() {
        mPaint = new Paint();
        mPaint.setColor(...);
        mPaint.setXfermode(new PorterDuffXfermode(Mode.XOR));
        // note: you may also need the following line if hardware accel is available
        setLayerType(LAYER_TYPE_SOFTWARE, null);
    }

    @Override
    public void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        drawProgress(canvas);
    }

    private void drawProgress(Canvas canvas) {
        int w = getWidth() - getPaddingLeft() - getPaddingRight();
        int h = getHeight() - getPaddingTop() - getPaddingBottom();
        float progress = getProgress();
        float rectW = w * (progress / MAX_PROGRESS);

        int saveCount = canvas.save();
        canvas.translate(getPaddingLeft(), getPaddingTop());
        canvas.drawRect(0, 0, rectW, h, mPaint);
        canvas.restoreToCount(saveCount);
    }

    private float getProgress() {
        // TODO
    }
}

Additional Porter / Duff Composition Information: http://ssp.impulsetrain.com/porterduff.html

Answer 2

Android, - HTML- html-css . , , , , . , ( jsfiddle ):

function barWidth() {
    var barWidth = $('.progress-bar').width();
    $('.progress-fill-text').css('width',barWidth);
}
barWidth();
window.onresize = function() {
    barWidth();
}

.progress-bar {
    background:#ccc;
    color: #7d7d7d;
    padding:10px 0;
    width:100%;
    text-align:center;
    position:relative;
    font-size: 40px;
    font-family: 'Open Sans', sans-serif;
}

.progress-fill {
    background:#0095dd;
    color:#fff;
    width:47%;
    padding:10px 0;
    position:absolute;
    left:0;
    top:0;
    overflow:hidden;
}

.progress-fill-text {
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

<div class="progress-bar">
    <div class="progress-fill">
        <div class="progress-fill-text">37 UNITS</div>
    </div>
    37 UNITS
</div>

Hide result

http://jsfiddle.net/zkL29/56/