Development

Display TextView with multi-color

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

MainActivity.java

package ge.droid.examples;

import android.graphics.Color;
import android.support.v7.app.AppCompatActivity;
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;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //Coloring text using Html.fromHTML()
        TextView colorText1 = findViewById(R.id.colortext1);
        String text1 = "<font color=\'#FF0000\'><b>" + "www" + "</b></font>"
                + "<font color=\'#00FF00\'><i>" + ".droid" + "</i></font>"
                + ".ge";
        colorText1.setText(Html.fromHtml(text1));

        //Coloring text using SpannableString
        TextView colorText2 = findViewById(R.id.colortext2);
        SpannableString text2 = new SpannableString("www.droid.ge");
        text2.setSpan(new ForegroundColorSpan(Color.RED), 0, 4, 0);
        text2.setSpan(new ForegroundColorSpan(Color.GREEN), 4, 9, 0);
        text2.setSpan(new ForegroundColorSpan(Color.BLUE), 9, text2.length(), 0);
        colorText2.setText(text2, TextView.BufferType.SPANNABLE);

        //Setting background color
        TextView colorText3 = findViewById(R.id.colortext3);
        SpannableString text3 = new SpannableString("www.droid.ge");
        text3.setSpan(new ForegroundColorSpan(Color.RED), 0, 4, 0);
        text3.setSpan(new ForegroundColorSpan(Color.GREEN), 4, 9, 0);
        text3.setSpan(new ForegroundColorSpan(Color.BLUE), 9, text3.length(), 0);
        text3.setSpan(new BackgroundColorSpan(Color.LTGRAY), 0, text3.length(), 0);
        colorText3.setText(text3, TextView.BufferType.SPANNABLE);
    }
}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical">

    <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center" android:text="Multi Color Text" android:textColor="#000" android:textSize="18sp" android:textStyle="bold" />

    <TextView android:id="@+id/colortext1" android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center" android:textSize="50sp"/>

    <TextView android:id="@+id/colortext2" android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center" android:textSize="50sp" />

    <TextView android:id="@+id/colortext3" android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center" android:textSize="50sp" />

</LinearLayout>

The result:

 

Tags
Close