Display TextView with multi-color

This example show how to display TextView with multi-color, using Html.fromHtml() and SpannableString.

TextView with multi-color

package com.example.androidcolortext;

import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.text.Html;
import android.text.SpannableString;
import android.text.style.BackgroundColorSpan;
import android.text.style.ForegroundColorSpan;
import android.widget.TextView;
import android.widget.TextView.BufferType;

public class MainActivity extends Activity {

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  
  TextView colorText1 = (TextView)findViewById(R.id.colortext1);
  String text1 = "<font COLOR=\'RED\'><b>" + "android-coding" + "</b></font>"
    + "<font COLOR=\'#00FF00\'><i>" + ".blogspot" + "</i></font>"
    + ".com";
  colorText1.setText(Html.fromHtml(text1));
  
  TextView colorText2 = (TextView)findViewById(R.id.colortext2);
  SpannableString text2 = new SpannableString("lesapplication.blogspot.com");
  text2.setSpan(new ForegroundColorSpan(Color.RED), 0, 14, 0);
  text2.setSpan(new ForegroundColorSpan(Color.GREEN), 6, 11, 0);
  text2.setSpan(new ForegroundColorSpan(Color.BLUE), 15, text2.length(), 0);
  colorText2.setText(text2, BufferType.SPANNABLE);
  
  TextView colorText3 = (TextView)findViewById(R.id.colortext3);
  SpannableString text3 = new SpannableString("lesapplication.blogspot.com");
  text3.setSpan(new BackgroundColorSpan(Color.LTGRAY), 0, text3.length(), 0);
  text3.setSpan(new ForegroundColorSpan(Color.RED), 0, 14, 0);
  text3.setSpan(new ForegroundColorSpan(Color.GREEN), 6, 11, 0);
  text3.setSpan(new ForegroundColorSpan(0xFF0000FF), 14, 23, 0);
  text3.setSpan(new ForegroundColorSpan(0x500000FF), 23, text3.length(), 0);
  colorText3.setText(text3, BufferType.SPANNABLE);

 }

}

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:orientation="vertical"
    tools:context="com.example.androidcolortext.MainActivity" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="lesapplication.blogspot.com" />
    
    <TextView
        android:id="@+id/colortext1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="50sp" />
    <TextView
        android:id="@+id/colortext2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="50sp" />
    <TextView
        android:id="@+id/colortext3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="50sp" />

</LinearLayout>

Tweet