Edittext style texts - Underline in Zigzag

Question

I have an edittext that when it detects a specific word it highlights it for example:

print("Destaque")

The word print will be deployed.

Only so far so good but I want every time it detects a variable or a word that is wrong according to a set of words recognized by my app (a code editor) it does the following:

Explanation: I want to get more or less these underline and the color does not matter I choose it.

I’m making a kind of code editor.

Answer 1

Use a Spannablestring and apply a Replacementspan:

public class ZigZagUnderlineSpan extends ReplacementSpan{
    private Paint linePaint;
    private int textMessureWidth;
    private float lineOffsetFromTextBottom = 0;
    private float lineSpaceX = 6;
    private float lineSpaceY = 6;

    public ZigZagUnderlineSpan(){
        linePaint = new Paint();
        linePaint.setColor(Color.RED);
        linePaint.setStyle(Paint.Style.STROKE);
        linePaint.setStrokeWidth(2);
    }

    @Override
    public int getSize(Paint paint, CharSequence text, int start, int end, Paint.FontMetricsInt fm) {
        textMessureWidth = (int)paint.measureText(text, start, end);
        Paint.FontMetricsInt metrics = paint.getFontMetricsInt();
        if (fm != null) {
            fm.ascent = metrics.ascent;
            fm.descent = metrics.descent;
            fm.top = metrics.top;
            fm.bottom = metrics.bottom;
        }
        return textMessureWidth;
    }

    @Override
    public void draw(Canvas canvas, CharSequence text, int start, int end, float x, int top, int y, int bottom, Paint paint) {

        canvas.drawText(text, start, end, x, y, paint);

        float lineY = y + lineOffsetFromTextBottom;
        float xLeft = paint.measureText(text, 0, start);

        Path path = new Path();
        path.moveTo(xLeft, lineY);

        float vertexX = xLeft;
        float vertexY = lineY;
        for(int n = 0; n < textMessureWidth / lineSpaceX; n++){
            path.lineTo(vertexX, vertexY);
            vertexX += lineSpaceX;
            if (n % 2 == 0) {
                vertexY = lineY + lineSpaceY;
            }else{
                vertexY = lineY;
            }
        }
        path.lineTo(textMessureWidth, vertexY);
        canvas.drawPath(path, linePaint);
    }
}

Use like this:

SpannableString spannableString = new SpannableString("Texto errado");
spannableString.setSpan(new ZigZagUnderlineSpan(),0,spannableString.length(),SpannableString.SPAN_INCLUSIVE_INCLUSIVE);
textView.setText(spannableString);

Answer 2

This you wish is called Spell Check, I’m almost certain this should be enabled by default, however may "try to":

 editText.setInputType(InputType.TYPE_TEXT_FLAG_AUTO_CORRECT);

I still believe that maybe you have disabled (or is default) the spellcheck on your Android system (emulator or mobile), so to enable try this (the path may vary depending on the version of Android):

Configure > Language and input then select the checkbox Spell checker:

---

Disable spellCheck

One extra tip, in case someone wants to disable is set in the EditText this:

android:inputType="textNoSuggestions"

Or via code:

 editText.setInputType(InputType.TYPE_TEXT_FLAG_NO_SUGGESTIONS);

Answer 3

Use regex with replace, as I’m not sure what kind of editor you use I did a basic example that says "$test" and "var test":

EXAMPLE Regex click here to see

HTML from the example:

<textarea id="texto" rows="10" style="width: 100%;"></textarea>
<div id="editor" style="width:100%; height:800px;background: #eee;"></div>

Js do Exemplo:

$("#editor").click(function() {
  $("#texto").focus();
});
$("#texto").keyup(function() {
  var texto = $("#texto").val();
  var sub = texto.replace(/(\$|(var))/g,'<u style="color: red;">$1</u>');
  $("#editor").html(sub);
});