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:

score 495 · Accepted Answer · edited Aug 23 '13 at 01:01

495

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);

edited Aug 23 '13 at 01:01

Martin Marconcini

26,875
19
106
144

answered Aug 18 '10 at 16:40

DanO

10,230
4
41
34

1

but how can i change the color for multiple words i all text not one span? – mostafa hashim Nov 08 '15 at 18:33
2

@mostafahashim create multiple spans by repeating line 3 wordtoSpan.setSpan(new ForegroundColorSpan(Color.RED), 50, 80, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE); – Ashraf Alshahawy Jan 05 '16 at 07:54
Kotlin + Spannable String solution would look like this https://stackoverflow.com/questions/4032676/how-can-i-change-the-color-of-a-part-of-a-textview/59510004#59510004 – Dmitrii Leonov Jan 01 '20 at 04:29

score 92 · Answer 2 · edited Jan 18 '16 at 14:28

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);
}

score 51 · Answer 3 · edited May 23 '17 at 12:10

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

@GkMohammadEmon, That sounds like custom painting and not a simple background color. Check out Bezier curves. — Suragch, May 03 '21 at 08:52
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 — Gk Mohammad Emon, May 03 '21 at 08:55
@GkMohammadEmon, sorry I don't. It's been a while since I've done custom painting in Android since I moved on to Flutter. — Suragch, May 03 '21 at 09:16

score 33 · Answer 4 · edited May 01 '15 at 18:33

33

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);
    }
};

edited May 01 '15 at 18:33

Ziem

6,579
8
53
86

answered Feb 27 '14 at 22:06

Bitcoin Cash - ADA enthusiast

11,457
16
83
103

getColor(int id) is deprecated on Android 6.0 Marshmallow (API 23) https://stackoverflow.com/questions/31590714/getcolorint-id-deprecated-on-android-6-0-marshmallow-api-23 – Eka putra Dec 06 '17 at 05:04
Nice Answer With Click Listener. – Muhaiminur Rahman Jun 12 '19 at 11:45

score 23 · Answer 5 · edited Dec 14 '17 at 13:53

23

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);

edited Dec 14 '17 at 13:53

Suragch

484,302
314
1,365
1,393

answered Jul 19 '10 at 16:30

Jorgesys

124,308
23
334
268

Thanks! Is it possible to do this without assigning the text to the TextView first? – hpique Jul 19 '10 at 17:02
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? – hpique Jul 19 '10 at 21:18
Nop, you have to store your TextView's text into a Buffer Spannable to change the foreground colour. – Jorgesys Jul 20 '10 at 00:47
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 ? – Lukap Jul 02 '11 at 16:34
1

how to set click in the span? – Rishabh Srivastava Aug 07 '15 at 08:54

score 15 · Answer 6 · answered Aug 09 '12 at 16:47

Another way that could be used in some situations is to set the link color in the properties of the view that is taking the Spannable.

If your Spannable is going to be used in a TextView, for example, you can set the link color in the XML like this:

<TextView
    android:id="@+id/myTextView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:textColorLink="@color/your_color"
</TextView>

You can also set it in the code with:

TextView tv = (TextView) findViewById(R.id.myTextView);
tv.setLinkTextColor(your_color);

Ivan Wooll · Answer 7 · 2018-11-30T16:50:20.453

11

Here's a Kotlin Extension Function I have for this

    fun TextView.setColouredSpan(word: String, color: Int) {
        val spannableString = SpannableString(text)
        val start = text.indexOf(word)
        val end = text.indexOf(word) + word.length
        try {
            spannableString.setSpan(ForegroundColorSpan(color), start, end,Spannable.SPAN_EXCLUSIVE_EXCLUSIVE)
            text = spannableString
        } catch (e: IndexOutOfBoundsException) {
         println("'$word' was not not found in TextView text")
    }
}

Use it after you have set your text to the TextView like so

private val blueberry by lazy { getColor(R.color.blueberry) }

textViewTip.setColouredSpan("Warning", blueberry)

edited Nov 30 '18 at 16:50

answered Nov 27 '18 at 10:50

Ivan Wooll

4,145
3
23
34

Thankyou so much buddy you make my day :* – Ahsan Syed Mar 19 '21 at 15:15
Should be the best answer for Kotlin implementation. – Oleksandr Bodashko Jun 08 '21 at 11:38
Amazing implementation – Vishal kumar singhvi Feb 11 '22 at 09:19
You can simplify by writing: `val end = start + word.length`. – CoolMind Dec 13 '22 at 11:55

Ahamadullah Saikat · Answer 8 · 2018-12-09T08:24:40.850

String text = "I don't like Hasina.";
textView.setText(spannableString(text, 8, 14));

