How to use spannable strings in addTextChangedListener to change color of editText substring?

Question

I am trying to implement something similar to a code editor where keywords are automatically highlighted. I am going to have a string array and I want to change the color and font of the editText string when the user types the text and it matches a string from the string array. I am using the addTextChangeListener but the text of the whole editText changes. I want just the matched word to be highlighted.I understand I have to use spannable strings but the code crashes. Can anyone help me with the correct usage of spannable strings with addTextChangedListener()? Here is my code:

editText.addTextChangedListener(new TextWatcher() {
            private SpannableString spanString;
            private ForegroundColorSpan span;
            @Override
            public void beforeTextChanged(CharSequence s, int start, int count, int after) {
            }
            @Override
            public void onTextChanged(CharSequence s, int start, int before, int count) {
                spanString = new SpannableString(s);
                span = new ForegroundColorSpan(Color.YELLOW);
                spanString.setSpan(span, start, start + count, 0);
            }
            @Override
            public void afterTextChanged(Editable s) {
                int beginIdx = spanString.getSpanStart(s);
                int endIdx = spanString.getSpanEnd(s);

                if(s.subSequence(beginIdx, endIdx).equals("for"))
                {
                        editText.setText(spanString, EditText.BufferType.SPANNABLE);
                }
                spanString.removeSpan(span);
                span = null;
                spanString = null;
            }
        });

Answer 1

ms1996 I know you are trying to create IDE. To highlight the syntax of codes codes you should use spannable String or use any library to get it easier. Moreover you can try this code:

                    I created simple code for highlight syntax in EditText. First i created a HashMap to store keywords and colors.

                    Map<String,Integer> map = new HashMap<>();
                    map.put("public",Color.CYAN);
                    map.put("void", Color.BLUE);
                    map.put("String",Color.RED);

Then I added a TextWatcher for the EditText. In afterTextChanged method I used following code to set colors to each keyword,

                    ........
                    @Override
                    public void afterTextChanged(Editable editable) {
                        String string = editable.toString();
                        String[] split = string.split("\\s");
                        for(int i = 0 ; i < split.length ; i++){
                            String s = split[i];
                            if(map.containsKey(s)){
                                int index = string.indexOf(s);
                                int color = map.get(s);
                                editable.setSpan(new ForegroundColorSpan(color),
                                        index,
                                        index + s.length(),
                                        Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
                            }

                        }
                    }

Answer 2

By calling editText.setTextColor(getResources().getColor(R.color.indigo)); you are setting the color for the whole editText.

You have to set the color of the span of your keyword (in this case "for" keyword). To do this, you have to know the position of the keyword in the string (starting and ending index of the keyword). Then it can be set like this.

    editText.addTextChangedListener(new TextWatcher() {
        @Override
        public void beforeTextChanged(CharSequence s, int start, int count, int after) {
        }
        @Override
        public void onTextChanged(CharSequence s, int start, int before, int count) {
        }
        @Override
        public void afterTextChanged(Editable s) {
            if (s.toString().contains("for"))
            {
                Spannable wordToSpan = new SpannableString("for");
                wordToSpan.setSpan(new ForegroundColorSpan(ContextCompat.getColor(getContext(), R.color.indigo), START_INDEX_OF_THE_KEYWORD_IN_THE_STRING, END_INDEX_OF_THE_KEYWORD_IN_THE_STRING, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
                editText.setText(wordToSpan);
            }
        }
    });

Since setting a span requires calling a setText also be aware that you need to protect against infinite loop...

Answer 3

Try this, ask for any query. You can change color any text, just replace the "for" with desired text and replace the color -

editText.addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence s, int start, int count, int after) {
            }
            @Override
            public void onTextChanged(CharSequence s, int start, int before, int count) {
            }

            @Override
            public void afterTextChanged(Editable s) {
                String string = s.toString();

                if (string.contains("for")) {
                    //Count to change color of all the "for"
        int count = (string.length() - string.replaceAll("for", "").length())/3;

                    //You can make these global
                    int start = 0;
                    int beginIdx = 0;
                    int endIdx = 0;
                    for (int i = 0; i < count; i++) {
                        beginIdx = string.indexOf("for", start);
                        endIdx = beginIdx + 3;
                        start = endIdx;
                        if (beginIdx > 0)
                            s.setSpan(new ForegroundColorSpan(Color.GREEN),//ContextCompat.getColor(getContext(), R.color.indigo)
                                    beginIdx, endIdx, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);

                    }

                }
            }
        });