Android How to Customize Font

Android How to Customize Font

There is the scenario where we need to customize the text and font in our Android app. In this article, we are going to learn everything about the text, font, and how to customize the text, font for our Android App.

Let's start by creating a few TextView. Below code is for 11 TextViews.

Code

<?xml version="1.0" encoding="utf-8"?>
<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:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.vlemonn.blog.customfont.MainActivity"
    android:orientation="vertical"
    >

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@ id/tv1"
        android:text="Default Text"
        />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@ id/tv2"
        android:text="Bold Text"
        android:textStyle="bold"
        />


    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@ id/tv3"
        android:text="Bold and Italic Text"
        android:textStyle="bold|italic"
        />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@ id/tv4"
        android:text="Text Size 25 SP"
        android:textSize="15sp"
        />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@ id/tv5"
        android:text="Yellow Text"
        android:textColor="#FFFF00"
        />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@ id/tv51"
        android:text="Green Color. Color Value in Color.xml"
        android:textColor="@color/colorGreen"
        />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@ id/tv6"
        android:text="Green Color Text With Red Shadow"
        android:textColor="@color/colorGreen"
        android:shadowColor="#F00"
        android:shadowRadius="1"
        android:shadowDx="1"
        android:shadowDy="1"
        />


    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@ id/tv7"
        android:text="Text with 'sans' Font"
        android:typeface="sans"
        />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@ id/tv8"
        android:text="Text with 'serif' Font"
        android:typeface="serif"
        />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@ id/tv9"
        android:text="Text with 'monospace' Font"
        android:typeface="monospace"
        />


    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@ id/tv10"
        android:text="This is Awesome"
        android:textSize="40sp"
        />
</LinearLayout>

If you are able to notice all TextViews have different font settings. Let's check them all one by one.
Our first text view has default settings for the font.

Code

<TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@ id/tv1"
        android:text="Default Text"
        />

The second TextView text is in bold. We can define it using android:textStyle. You can use normal, bold and or italic. Following are the possible value for textStyle attribute. It is 

  • bold
  • italic
  • normal
  • bolditalic

Code

<TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@ id/tv2"
        android:text="Bold Text"
        android:textStyle="bold"
        />

What if we need to use multiple styles? 
The third TextView shows how to combine bold and italic. You can assign multiple values to an attribute using the pipe "|" character.

Code

<TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@ id/tv3"
        android:text="Bold and Italic Text"
        android:textStyle="bold|italic"
        />

What about text size?
We can use the textsize property to define the font size. Our forth TextView has text with the font size 25SP

Code

<TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@ id/tv4"
        android:text="Text Size 15 SP"
        android:textSize="15sp"
        />

All the above example, we use the TextView with the default black color. Let's use some cool colors for the TextViews. To change the color, we can use the textcolor attribute. For the textcolor attribute, we need to provide color in hexadecimal format. Following is the different possible structure of a hexadecimal value.

#RGB
#ARGB
#RRGGBB
#AARRGGBB
 
Here R = Red, B= Blue, G=Green and A = Alpha.
 
In our Fifth TextView, the text color is yellow.

Code

<TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@ id/tv5"
        android:text="Yellow Text"
        android:textColor="#FFFF00"
        />

For our next example, we are using Color.xml file to control the TextView color.

Code

<TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@ id/tv51"
        android:text="Green Color. Color Value in Color.xml"
        android:textColor="@color/colorGreen"
        />

Following is the content for the Color.xml file.

Code

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>
    <color name="colorGreen">#00FF00</color>
</resources>

What next, till now we are playing with size, weight, and color. Let's add the shadow to our text. Following are some attributes for controlling the shadow.

  • android:shadowColor :- Shadow color in the same format as textColor.
  • android:shadowRadius :- Radius of the shadow specified as a floating point number.
  • android:shadowDx :- The shadow's horizontal offset specified as a floating point number.
  • android:shadowDy :- The shadow's vertical offset specified as a floating point number.

Note: You can’t check the shadow effect on Designer View.
Following code is for a TextView with green text and red shadow. To test this example, you may need to run the android app.

Code

<TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@ id/tv6"
        android:text="Green Color Text With Red Shadow"
        android:textColor="@color/colorGreen"
        android:shadowColor="#F00"
        android:shadowRadius="1"
        android:shadowDx="1"
        android:shadowDy="1"
        />

We cover lots of attributes and the methods to control the text for a TextView. Is anything is still pending? Yes, your text font. Every android device comes with some standard optimize fonts. You can anytime use all those fonts. To use the available standard fonts, you need to change the typeface property. In the below seventh, eighth and ninth TextView example, we are using the sans, serif and monospace font.

Code

<TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@ id/tv7"
        android:text="Text with 'sans' Font"
        android:typeface="sans"
        />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@ id/tv8"
        android:text="Text with 'serif' Font"
        android:typeface="serif"
        />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@ id/tv9"
        android:text="Text with 'monospace' Font"
        android:typeface="monospace"
        />

For the above three examples, we used available fonts. Can we able to use a custom font? Yes, definitely. Let' download a font first. Get some awesome font from Fonts.com.

Download the required fonts. Copy the fonts in assets/font/ directory. Refer the following image for more details.

(Note: This step is important. If you are going to place font in res folder then the code is not going to work) Finally, use below Java code to use our custom font.

(Note: This step is important. If you are going to place font in res folder then the code is not going to work) 

Finally, use below Java code to use our custom font.

Code

TextView textView = (TextView) findViewById(R.id.tv10);
Typeface typeface = Typeface.createFromAsset(getAssets(),"font/sandoval.ttf");
textView.setTypeface(typeface);

I hope we covered everything related to the TextView and fonts. If we missed anything, please mentioned it in the comment section. We will update this article ASAP.
Below is the final output of our app.

Exercise:

Play with different attributes. Try to change font and text property for other views.

0 Comments
Leave A Comment

Please login to post your valuable comments.

Join the newsletter

Get the latest vLemonn news first

share