How to dynamically change part of string's color with SpannableBuilder

Question

I am formatting strings dynamically, as the following example from Android documentation:

<string name="welcome_messages">Hello, %1$s! You have %2$d new messages.</string>

Then I set values like this:

var text = getString(R.string.welcome_messages, username, mailCount)

How can I set the green color for username and red for mailCount?

I need it to work for multiple locales, too. So I can't just hardcoded positions myself.

Previously I split this string into 4 parts and then could easily use SpannableBuilder to change colors.

HTML and CDATA are not appropriate. We need to keep the same strings for Android and iOS.

Answer 1

You can use SpannableString and setSpan based on your requirement.

<string name="welcome_message">Hello, %1$s! You have %2$d new messages.</string>

---

void setSpannableTextWithColor(TextView view, int resourceId, String username, int userColor, int messageCount, int countColor) {
    String fulltext = getString(resourceId, username, messageCount);

    view.setText(fulltext, TextView.BufferType.SPANNABLE);
    Spannable str = (Spannable) view.getText();

    int usernameIndex = fulltext.indexOf(username);
    str.setSpan(new ForegroundColorSpan(userColor), usernameIndex, usernameIndex + username.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);

    int countIndex = fulltext.indexOf(String.valueOf(messageCount));
    str.setSpan(new ForegroundColorSpan(countColor), countIndex, countIndex + String.valueOf(messageCount).length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
} 

---

setSpannableTextWithColor(findViewById(R.id.text_view1), R.string.welcome_message, "Viktor Vostrikov", Color.GREEN, 122, Color.RED);
setSpannableTextWithColor(findViewById(R.id.text_view2), R.string.welcome_message, "Виктор Востриков", Color.GREEN, 2, Color.RED);
setSpannableTextWithColor(findViewById(R.id.text_view3), R.string.welcome_message, "فيكتور فوستريكوف", Color.GREEN, 2000, Color.RED);

Output: