Texts style of EditText - Underline on ZigZag

2

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

print("Destaque")

The word print will be highlighted.

But until that's fine, 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 it to be more or less underline and color so much that I choose it.

I'm doing some sort of code editor.

    
asked by anonymous 09.11.2017 / 22:35

3 answers

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 this:

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

    
11.11.2017 / 02:38
0

Spell Check , I'm pretty sure this should be enabled by default , however you can "try" :

 editText.setInputType(InputType.TYPE_TEXT_FLAG_AUTO_CORRECT);

I still believe that you may have disabled (or standard) spellcheck on your Android system (emulator or cell phone), so to enable this try (the path may vary depending on the Android version):

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

DisablespellCheck

Anextratip,soifsomeonewantstodisableit,setittoEditTextthis:

android:inputType="textNoSuggestions"

Or via code:

 editText.setInputType(InputType.TYPE_TEXT_FLAG_NO_SUGGESTIONS);
    
10.11.2017 / 17:31
-1

Use regex with replace, as I'm not sure what kind of editor to use I made a basic example that works with "$ test" and "test var":

EXAMPLE regex click here to view

Example HTML:

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

Example Js:

$("#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);
});
    
10.11.2017 / 16:11