Monday, January 5, 2015

How to display bold text in a TextView in android

TextView bold text
TextView widget display text on android app. we can render a TextView to display text as bold or italic both programmatically by java file and syntactically by xml layout file. we also can bold TextView text syntactically by using string ressource file. this first android app demonstrate us how can we render TextView text bold, italic, normal and even underlined by declarative syntax.

the android:textStyle attribute allow us to set the text style to normal, bold or italic. we can combine this style by separated them using keyboard pipe | symbol. so if we want to render TextView text as bold and italic then we need to set the android:textStyle attribute value as android:textStyle="blod|italic". android:textStyle="normal|italic" value display text as italic, android:textStyle="bold" value display text only bold and android:textStyle="normal" value define TextView text appearance as normal.

this is very interesting that we can render a TextView's part of text as bold, italic or underlined by using string resource file. the string resource file allow us to declare a string resource which value contain html tags. so the final output show the stylish text on android app. strings.xml resource file exist under res/values folder.

in the following example code, we declare a string key value pair name stylish_text and its value. stylish_text key's value contain html tags those make part of text bold, italic and underlined. in the xml layout file we can assign the string resource as android:text="@string/stylish_text".
activity_main.xml

<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:orientation="vertical"
    android:layout_margin="25dp"
    tools:context=".MainActivity"
    >

    <TextView
        android:id="@+id/text_view1"
        android:text="TextView - Bold Text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="30sp"
        android:textStyle="bold"
        android:background="#F1F111"
        />

    <TextView
        android:id="@+id/text_view2"
        android:text="TextView - Bold and Italic Text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="30sp"
        android:textStyle="bold|italic"
        android:background="#FFDD11"
        />

    <TextView
        android:id="@+id/text_view3"
        android:text="TextView - Bold and Normal Text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="30sp"
        android:textStyle="bold|normal"
        android:background="#FFF111"
        />

    <TextView
        android:id="@+id/text_view4"
        android:text="@string/stylish_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="30sp"
        android:background="#25F5FF"
        />

</LinearLayout>
res/values/strings.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="app_name">My Application5</string>
    <string name="action_settings">Settings</string>
    <string name="stylish_text">
        <b>Hi!</b> innee. <i>How are you?</i> <u>Where is your mother?</u>
    </string>
</resources>


the following image show the string resource file's contents and its loaction on app file system.



the following image displays the final output of this app. in this image we can see bold, italic and underlined text or part of text which we define in declarative syntax in our app.

TextView bold text programmatically

the following android example app code demonstrate us how can we bold, italic or underline TextView text programmatically at run time in java file.

setTypeface() method allow us to set the typeface and style in which the text should be displayed in a widget. all Typeface families have not bold and italic variants. geTypeface() method allow us to get the current typeface and style in which the text is being displayed. we can define a TextView widget's font and font variant by the setTypeface() method as setTypeface(Typeface.MONOSPACE, Typeface.BOLD_ITALIC). the setTypefce() method only render a TextView text to bold, italic and normal. it does not support underline text or any other formatting.

if we want to display bold and underlined text programmatically on an app, we need to take help the setText() method. to do this, we need to provide html tags with text as setText() method parameter. the setText() method render the html tags and display formatted text on application.

another way to render TextView text bold programmatically in java code by using style resource file. we can put a styles.xml file on res/values folder. then assign styles item and value to the style file. finally we can apply any style from this style file to the TextView by using the setTextAppearnce() method.

setTextAppearance() method allow us to set the text color, size, style, hint color etc from the specified TextAppearance resource.
activity_main.xml

<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:orientation="vertical"
    android:layout_margin="25dp"
    tools:context=".MainActivity"
    >

    <TextView
        android:id="@+id/text_view1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="30sp"
        android:background="#DEB887"
        />

    <TextView
        android:id="@+id/text_view2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="30sp"
        android:background="#FFF8DC"
        />

    <TextView
        android:id="@+id/text_view3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="30sp"
        android:background="#B8860B"
        />

    <TextView
        android:id="@+id/text_view4"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="30sp"
        android:background="#8FBC8F"
        />

    <TextView
        android:id="@+id/text_view5"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="30sp"
        android:background="#F0E68C"
        />

    <Button
        android:id="@+id/push_button"
        android:text="Apply TextView Bold Text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="perform_action"
        />

</LinearLayout>
MainActivity.java

package com.cfsuman.me.myapplication5;

import android.graphics.Typeface;
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.text.Html;
import android.widget.TextView;


public class MainActivity extends ActionBarActivity {

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

    public void perform_action(View v)
    {
        TextView tv1 = (TextView) findViewById(R.id.text_view1);
        //set text style bold on current font
        tv1.setTypeface(tv1.getTypeface(), Typeface.BOLD);
        tv1.setText("Bold text on current default font.");

        TextView tv2 = (TextView) findViewById(R.id.text_view2);
        //set text style bold and italic and font monospace
        tv2.setTypeface(Typeface.MONOSPACE, Typeface.BOLD_ITALIC);
        tv2.setText("Bold and italic text on monospace font.");

        TextView tv3 = (TextView) findViewById(R.id.text_view3);
        //set text style italic and font serif
        tv3.setTypeface(Typeface.SERIF, Typeface.ITALIC);
        tv3.setText("Italic text on serif font by setTypeface() method.");

        TextView tv4 = (TextView) findViewById(R.id.text_view4);
        //define a string with html code
        String str = "<b>Hi! Innee.</b> <u><i>How are you?</i></u>";
        //need to import android.text.Html class
        //set text style bold, italic and underline from html tag
        tv4.setText(Html.fromHtml(str));

        TextView tv5 = (TextView) findViewById(R.id.text_view5);
        //set text style from styles.xml resource file
        tv5.setTextAppearance(this, R.style.BoldItalicText);
        tv5.setText("Bold and italic text by styles.xml resource file.");
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }
}
res/values/styles.xml

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
    </style>

    <style name="BoldItalicText">
        <item name="android:textStyle">bold|italic</item>
    </style>

</resources>


the following image displays the styles.xml resource files location and its contents.



the following image displays the second example app's initial state.



the following image displays the result of the second example app. when someone click the push button, the app display different TextView with different text style programmatically.

More android examples