Android Text Appearance
Even if a mobile application has a strong emphasis on visual components, there’s no way to avoid adding text to the interface. Labels and explanations make it easier to navigate the app, help business owners present their selling points and build a relationship with users.
Although manipulating text is generally not challenging, developers are often puzzled having to adapt the font type and size to different screen types and dimensions. To make sure your interfaces are flexible and adaptable to visitors’ needs and devices, take some time to learn about text appearance in Android.
Getting to Know TextView
Before wrapping your head around TextAppearance – which is one of the TextView attributes, find out more about TextView and its role in Android development.
By definition, TextView is a class that displays the text of a UI element to a user. An application visitor will not be able to modify the content specified by a class, only view it, as the name suggests.
To specify that any text can be displayed by TextView, a developer will have to use the android:text attribute in the markup file. Take a look at the example below:
android:text= "It's cool to be a developer"
It’s one of the ways to use android:text. A more versatile way, that makes multilingual support easier will be referencing relevant strings rather than pasting actual content:
Other popular TextView attributes are:
|Sets the size of the font in sp, pixels, and other common units|
|Operates using three constants – normal, bold, and italic.|
|There are four formats for specifying text color – RGB, ARGB, RRGGBB, and AARRGGBB.|
|Allows deleting editable text|
|Makes sure that all content with a structure of an email address or a link is clickable and formatted as a URL|
|Makes sure that all in-app text is seen as text. The attribute can correct common spelling errors as well.|
|Enables or disables the visibility of the cursor inside the app|
|Determines which text input methods the system recognizes|
|Determines which type of data is (or is not) recognized by the app.|
|Is used to set the typeface for the font – normal, serif, sans, monospace.|
|Specifies which color is assigned to clickable text|
|Contains the basic appearance characteristics for text.|
Keep in mind that all of the above are XML attributes. Also, you don’t have to set all of them manually in case you are happy with the default settings of the content.
Every TextView attribute has a corresponding method. For instance, to manipulate android:textsize, Android developers use setTextSize().
What Is TextAppearance?
TextAppearance is a TextView properties developers use to change the size, the style, and color of the text. Unlike when using variables, a developer doesn’t have to specify the needed size in pixels or other units. Rather, you can choose whether a text should be small, medium, or large, and the system sets the font size automatically.
Take a look at some examples of using the TextAppearance property:
Keep in mind that TextAppearance can only be applied on the text that has no other attributes attached to it. Thus, using android:textsize or android:textcolor will override TextAppearance, and the settings set by the latter will not be applied.
It’s possible for software developers to refer to a different resource when using textAppearance. Usually, such a reference looks one of the following ways:
In case you are referring to a theme attribute, the following code is more appropriate:
How to Use TextAppearance For Styling?
TextAppearance is an efficient way to apply specific styling attributes all over the app. The good news is, applying the property is no rocket science – you can learn it by following these simple steps:
Step #1. Create custom color attributes that will be used by the appearances
If your website theme doesn’t offer the color you want the content to be, widen the pool of options. You can add new colors to the system using the textColor attribute. The attribute recognizes both simple colors and selectors.
You can label GRB values as Primary, Secondary, and Tertiary. There will be a visible opacity difference between them.
Here’s the example of defining textColor components:
<item name="android:textColorPrimary">@color/color_name</item> <item name="android:textColorSecondary">@color/color_name</item> <item name="android:textColorTertiary">@color/color_name</item>
Step #2. Add TextAppearance to TextView
Now that you’ve added needed colors to the system, TextAppearance will be able to display them. Here’s how a developer can apply the property to change the color of all in-app text.
<TextView style="@text1/TextSample" android:text="android:textColorPrimary" android:textAppearance="@text1/TextAppearance.AppCompat.Body1"/>
There are other properties of the text you can specify using TextAppearance. For instance, a developer can determine which font family to choose. Other than that, a parent-child link between two TextApperances is possible.
To specify that a style is a parent, a developer enters the following code in styles.xml
To reference a parent style in a different layout, a mobile software engineer should enter the following code in TextView:
<TextView style="@style/TextSample" android:text="This is my title" android:textAppearance="@style/ParentTitle"/>
Keep in mind that, if you reference resources, a user will usually see text in English. In case you build an interface in a different language, choose the right one for all resources via Android Studio.
Useful Units and Systems
When handling TextView and TextAppearance in particular, Android developers need to make sure they know the most basic design units. Here’s a list you can reference when setting styles:
- px – pixels, the smallest size unit;
- dp – density-independent pixels – a size unit for a screen, with the 160 dpi screen density. In most cases, px equals dp.
- sp – scalability-independent pixels, allow developers to set sizes manually. They are widely used when handling fonts.
- in – inches
- mm – millimeters
- pt – points – 1/72 of an inch.
In Android development, TextAppearance is TextView attribute. It is extremely convenient for creating a uniform text style for different page screens. Getting the hang of the attribute is easy if you are familiar with TextView. If not, make sure you understand how this element works before digging into the advanced settings of each attribute.