Tutorial 4 : TextView Example

In this tutorial, we show you how to modify the textview on the Android XML layout. You will learn how to change the display text, font size and font colour.

1. Change the Display Text

There are two ways to change the display. As discuss before you able to design your layout through graphical interface or hard code interface in the XML file. In this tutorial, we will use both of them in our XML layout design. The reason is they have different benefit over each other. For graphical interface, it is more user friendly; while hard code interface, it is more controllable.

Graphical Interface

Figure 4.1

Figure 4.1 showed how you can change the display text by using graphical interface. First, click on the hello world on the GUI, then it will be selected as shown in the figure above. In properties window, select the text option and change the word you like to show. At here, I would like to change it to "Success" and you will able to see the word change in the GUI as well.

Figure 4.2

Hard Code Interface

The original code of the XML is shown as Figure 4.3. Then, you can saw <TextView /> command at there. This command contains all the properties of the particular textview such as text size, text, layout width and others.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world" />

</RelativeLayout>

Figure 4.3

If you wan to change the display text, you can do the code change at the command line of android:text="@string/hello_world". You can change the content to the word you like to display. Figure 4.4 shows the code change which I had done to make it display "Success" in the XML layout.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Success" />

</RelativeLayout>

Figure 4.4

2. Change the Font Size

Graphical Interface

Next, you will learn how to change the font size of the text.Same as before, you able to do it through the graphical interface or hard code interface. Repeat the step before you had done, selecting the text on the GUI and search the textSize option in the properties window is shown as Figure 4.5.

Figure 4.5

Hard Code Interface

If want to change the text size by using hard core interface, you need to add android:text="70dp" command into the <TextView /> is shown as Figure 4.6. There are several units such as dx, dp, sp, mm and pt for text size setting. Each of them are different, more details can refer to here. Normally we will use dp or sp unit for the text size setting.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="70dp"
        android:text="Success" />

</RelativeLayout>

Figure 4.6

3. Change the Font Colour

Graphical Interface

At this part, we will show you how to change the font colour by using graphical interface. First, go to the properties window and search for textColor option is shown as Figure 4.7.

Figure 4.7

Click on the button, a Resources window shown as Figure 4.8 will pop-out. Then, select the System tab, it will show a list of color options for you. Choose one of them, see what will be change in the GUI. Hope you have fun with it. :D

Figure 4.8

 

 Hard Code Interface

For hard code interface, we need to add a line command android:textColor="@android:color/holo_blue_light" into the <TextView />. The code change is shown as Figure 4.9.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="70dp"
        android:textColor="@android:color/holo_blue_light"
        android:text="Success" />

</RelativeLayout>

Figure 4.9

Now you are familiar with the both interface, therefore you can explore it by yourself and do comparison between them which one is more easier to use. Next tutorial, we will learn how to implement a button in Android application. Hope you having fun in this tutorial. :)