javaandroidspannablespannablestringbuilderandroid-text-color

Use spannable in a loop for a mutable text


So my app should compare the user's input with a random quote provided by the app, and I want to color the correct word with green and the wrong one with red. the problem is that I don't know how to do it with Spannable in a loop, and especially that the text is always changing.

This is the code:

if(quoteWords.length == resultWords.length){
                    
     for(int i = 0; i < quoteWords.length; i++) {
                        
         if (quoteWords[i].equals(resultWords[i])) { 
             //color the word with green               
         } else {
             //color the word with red               
         }
     }
                    
}

And this is what I tried:

    if(quoteWords.length == resultWords.length){
         SpannableStringBuilder fullStyledSentence = new SpannableStringBuilder();
         ForegroundColorSpan correctColor = new ForegroundColorSpan(Color.GREEN);
         ForegroundColorSpan wrongColor = new ForegroundColorSpan(Color.RED);
         int start;
    
         for(int i = 0; i < quoteWords.length; i++) {
              start = fullStyledSentence.length(); //get length of current SpannableString
              fullStyledSentence.append(quoteWords[i]);
    
              if (quoteWords[i].equals(resultWords[i])) { //color each word using its length
                    fullStyledSentence.setSpan(correctColor, start, start + quoteWords[i].length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
                    Log.i("AzureSpeechRecognition", "word number " + i + "is correct");
                    } else {
                       fullStyledSentence.setSpan(wrongColor, start, start + quoteWords[i].length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
                       Log.i("AzureSpeechRecognition", "word number " + i + "is wrong");
                    }
    
                       mQuoteBodyTextView.setText(null); //to delete repeatedly appended text
                       mQuoteBodyTextView.append(fullStyledSentence + " ");
              }
                        
     }

But the resulted text isn't colored and they are glued together with no spaces.


Solution

  • It seems that ForegroundColorSpan/BackgroundColorSpan are not reusable and each time we should instantiate a new one. Anyway, I think it makes sense better to write it using SpannableString like the following:

    public class MainActivity extends AppCompatActivity {
    
        // replacing all whitespaces with single space
        private String quote = "I want to color the correct word with green".replaceAll("\\s+", " ");
        private String result = "I want to color the right word with blue".replaceAll("\\s+", " ");
    
        @Override
        protected void onCreate(@Nullable Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
            String[] quoteWords = quote.split("\\s");
            String[] resultWords = result.split("\\s");
    
            SpannableString spannableQuote = new SpannableString(quote);
    
            if (quoteWords.length == resultWords.length) {
                int index = 0;
                for (int i = 0; i < quoteWords.length; i++) {
                    spannableQuote.setSpan(
                        new BackgroundColorSpan(quoteWords[i].equals(resultWords[i]) ? Color.GREEN : Color.RED),
                        index,
                        index + quoteWords[i].length(),
                        SpannableString.SPAN_INCLUSIVE_INCLUSIVE
                    );
                    index += quoteWords[i].length() + 1; // 1 for the space between words
                }
            }
    
            ((TextView) findViewById(R.id.textView1)).setText(result);
            ((TextView) findViewById(R.id.textView2)).setText(spannableQuote);
        }
    }
    

    Result: