Text Styles in Android - GeeksforGeeks

29 Jul, 2021
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 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.Buildimport androidx.appcompat.app.AppCompatActivityimport android.os.Bundleimport android.widget.TextViewimport androidx.annotation.RequiresApiimport 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.
Android
Kotlin
Android
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Resource Raw Folder in Android Studio
Flutter - Custom Bottom Navigation Bar
How to Read Data from SQLite Database in Android?
Flexbox-Layout in Android
Retrofit with Kotlin Coroutine in Android
Android UI Layouts
Kotlin Array
Retrofit with Kotlin Coroutine in Android
Kotlin Setters and Getters
Kotlin when expression