How can I display formatted text in a TextView?

Question

How can I display formatted text in a TextView?

Simply copying and pasting formatted text to string resource file doesn't work either.

<string name="some_text">Some Formatted text copied from browser</string>

Java:

TextView textView = (TextView) findViewById(R.id.some);
textView.setText(getString(R.string.some_text));

But it displays like normal text. The requirement is to display coloured or bold texts and more.

Answer 1

If you want to style your text you have a few options.

---

The easiest would be to use HTML tags. You do have to wrap it with CDATA though.

For example, you can create your String:

<string name="some_text"><![CDATA[Create stickers for <b>Gboard</b>...]]></string>

And then to display it, you can do this.

Spanned sp = Html.fromHtml( getString(R.string.some_text));
tv.setText(sp);

---

Now, the more robust way would be to actually use Android's styles.

You would need to create multiple TextViews, each with their own Style, and that would allow you a lot of control over the exact look of the text.

For example, here is a layout you could do something similar to.

<?xml version="1.0" encoding="utf-8"?>

<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="wrap_content"
    android:orientation="vertical">

    <!-- Creating a Title for your layout. -->
    <TextView
        style="@style/TextAppearance.AppCompat.Title" <!-- Title Style -->
        android:id="@+id/header"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="Create stickers for Gboard on Google Play"
         />
    <!-- Creating a subheader for your layout. -->
    <TextView
        style="@style/TextAppearance.AppCompat.Caption" <!-- Caption Style -->
        android:id="@+id/subheader"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="01 September 2017"
         />

</LinearLayout>

For each different format you have, you need to create a new TextView, and apply the correct style.

I would suggest sticking with anything under @style/TextAppearance.AppCompat..., as that will give you a very good starting point with size/weight of your text.

You can use stuff like Title, Caption, Body2, Body1, and more.

---

And then down the road, when you have more experience with Styles, you can start creating your own.

For example, say I want all my Titles to be RED. You first create a Style within styles.xml

<style name="myTitleStyle" parent="TextAppearance.AppCompat.Title">
    <item name="android:textColor">@color/red</item>
</style>

And then you can use it as the previous styles.

<!-- Creating a Title for your layout. -->
        <TextView
            style="@style/myTitleStyle" <!-- myTitleStyle Style -->
            android:id="@+id/header"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="Create stickers for Gboard on Google Play"
             />