Effective control of textview in android

Photo by Amador Loureiro on Unsplash

Pardon me for the bad article name, I am not good at it!

Android 8.0 introduced a new feature, Fonts in XML, which lets us use fonts as resources. This was extremely helpful for customized textview!

Earlier we were creating custom textview and setting our font from the assets folder. This was a pain in disguise! However, this is well-taken care off by Android now.

Photo by Jaime Lopes on Unsplash

Let us first see how we can set the font for a textview in android, then we will see the problem it can cause.

To set the font, create a new resource directory named ‘font’ and copy-paste any font in the directory. In the example below, I added quicksand.xml and quicksand_bold.xml for my app.

Use it in textview;

//layout xml file
...
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello World!"
    android:fontFamily="@font/quicksand_bold"
/>
...

This was pretty fast, isn’t it! But this method fails in some of the scenarios:

1. What if you added 100+ textview in your android app, and then you were asked to change the font?
2. How do you distinguish a normal textview from a bold textview while dealing with multiple files?
3. What if you are asked to show bold textview with a slightly bigger font size? Can you quickly make this change?

There is no fast way to apply a common property to all textview, you have to manually make changes in all 100+ positions. Our textview properties are all scattered throughout the project. That’s definitely not a good practice.

There can be many more scenarios when you need to maintain the textview appearance much more efficiently. For this, there are multiple ways possible.

The simplest approach, we can create different styles for different textview.

In this approach, we use a style with our textview.

Stay with me! Consider this code:

...
<TextView
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:text="Follow us on Youtube"
   android:textSize="18dp"
   android:fontFamily="@font/quicksand_bold"
   android:textColor="@color/colorPrimaryDark"
   android:textStyle="bold"
   android:textAlignment="center"
   android:layout_margin="8dp"   
/>
...

This textview will look like this :

Now, since this textview is bold and text size 18dp, it is eligible for being title textview in our app. If we look closely, there are only a few attributes in code above which are compulsory, rest all are for adding extra beauty over the screen.

These compulsory attributes are height, width. All other attributes are given to have a customized look.

Let us see how can we control the look of textview from single source of truth.

In the Android Studio, we can extract extra attributes as a style. Along with the font, I am also extracting all the extra attributes. Right-click on textview, go to Refactor, then to Style..

On click of Style, you will see this dialog:

Here, I gave style name titleTextViewStyle and click on OK to create a style out of textview. Now your textview will become this:

And if you want to see the style you just created, you can find it in:

res →values → styles → styles.xml

or you can press Ctrl (or cmd) and click on @style/titleTextViewStyle to go to styles.xml. This is our extracted style for title textview:

You can use this style for any textview you want to set as the title. You can create other styles for a subtitle, paragraph, etc.

In our app, if we use this style in our textview properly, this will be very helpful. We can control font, font size, text color, etc from style itself.

Looks good! But is it reliable for all cases!?

To be honest, I use this method for a specific case!

If I have to control complex features such as animation, restriction over text, dynamic changes in UI, and much more. I won’t go for this approach.

If I don’t need intense control over my textview, I’ll go create a style and use it in my layout.

The best part, this approach is very handy.

On some occasions, I had to combine various approaches to have a clean and complex implementation of textview. We will cover some more implementation next time.

Thanks for reading. Do clap if this article helps. Peace.