private SpannableString spannableString(String text, int start, int end) {
    SpannableString spannableString = new SpannableString(text);
    ColorStateList redColor = new ColorStateList(new int[][]{new int[]{}}, new int[]{0xffa10901});
    TextAppearanceSpan highlightSpan = new TextAppearanceSpan(null, Typeface.BOLD, -1, redColor, null);

    spannableString.setSpan(highlightSpan, start, end, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
    spannableString.setSpan(new BackgroundColorSpan(0xFFFCFF48), start, end, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
    spannableString.setSpan(new RelativeSizeSpan(1.5f), start, end, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);

    return spannableString;
}

Output:

Hiren Patel · Answer 9 · 2016-05-23T10:34:25.537

Set Color on Text by passing String and color:

private String getColoredSpanned(String text, String color) {
  String input = "<font color=" + color + ">" + text + "</font>";
  return input;
}

Set text on TextView / Button / EditText etc by calling below code:

TextView:

TextView txtView = (TextView)findViewById(R.id.txtView);

Get Colored String:

String name = getColoredSpanned("Hiren", "#800000");

Set Text on TextView:

txtView.setText(Html.fromHtml(name));

Done

score 6 · Answer 10 · answered Aug 15 '18 at 04:21

Just to add to the accepted answer, as all the answers seem to talk about android.graphics.Color only: what if the color I want is defined in res/values/colors.xml?

For example, consider Material Design colors defined in colors.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="md_blue_500">#2196F3</color>
</resources>

(android_material_design_colours.xml is your best friend)

Then use ContextCompat.getColor(getContext(), R.color.md_blue_500) where you would use Color.BLUE, so that:

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

becomes:

wordtoSpan.setSpan(new ForegroundColorSpan(ContextCompat.getColor(getContext(), R.color.md_blue_500)), 15, 30, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);

Where I found that:

Working with spans in Android – Michael Spitsin – Medium

score 6 · Answer 11 · answered May 25 '21 at 05:22

Using kotlin-ktx, you can achieve it easily

        bindView?.oneTimePasswordTitle?.text = buildSpannedString {
        append("One Time Password ")
        inSpans(
            ForegroundColorSpan(ContextCompat.getColor(bindView?.oneTimePasswordTitle?.context!!,R.color.colorPrimaryText))
        ){
            append(" (As Registered Email)")
        }

    }

score 6 · Answer 12 · answered Dec 13 '11 at 07:58

6

There's a factory for creating the Spannable, and avoid the cast, like this:

Spannable span = Spannable.Factory.getInstance().newSpannable("text");

answered Dec 13 '11 at 07:58

Thomas Emil Hansen

69
1
1

1

Could you clarify how to use SpannableFactory? How "text" should look like? – Piotr Oct 03 '12 at 10:53
after creating the Spannable by the SpannableFactory, so how to use it? – MBH Sep 22 '16 at 11:42

score 3 · Answer 13 · answered Apr 21 '20 at 09:01

Some answers here aren't up to date. Because, you will (in most of cases) add a custom clic action on your link.

Besides, as provided by the documentation help, your spanned string link color will have a default one. "The default link color is the theme's accent color or android:textColorLink if this attribute is defined in the theme".

Here is the way to do it safely.

 private class CustomClickableSpan extends ClickableSpan {

    private int color = -1;

    public CustomClickableSpan(){
        super();
        if(getContext() != null) {
            color = ContextCompat.getColor(getContext(), R.color.colorPrimaryDark);
        }
    }

    @Override
    public void updateDrawState(@NonNull TextPaint ds) {
        ds.setColor(color != -1 ? color : ds.linkColor);
        ds.setUnderlineText(true);
    }

    @Override
    public void onClick(@NonNull View widget) {
    }
}

Then to use it.

   String text = "my text with action";
    hideText= new SpannableString(text);
    hideText.setSpan(new CustomClickableSpan(){

        @Override
        public void onClick(@NonNull View widget) {
            // your action here !
        }

    }, 0, text.length(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
    yourtextview.setText(hideText);
    // don't forget this ! or this will not work !
    yourtextview.setMovementMethod(LinkMovementMethod.getInstance());

Hope this will strongly help !

score 1 · Answer 14 · edited Nov 06 '17 at 10:44

create textview in ur layout

paste this code in ur MainActivity

TextView textview=(TextView)findViewById(R.id.textviewid);
Spannable spannable=new SpannableString("Hello my name is sunil");
spannable.setSpan(new ForegroundColorSpan(Color.BLUE), 0, 5, 
Spannable.SPAN_INCLUSIVE_EXCLUSIVE);
textview.setText(spannable);
//Note:- the 0,5 is the size of colour which u want to give the strring
//0,5 means it give colour to starting from h and ending with space i.e.(hello), if you want to change size and colour u can easily

score 1 · Answer 15 · answered Mar 13 '20 at 11:40

Below works perfectly for me

    tvPrivacyPolicy = (TextView) findViewById(R.id.tvPrivacyPolicy);
    String originalText = (String)tvPrivacyPolicy.getText();
    int startPosition = 15;
    int endPosition = 31;

    SpannableString spannableStr = new SpannableString(originalText);
    UnderlineSpan underlineSpan = new UnderlineSpan();
    spannableStr.setSpan(underlineSpan, startPosition, endPosition, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);

    ForegroundColorSpan backgroundColorSpan = new ForegroundColorSpan(Color.BLUE);
    spannableStr.setSpan(backgroundColorSpan, startPosition, endPosition, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);

    StyleSpan styleSpanItalic  = new StyleSpan(Typeface.BOLD);

    spannableStr.setSpan(styleSpanItalic, startPosition, endPosition, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);

    tvPrivacyPolicy.setText(spannableStr);

Output for above code

Bhaven Shah · Answer 16 · 2022-04-21T13:18:01.820

I got the same issue.
@Dano's answer is absolutely correct. But it doesn't work for me.
After that, I found the issue I have added ClickableSpan. So it will change my color with another color (accent color)

Issue

SpannableStringBuilder will not change color and undline when you add a ClickableSpan after ForegroundColorSpan or UnderlineSpan.

Solution

1. With ClickableSpan

You can Override the updateDrawState method inside ClickableSpan.
In the updateDrawState method, you should remove the super callback.
After that, you should Modify your text paint as required.

2. Without ClickableSpan

Add ForegroundColorSpan to change the text color
Add UnderlineSpan to add underline in text.

score 0 · Answer 17 · answered Apr 21 '20 at 10:57

From the developer docs, to change the color and size of a spannable:

1- create a class:

    class RelativeSizeColorSpan(size: Float,@ColorInt private val color: Int): RelativeSizeSpan(size) {

    override fun updateDrawState(textPaint: TextPaint?) {
        super.updateDrawState(textPaint)
        textPaint?.color = color
    } 
}

2 Create your spannable using that class:

    val spannable = SpannableStringBuilder(titleNames)
spannable.setSpan(
    RelativeSizeColorSpan(1.5f, Color.CYAN), // Increase size by 50%
    titleNames.length - microbe.name.length, // start
    titleNames.length, // end
    Spannable.SPAN_EXCLUSIVE_INCLUSIVE
)

score 0 · Answer 18 · answered Jul 30 '21 at 10:43

You can use extension function in Kotlin

fun CharSequence.colorizeText(
    textPartToColorize: CharSequence,
    @ColorInt color: Int
): CharSequence = SpannableString(this).apply {
    val startIndexOfText = this.indexOf(textPartToColorize.toString())
    setSpan(ForegroundColorSpan(color), startIndexOfText, startIndexOfText.plus(textPartToColorize.length), 0)
}

Usage:

val colorizedText = "this text will be colorized"
val myTextToColorize = "some text, $colorizedText continue normal text".colorizeText(colorizedText,ContextCompat.getColor(context, R.color.someColor))
viewBinding.myTextView.text = myTextToColorize

score 0 · Answer 19 · answered Nov 14 '21 at 10:43

Now you can use the CodeView library to highlight patterns with different colors easily, for example, to highlight all URLs inside the text with the blue color you just need to write

CodeView codeView = findViewById(R.id.codeview);
codeView.addSyntaxPattern(Patterns.WEB_URL, Color.BLUE);
codeView.setTextHighlighted(text);

CodeView Repository URL: https://github.com/amrdeveloper/codeview

score -1 · Answer 20 · answered Jun 23 '22 at 05:18

First Part **Second Part should be Bold** last Part

This text should be changed using SpannableString

import android.graphics.Typeface.BOLD
import android.text.Spannable
import android.text.Spannable.SPAN_EXCLUSIVE_EXCLUSIVE
import android.text.SpannableString
import android.text.style.BackgroundColorSpan
import android.text.style.ForegroundColorSpan
import android.text.style.StyleSpan

val firstPart = "First Part  "
val secondPart = "Second Part should be Bold"
val thirdPart = "  last Part"
val finalString = firstPart + secondPart + thirdPart

val sb: Spannable = SpannableString(finalString).also {
                // ... Change text Colour
                it.setSpan(
                    ForegroundColorSpan(getColor(requireContext(), R.color.pink)),
                    finalString.indexOf(secondPart),
                    finalString.indexOf(secondPart) + secondPart.length,
                    SPAN_EXCLUSIVE_EXCLUSIVE
                )
                // ... Make the text Bold
                it.setSpan(
                    StyleSpan(BOLD),
                    finalString.indexOf(secondPart),
                    finalString.indexOf(secondPart) + secondPart.length,
                    SPAN_EXCLUSIVE_EXCLUSIVE
                )
                // ... Change Background Colour
                it.setSpan(
                    BackgroundColorSpan(getColor(requireContext(), R.color.lightPink)),
                    finalString.indexOf(secondPart) - 1,
                    finalString.indexOf(secondPart) + secondPart.length + 1,
                    SPAN_EXCLUSIVE_EXCLUSIVE
                )
}

yourTextView.text = sb