Android bEGINNER : Basic text controls

In this tutorial, you’ll learn how to create basic Android text controls. Then you’ll learn how to configure, style, and manipulate the controls in a variety of ways.

This tutorial shows you the steps to create a number of different TextView controls in your Android application. First, you learn how to add basic text controls to your layout files and what some of their most useful attributes are. Next, you learn how to set the text control’s contents in two different ways. Finally, we discuss some of the other features available to TextView control in Android.
The Android SDK includes a simple static text control for use within your layouts: TextView (android.widget.TextView). A good example of TextView control usage would be to display textual labels for other controls, like “Enter a Date:”, “Enter a Name:” or “Enter a Password:”.
Here is an example of a screen with many different TextView controls displayed on it.

Step 1: Create an Android Application

Begin by creating an Android project. Implement your Android application as normal. Once you have a project set up and the application running, decide under what screen you want to add text controls to. Perhaps you’ve simply created a new Android project with its default Activity and layout (main.xml). This will work for this exercise. Once you have gotten your Android project set up, you are ready to proceed with this tutorial.

Step 2: Adding a TextView Control to a Layout

TextView controls are usually included as part of your Activity’s layout resource file. For example, to add a TextView control to the main.xml layout resource associated with your application, you must edit the layout file. You can do this within Eclipse using the Layout Resource designer, or by editing the XML directly. Controls can also be created programmatically and added to your screen at runtime. Simply create a Textview control (android.widget.TextView) and add it to your layout within your Activity.
To add a TextView control to a layout resource file, open the /res/layout/main.xml layout file that is part of your Android project. Click on the LinearLayout (or parent layout control) that you wish to add the TextView control to. In Eclipse from within the graphical Layout Resource designer, you can select the TextView control and drag it into the parent layout.
To configure how the TextView control looks and behaves, adjust the control’s attributes by selecting the control (either in the Outline tab or the Preview window) and changing its attributes, as shown the Properties Tab. You can also edit the XML directly.
Specific attributes of TextView controls you will want to be aware of:

• Give the TextView control a unique name using the id property.
• Set the text displayed within the TextView control using the text property; programmatically set with the setText() method.
• Set the layout height and layout width properties of the control as appropriate.
• Set any other attributes you desire to adjust the control’s appearance. For example, adjust the text size, color, font or other style settings.

Let’s discuss some of the most common attributes for TextView controls.

Step 3: Aligning Text within a TextView Control

By default, text contents of a TextView control are left-aligned. However, you can position the text using the gravity attribute. This setting positions your text relative to the control’s overall width and height and only really makes sense to use if there is whitespace within the TextView control because you’ve set it’s layout_height and/or layout_width to something other than wrap_content. In XML, this property would appear within your TextView control as:

android:gravity="center"

You can see an example of a center-aligned TextView control in the figure above, referred to as “Centered Text”. This TextView control has a layout_width of match_parent and a layout_height of wrap_content.
If you’re working with TextView control’s in your Java code, you can also set the alignment of your TextView control programmatically using the setGravity() method of the TextView class.

Step 4: Controlling the Background of a TextView Control

By default, the background of a TextView control is transparent. That is, whatever is behind the control is shown. However, you can set the background of a control explicitly, to a color resource, or a drawable (picture). In XML, this property would appear within your TextView control as:

1	android:background="#0000ff"

You can see an example of a TextView control with a blue background in the figure above. This TextView control has a layout_width of match_parent and a layout_height of wrap_content. Note that the entire control has the background, not just the area with the text contents.
If you’re working with TextView control’s in your Java code, you can also set the alignment of your TextView control programmatically using the setBackgroundResource() method of the View class.

Step 5: Automatically Linking TextView Control Contents

By default, any text contents within a TextView control is displayed as plain text. However, by setting one simple attribute called autoLink, all you can enable automatic detection of web, email, phone and address information within the text. In XML, this property would appear within your TextView control as:

1	android:autoLink="all"

You can see an example of a TextView control with automatic links in the figure above. This TextView control has no special handling link processing; its contents are just a string. The Android operating system detects the phone number, which, when clicked, launches the Phone application. Similarly, the email launches the user’s preferred email app. The URL launches the Browser application. If you were to include a fully resolvable address, it would be linked with the Maps application.
If you’re working with TextView control’s in your Java code, you can also set the autoLink feature of your TextView control programmatically using the setAutoLinkMask() method of the TextView class.

Step 6: Working with Multi-Line TextView Controls

By default, text contents of a TextView control will wrap and continue on multiple lines unless you specify otherwise. You can customize this behavior in a number of ways:

• You can use the android:lines attribute to set the TextView control to a specific number of lines.
• You can use the android:minLines and android:maxLines attribute to set the TextView control to a never grow smaller or larger than specific number of lines.
• You can use the android:singleLine attribute to avoid wrapping onto multiple lines, but instead provide a one line alterative view of the text.
• You can use the android:lineSpacingExtra attribute to specify the distance of whitespace between each line (e.g. double spaced for readability).

You can see examples of multi-line and line-spaced TextView controls in the figure above.
If you’re working with TextView control’s in your Java code, you can also modify these settings programmatically using the appropriate methods of the TextView class (see the TextView class information with the Android SDK documentation for details).

Step 7: Customizing the Text Color of a TextView Control

You can control the color of the text within the TextView control by using the textColor attribute. This attribute can be set to a color resource, or a specific color by hex value. In XML, this property would appear within your TextView control as:

1	android:textColor="#ff0000"

You can see an example of a red TextView control in the figure above. If you’re working with TextView control’s in your Java code, you can also set the color attribute of your TextView control programmatically using the setTextColor() method of the TextView class.
You can also create a rather subtle kind of glow effect on your TextView control using the shadowColor, shadowDx, shadowDy, and shadowRadius attributes, as shown in the bottom TextView control of the figure. These attributes are programmatically equivalent to the setShadowLayer() method of the TextView class.

Step 8: Customizing the Styling and Font Family of a TextView Control

You can control the style of the text (bold, italic) and font family (sans, serif, monospace) within the TextView control by using the textStyle and typeface attributes. In XML, these properties would appear within your TextView control as:

1 2	android:textStyle="bold" android:typeface="monospace"

You can see examples of bold and monospace TextView controls in the figure above. If you’re working with TextView control’s in your Java code, you can also set the both attributes of your TextView control programmatically using the setTypeface() method of the TextView class

Conclusion

TextView controls are commonly used in Android application user interfaces to display text contents in different ways. In this tutorial, you learned how to create Android text controls and customize them in a variety of simple ways. These attributes can be mixed and matched to allow for very flexible text display on the screen.