Set color of TextView span in Android

Question

Is it possible to set the color of just span of text in a TextView?

I would like to do something similar to the Twitter app, in which a part of the text is blue. See image below:

_{(source: twimg.com)}

Solution 1

Another answer would be very similar, but wouldn't need to set the text of the TextView twice

TextView TV = (TextView)findViewById(R.id.mytextview01);

Spannable wordtoSpan = new SpannableString("I know just how to whisper, And I know just how to cry,I know just where to find the answers");        

wordtoSpan.setSpan(new ForegroundColorSpan(Color.BLUE), 15, 30, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);

TV.setText(wordtoSpan);

Solution 2

Here is a little help function. Great for when you have multiple languages!

private void setColor(TextView view, String fulltext, String subtext, int color) {
    view.setText(fulltext, TextView.BufferType.SPANNABLE);
    Spannable str = (Spannable) view.getText();
    int i = fulltext.indexOf(subtext);
    str.setSpan(new ForegroundColorSpan(color), i, i + subtext.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
}

Solution 3

I always find visual examples helpful when trying to understand a new concept.

Background Color

SpannableString spannableString = new SpannableString("Hello World!");
BackgroundColorSpan backgroundSpan = new BackgroundColorSpan(Color.YELLOW);
spannableString.setSpan(backgroundSpan, 0, spannableString.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
textView.setText(spannableString);

Foreground Color

SpannableString spannableString = new SpannableString("Hello World!");
ForegroundColorSpan foregroundSpan = new ForegroundColorSpan(Color.RED);
spannableString.setSpan(foregroundSpan, 0, spannableString.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
textView.setText(spannableString);

Combination

SpannableString spannableString = new SpannableString("Hello World!");
ForegroundColorSpan foregroundSpan = new ForegroundColorSpan(Color.RED);
BackgroundColorSpan backgroundSpan = new BackgroundColorSpan(Color.YELLOW);
spannableString.setSpan(foregroundSpan, 0, 8, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
spannableString.setSpan(backgroundSpan, 3, spannableString.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
textView.setText(spannableString);

Further Study

• Explain the meaning of Span flags like SPAN_EXCLUSIVE_EXCLUSIVE
• Android Spanned, SpannedString, Spannable, SpannableString and CharSequence

Solution 4

If you want more control, you might want to check the TextPaint class. Here is how to use it:

final ClickableSpan clickableSpan = new ClickableSpan() {
    @Override
    public void onClick(final View textView) {
        //Your onClick code here
    }

    @Override
    public void updateDrawState(final TextPaint textPaint) {
        textPaint.setColor(yourContext.getResources().getColor(R.color.orange));
        textPaint.setUnderlineText(true);
    }
};

Solution 5

Set your TextView´s text spannable and define a ForegroundColorSpan for your text.

TextView textView = (TextView)findViewById(R.id.mytextview01);    
Spannable wordtoSpan = new SpannableString("I know just how to whisper, And I know just how to cry,I know just where to find the answers");          
wordtoSpan.setSpan(new ForegroundColorSpan(Color.BLUE), 15, 30, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);    
textView.setText(wordtoSpan);

View more solutions

Comments

[hpique]

Thanks! Is it possible to do this without assigning the text to the TextView first?

[hpique]

I didn't explain myself well. Let me rephrase. Are the first 3 lines necessary? Can't you create the Spannable object from the string directly?

[Jorgesys]

Nop, you have to store your TextView's text into a Buffer Spannable to change the foreground colour.

[Lukap]

I want to to the same thing with the color plus I want everything to be bold except the colored part, that part I want to be Italic , how can I do that ?

[Piotr]

Could you clarify how to use SpannableFactory? How "text" should look like?

[Rishabh Srivastava]

how to set click in the span?

[mostafa hashim]

but how can i change the color for multiple words i all text not one span?

[Ashraf Alshahawy]

@mostafahashim create multiple spans by repeating line 3 wordtoSpan.setSpan(new ForegroundColorSpan(Color.RED), 50, 80, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);

[MBH]

after creating the Spannable by the SpannableFactory, so how to use it?

[Eka putra]

getColor(int id) is deprecated on Android 6.0 Marshmallow (API 23) stackoverflow.com/questions/31590714/…

[Muhaiminur Rahman]

Nice Answer With Click Listener.

[Dmitrii Leonov]

Kotlin + Spannable String solution would look like this stackoverflow.com/questions/4032676/…

[Abu Nayem]

you don't like Hasina 🤣

[Ahsan Syed]

Thankyou so much buddy you make my day :*

[Suragch]

@GkMohammadEmon, That sounds like custom painting and not a simple background color. Check out Bezier curves.

[Gk Mohammad Emon]

Have you any good references or resources to about it? I need to add a curvey background of my notification action button. Thanks for your response

[Suragch]

@GkMohammadEmon, sorry I don't. It's been a while since I've done custom painting in Android since I moved on to Flutter.

[Oleksandr Bodashko]

Should be the best answer for Kotlin implementation.

[Mohd Sakib Syed]

One of the best solution ever !!!

[Vishal kumar singhvi]

Amazing implementation