incorrect words with Spannable

Question

I would like to have a custom Spannable like below picture :

I would like to create a Zigzag line under a incorrect words.

How can I do?

Answer 1

You most definitely want to do some checking on this implementation I hacked together. But still. It's in hopes it still manages to give some basis for implementing such a feature properly.

Actual span class, which, surprisingly ,doesn't replace anything. Only hopes that it really is possible to draw the original span text as-is given two lines of code. Plus additionally draws the 'underline'.

private class ErrorSpan extends ReplacementSpan {

    private Paint errorPaint;

    public ErrorSpan() {
        errorPaint = new Paint();
        errorPaint.setColor(Color.RED);
    }

    @Override
    public int getSize(Paint paint, CharSequence text, int start, int end,
            FontMetricsInt fm) {
        return (int)paint.measureText(text, start, end);
    }

    @Override
    public void draw(Canvas canvas, CharSequence text, int start, int end,
            float x, int top, int y, int bottom, Paint paint) {
        // Render the red zigzag lines below text
        float width = paint.measureText(text, start, end);
        canvas.save();
        canvas.clipRect(x, bottom - 5, x + width, bottom);
        for (float lineX = x; lineX < x + width; lineX += 10) {
            canvas.drawLine(lineX, bottom - 5, lineX + 5, bottom, errorPaint);
            canvas.drawLine(lineX + 5, bottom, lineX + 10, bottom - 5, errorPaint);
        }
        canvas.restore();
        // Render the span text as-is
        canvas.drawText(text, start, end, x, y, paint);
    }    
};

Pardon me for using magic numbers in line drawing loop (which quite likely could be way more effective too) - but hopefully it manages to give good enough basis for creating production quality implementation at the end.

And usage would be somewhere around:

TextView tv = (TextView)findViewById(R.id.textview);
Spannable spannable = Spannable.Factory.getInstance()
                         .newSpannable("testtest\ntesttest");
spannable.setSpan(new ErrorSpan(), 4, 8, 0);
spannable.setSpan(new ErrorSpan(), 9, 13, 0);
tv.setText(spannable);