Lesson 1.5: How to color part of the text and use alpha channel in TextView?

Let’s say that we want to have every word presented in TextView in different color. Any of solutions from previous lesson doesn’t address this issue, but we know how to do it. And there is one more thing related to colors – so called alpha channel that’s responsible for transparency.

Step 1. Make colorful TextView thanks to HTML tags

To color words or phrases inside TextView we need a trick – we would use Html class and its fromHtml() method. One of supported HTML tags is <font color=’#RRGGBB’>.

The syntax is a bit complicated – we have to deliver String with HTML tags to fromHtml() method. Then we give a result of HTML parsing to setText() method, which displays it in chosen TextView. Of course we have to find a view first, what was described in previous lessons.

This is an example changing color of one word.

That allows us to modify color of every single word. Look at this example.

You could use String variable for fromHtml().

Unfortunately, that solutions doesn’t work directly in XML layout file. And there is no easy way to use it for string resources. Method fromHtml() requires String as argument, but when we use getString() on resources in strings.xml file it returns them without HTML tags.

There are two options:

Option 1. Hide HTML tags

Instead of using < and > signs to mark tags, use &lt; and &gt respectively. That makes a string rather difficult to analyze, but it works…

This is a fragment from strings.xml:

That’s exactly our previous text: This is <font color=’#0000FF’>blue</font>.

And below the Java code to display it:

Option 2. Use CDATA format.

You have to embrace your HTML code with CDATA. CDATA states for Character Data and this is a part of code that isn’t parse (or we could say it’s ignored).

The syntax is: <![CDATA[your-HTML-code]]>.

This is our example of strings.xml line using CDATA:

Step 2. What is the use of alpha channel option?

Alpha channel is not a color, but it’s related to colors presentation. And you define it together with color definition. It sets transparency – from opaque to fully transparent (so invisible). We would simulate it using background color.

We would add one more TextView element . First would have red background and second green one.  In both we need some text – in the example we used sample text just to simulate the transparency.

This is a full code of activity_main.xml file:

In the preview we just see second text on the green background. Because it is opaque, the previous text is covered by it. Mind that this effect would be only possible if you use RelativeLayout, if you changed to LinearLayout both texts would be next to each other (we would write more about layout types in next lesson set ).

Let’s now add alpha channel setting to background color in the second TextView. Value FF means opaque so nothing would change, and 00 is invisible. We would try a value 88 that is semi-transparent. Add it before background color definition in the second TextView.

This is a code:

The transparency is slightly visible. Change it to 22.

Now there isn’t any doubts that transparency influence the look of colors and objects themselves.

You could set transparency not only to background, but also to text or a whole object. In the first case we just use #AARRGGBB color format for android:textColor attribute (exactly as we did for background color).

If we want to change alpha channel of whole element we should use android:alpha attribute. But it isn’t so obvious how to use it, because the value is not anymore hex value as in color definition. Instead you have to use a value between 0 and 1. So semi-transparent would be 0.5 (50% of opacity) and very transparent 0.3 (30% of opacity).

This is an example:

Mind that we have deleted alpha channel information from android:background attribute.

The same you could do in Java using setTextColor and setBackgroundColor while providing alpha channel values. There is also separated method setAlpha(), but you could use it for TextView only if your app is dedicated for Android 3.0 (Honeycomb) or higher (so called API 11 or higher).  Moreover you have to use float value type from 0 to 1, for example “0.3f” (this is 30% of opacity).

This is a sample code:

To check current alpha level we could use getAlpha() method. Remember that it returns float value.

This is an example:

Summary: We already know how to deal with text and background colors. We also should understand, how works alpha channel.