How to highlight Multiple words in EditText?

Question

Currently I'm developing Spelling & Grammar checking app. It has EditText where user can input text & one button called "Check Text " upon click on button app will call LanguageTool API to check text & returns JSON response with result .

Here is screenshot of app :

Here is code which I have tried so far for highlighting multiple words but this code only highlights last word from array which I have created:

for (int i = 0; i < errorStrings.size(); i++) {

// Here textToCheck is EditText & errorStrings is ArrayList of type WrongString class which i have created to hold Error string , offset & length.

Spannable wordtoSpan = new SpannableString(texttoSend);
wordtoSpan.setSpan(new BackgroundColorSpan(Color.BLUE),errorStrings.get(i).getOffset(),
                                        (errorStrings.get(i).getOffset()+errorStrings.get(i).getLength()), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
                            textToCheck.setText(wordtoSpan);
}

Hi @DeepShah, any suggestions on replacing tapped word with custom words in edit text ? I am doing same functionality any suggestions would be great help. — LOKESH KUMAR PEDDA, Mar 14 '19 at 10:08

Khemraj Sharma · Accepted Answer · 2018-05-11T17:21:48.560

I have wrote a simple method that allow you pass TextView (or child classes Button, Edittext etc.).

1. If you want to highlight a text like in find word in paragraph. You can use below method like.

setHighLightedText(yourTextView_Edittext_Button, "a");

Which gives you result like this.

    /**
     * use this method to highlight a text in TextView
     * @param tv TextView or Edittext or Button or child of TextView class
     * @param textToHighlight Text to highlight
     */
    public void setHighLightedText(TextView tv, String textToHighlight) {
        String tvt = tv.getText().toString();
        int ofe = tvt.indexOf(textToHighlight, 0);
        Spannable wordToSpan = new SpannableString(tv.getText());
        for (int ofs = 0; ofs < tvt.length() && ofe != -1; ofs = ofe + 1) {
            ofe = tvt.indexOf(textToHighlight, ofs);
            if (ofe == -1)
                break;
            else {
                wordToSpan.setSpan(new BackgroundColorSpan(0xFFFFFF00), ofe, ofe + textToHighlight.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
                tv.setText(wordToSpan, TextView.BufferType.SPANNABLE);
            }
        }
    }

2. If you want make clickable highlighted text (like click on terms & condition text) then use this code as below:

 setClickableHighLightedText(yourTextView_Edittext_Button, "go to settings", new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            // TODO: do your stuff here 
        }
    });

Which gives you result like

/**
 * use this method to set clickable highlighted a text in TextView
 *
 * @param tv              TextView or Edittext or Button or child of TextView class
 * @param textToHighlight Text to highlight
 */
public void setClickableHighLightedText(TextView tv, String textToHighlight, View.OnClickListener onClickListener) {
    String tvt = tv.getText().toString();
    int ofe = tvt.indexOf(textToHighlight, 0);
    ClickableSpan clickableSpan = new ClickableSpan() {
        @Override
        public void onClick(View textView) {
            if (onClickListener != null) onClickListener.onClick(textView);
        }

        @Override
        public void updateDrawState(TextPaint ds) {
            super.updateDrawState(ds);
            ds.setColor(0xff0000ff);
            ds.setUnderlineText(true);
        }
    };
    SpannableString wordToSpan = new SpannableString(tv.getText());
    for (int ofs = 0; ofs < tvt.length() && ofe != -1; ofs = ofe + 1) {
        ofe = tvt.indexOf(textToHighlight, ofs);
        if (ofe == -1)
            break;
        else {
            wordToSpan.setSpan(clickableSpan, ofe, ofe + textToHighlight.length(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
            tv.setText(wordToSpan, TextView.BufferType.SPANNABLE);
            tv.setMovementMethod(LinkMovementMethod.getInstance());
        }
    }
}

This is a workaround, you can customise spans according to your need. Some good tutorials Android text styles and one other

Hi @Khemu , any idea on replacing a tapped word with custom suggested words in edit text ? — Deep Shah, Sep 24 '17 at 16:59
Hi deep, I edited my answer with your requirement, Hope that helps. — Khemraj Sharma, Sep 25 '17 at 11:16

score 0 · Answer 2 · answered Sep 24 '17 at 13:18

0

Here you go -

  TextView myTV = (TextView)findViewById(R.id.textView1);
  String  textString = "StackOverFlow Rocks!!!"; 
  Spannable spanText = Spannable.Factory.getInstance().newSpannable(textString);
  spanText.setSpan(new BackgroundColorSpan(0xFFFFFF00), 14, 19, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
  myTV.setText(spanText);

Here is another post with similar question

answered Sep 24 '17 at 13:18

supro_96

570
6
14

@Deep Shah Why don't you store the error strings in a different list and highlight the errors separately? Can you post the code before the for loop also? It'll be more clear. I think the mistake is here `textToCheck.setSelection(errorStrings.get(i).getOffset(),(errorStrings.get(i).getOffset()+errorStrings.get(i).getLength())); ` Please post the image of output that you're receiving. – supro_96 Sep 24 '17 at 13:34
Hi , I have updated code . I would prefer to display errors in edittext instead of TextView so , they can edit immediately from there. – Deep Shah Sep 24 '17 at 13:46

How to highlight Multiple words in EditText?

2 Answers2

Linked