Modifying parts of a TextView — yes, it is possible!

I’m pretty sure you will use it someday.

Random image, cause I don’t have any other to put in but it’s related to content.

Sometimes we face a few tasks that are apparently really simple and quickly to solve. However when doing a better analysis of the problem we get to that question: “Well, I thought it would be really quickly to manage that. But what now? What do I do? How do I do?”. That’s when Google appears, that’s when Stack Overflow appears, that’s when this article appears.

What I will explain here is a simple and quickly way of solving a problem on Android environment that only a few people have the knowledge of. I’m pretty sure that you still not asked yourself yet:

How to transform/customize only a little part of a TextView – e.g with different font or color – and even clickable?

In some cases it’s really necessary to have a text with a different color and a click inside it. As here, for example:

Highlight is important, as well as the click. It helps a lot!

SpannableString, ClickableSpan & ForegroundColorSpan

With the ClickableSpan, for example, it's possible to create an Intent that opens another activity and following navigating your app. That is: a really helpful and useful resource!

There’s and object inside Android API called SpannableString. And that’s with this object we’re gonna work with.

At the end of the article, I will share a sample code on GitHub, so you can download and try it yourself.

First of all, we will create a base string to make our changes:

String initialText = “Tängo Labs is the new thing!”;

Then we start the creation of the SpannableString object, passing our text to it.

SpannableString spannable = new SpannableString(initialText);

ForegroundColorSpan

Next, we create our object ForegroundColorSpan with the color configurations.

ForegroundColorSpan colorSpan = new ForegroundColorSpan(Color.BLUE);

And then we need to find the range where we want to define the color. In this example we will define the color at word “Tängo”. For this we will make use the function indexOf.

String find = “Tängo”;
int rangeStart = initialText.indexOf(find);
int rangeEnd = rangeStart + find.lentgh();
Through the setSpan method, we can define various features of our string. It’s here where we will add the ForegroundColorSpan object.
spannable.setSpan(clickableSpan, rangeStart, rangeEnd, Spannable.SPAN_INCLUSIVE_INCLUSIVE);
mCustomTextView.setText( spannable);

With a couple of changes, we have a multicolor TextView. From this point on, you just have to explore the resources of the object to learn more possibilities. :)

ClickableSpan

Now that we already added color to a piece of text, we’ll add a behavior to it. With ClickableSpan is possible to define inside a string, a clickable range.

ClickableSpan clickableSpan = new ClickableSpan() {
@Override
public void onClick(View widget) {
Toast.makeText(getApplicationContext(), "Hey you!", Toast.LENGTH_LONG).show();
}
    @Override
public void updateDrawState(TextPaint ds) {
super.updateDrawState(ds);
ds.setColor(Color.BLUE);
ds.setUnderlineText(false);
}
};
spannable.setSpan(clickableSpan, rangeStart, rangeEnd, Spannable.SPAN_INCLUSIVE_INCLUSIVE);
mCustomTextView.setText(spannable);
mCustomTextView.setMovementMethod(LinkMovementMethod.getInstance());
Here we eliminated the dependency on ForegroundColorSpan, because the ClickableSpan object offers the same feature to colorize.
The final result. Clicking in the ClickableSpan defined before, a Toast appears with the text "Hey You!".

Important to always remind that to define the color of a ClickableSpan you must determine it overriding the updateDrawState method. It’s really simple. And more: for the click to work, it’s necessary that we use the setMovementMethod method to turn the item into a clickable one. More info here: LinkMovementMethod .

Conclusion

There are N possibilities for a TextView, not only to show text. These are only some of the VERY useful resources that are frequently used in environments or projects which requires more careful and attention, requested by a UX team or by a customer demand. But when you need it, you will know how to handle, because you learned here on Tängo Labs. :)