Text Styles in Android

TextView displays the declared text in a standard way unless the developer specifies particular attributes to make the text appear better. These attributes can directly be declared into the TextView tags. However, in order to maintain a scalable and clean code, industrial practices suggest gathering together all such attributes. Meaning, there can be the same or different styles for different UI elements within the application and all of them need to be grouped into a single file that could be called wherever required. Through this article, we want to show you how you can create styles and apply them to TextViews. In our demonstration, we dynamically changed the TextView style by tapping on it.

Step by Step Implementation

Step 1: Create a New Project in Android Studio

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. We demonstrated the application in Kotlin, so make sure you select Kotlin as the primary language while creating a New Project.

Step 2: Create styles.xml in the res>values folder

To create a styles file, right-click on the value folder inside the res folder, move the cursor to new, and click on Values Resource File.

Now give it the name “styles” and click on OK. You can use any name of your choice. Remember to check if the directory name is values, as our file shall contain attribute values. The generated file will be an XML file.

Once the file is generated, it should appear like this. Now, we can add the styles to this file. Go to the next step to see how you could create a style.

Step 3: Add styles in the styles.xml file

Refer to the below code. We have already declared a few styles for you. It is necessary to give a name to each style. Attributes related to text are declared as items between the style opening and closing tags.

XML

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="whiteText">
        <item name="android:textStyle">italic</item>
        <item name="android:textColor">#ffffff</item>
    </style>

    <style name="gfgGreenText">
        <item name="android:textStyle">bold</item>
        <item name="android:textColor">#0f9d58</item>
    </style>

</resources>

Step 4: Add colors to change the background of the TextView in the colors.xml file (Optional)

This step is optional. We declared two colors of our interest just to change the TextView background.

XML

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

    <!--There could be a list of colors declared here-->
    <!--Additionally, we are adding the below two colors-->
    <color name="gfg_green">#0f9d58</color>
    <color name="white">#FFFFFFFF</color>

</resources>

Step 5: Add a TextView in the layout file (activity_main.xml)

XML

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    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"
    tools:context=".MainActivity">

      <!--TextView-->
    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="GeeksforGeeks"
        android:textSize="36sp"
        android:textStyle="bold" />

</RelativeLayout>

Step 6: Write a program to toggle between the styles on TextView click in the Main code (MainActivity.kt)

Kotlin

import android.os.Build
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.TextView
import androidx.annotation.RequiresApi
import org.w3c.dom.Text

class MainActivity : AppCompatActivity() {

    @RequiresApi(Build.VERSION_CODES.M)
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // Declaring TextView from the layout
        val tv1 = findViewById<TextView>(R.id.textView1)

        // A simple toggle variable that keeps
        // changing on TextView click/tap
        var toggle = true

        // What happens when the
        // TextView in clicked/tapped
        tv1.setOnClickListener {

            // If toggle is true, then text will become
            // white and background will become green
            // Else text is green and background is white
            if(toggle){
                tv1.setTextAppearance(R.style.whiteText)
                tv1.setBackgroundResource(R.color.gfg_green)
            } else {
                tv1.setTextAppearance(R.style.gfgGreenText)
                tv1.setBackgroundResource(R.color.white)
            }

            // Logically inversing the toggle, i.e. if toggle
            // is true then it shall become false
            // And vice-versa to keep the styles
            // keep changing on every click/tap
            toggle = !toggle
        }
    }
}

Input: 

Keep tapping on the TextView to observe the changes.

Output: 

We can see that the Text style changes to bold and then Italic along with background color changes. The cycle keeps repeating on every even click/tap.