Android ScrollView sample step by step - Part One

Introduction

This Android Sample, has two parts; the first part, which is this one, will discover How to use TextView class. The TextView class is a subclass of the View class that displays text on the screen. You can control how the text appears with TextView attributes in the XML layout file. This practical shows how to work with multiple TextView elements, including one in which the user can scroll its contents vertically.

In the second part we will illustrate Android ScrollView sample step by step and how to use a scrolling view so that the user can scroll vertically by swiping up or down, or horizontally by swiping right or left.

You would typically use a scrolling view for news stories, articles, or any lengthy text that doesn't completely fit on the device display. You can also use a scrolling view to enable users to enter multiple lines of text, or to combine UI elements (such as a text field and a button) within a scrolling view.


What you will LEARN

In this practical sample you will learn to:

  • Use XML code to add multiple TextView elements.
  • Use XML code to define a scrolling view.
  • Display free-form text with some HTML formatting tags.
  • Style the TextView background color and text color.
  • Include a web link in the text.

What you will DO

In this practical sample, you will:

  • Create the Scrolling Text app.
  • Add two TextView elements for the article heading and subheading.
  • Use TextAppearance styles and colors for the article heading and subheading.
  • Use HTML tags in the text string to control formatting.
  • Use the lineSpacingExtra attribute to add line spacing for readability.
  • Add a ScrollView to the layout to enable scrolling a TextView element.
  • Add the autoLink attribute to enable URLs in the text to be active and clickable.

App overview

The Scrolling Text app demonstrates the ScrollView UI component. ScrollView is a view group that in this example contains a TextView. It shows a lengthy page of text—in this case, a simple article—that the user can scroll vertically to read by swiping up and down. A scroll bar appears in the right margin. The app shows how you can use text formatted with minimal HTML tags for setting text to bold or italic, and with new-line characters to separate paragraphs. You can also include active web links in the text.


Task 1: Add several text views

In this practical, you will create an Android project for the Scrolling Text app, add TextViews to the layout for an article title and subtitle, and change the existing "Hello World" TextView element to show a lengthy article. The figure below is a diagram of the layout.

 

TextView sample overview

 

You will make all these changes in the XML code and in the strings.xml file. You will edit the XML code for the layout in the Text pane, which you show by clicking the Text  tab, rather than clicking the Design tab for the Design pane. Some changes to UI elements and attributes are easier to make directly in the Text pane using XML source code.

1.1 Create the project and TextView elements

 

  1. In Android Studio create a new project with the following parameters:

     

    Attribute

    Value

    Application Name

    Scrolling Text

    Company Name

    android.example.com (or your own domain)

    Phone and Tablet Minimum SDK

    API15: Android 4.0.3 IceCreamSandwich

    Template

    Empty Activity

    Generate Layout File checkbox

    Checked

  2. In the app > res > layout folder, open the activity_main.xml file, and click the Text tab to see the XML code if it is not already selected.

     

     

    At the top, or root, of the view hierarchy is a view group such as ConstraintLayout. Change this view group to RelativeLayout. The second line of code now looks something like this:

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    RelativeLayout allows you to position its child Views relative to each other or relative to the parent RelativeLayout itself.

    The default "Hello World" TextView element that is created by the Empty Layout template is a child View within the RelativeLayout view group. For more information about using a RelativeLayout, see the Relative Layout API Guide.

  3. Add a TextView element above the default "Hello World" TextView . Add the following attributes to the TextView:

     

    TextView #1 attribute

    Value

    android:id

    "@+id/article_heading"

    layout_width

    "match_parent"

    layout_height

    "wrap_content"

    android:background

    "@color/colorPrimary"

    android:textColor

    "@android:color/white"

    android:padding

    "10dp"

    android:textAppearance

    "@android:style/TextAppearance.Large"

    android:textStyle

    "bold"

    android:text

    "Article Title"

     

    Tip: The attributes for styling the text and background are summarized in the TextView class documentation.

  4. Extract the string resource for the android:text attribute's hard-coded string "Article Title" in the TextView to create an entry for it in strings.xml.

     

    Place the cursor on the hard-coded string, press Alt-Enter (Option-Enter on the Mac), and select Extract string resource. Then edit the resource name for the string value to article_title.

    Tip: String resources are described in detail in the String Resources documentation.

  5. Extract the dimension resource for the android:padding attribute's hard-coded string "10dp" in the TextView to create an entry in dimens.xml.

     

    Place the cursor on the hard-coded string, press Alt-Enter (Option-Enter on the Mac), and select Extract dimension resource. Then edit the Resource name to padding_regular.

  6. Add another TextView element above the "Hello World" TextView and below the TextView you created in the previous steps. Add the following attributes to the TextView :

     

    TextView #2 Attribute

    Value

    android:id

    "@+id/article_subheading"

    layout_width

    "match_parent"

    layout_height

    "wrap_content"

    android:layout_below

    "@id/article_heading"

    android:padding

    "@dimen/padding_regular"

    android:textAppearance

    "@android:style/TextAppearance"

    android:text

    "Article Subtitle"

     

    Note that since you extracted the dimension resource for the "10dp" string to padding_regular in the previously

    created TextView , you can use <dimen name="padding_regular">10dp</dimen>

    for the android:padding attribute in this TextView .

  7. Extract the string resource for the android:text attribute's hard-coded string "Article Subtitle" in the TextView to article_subtitle.
  8. In the "Hello World" TextView element, remove the layout_constraint attributes, if they are present.
  9. Add the following TextView attributes to the "Hello World" TextView element, and change the android:text attribute:

     

    TextView Attribute

    Value

    android:id

    "@+id/article"

    android:lineSpacingExtra

    "5sp"

    android:layout_below

    "@id/article_subheading"

    android:text

    Change to "Article text"

     

  10. Extract the string resource for "Article text" to article_text, and extract the dimension resource for "5sp" to line_spacing.
  11. Reformat and align the code by choosing Code > Reformat Code. It is a good practice to reformat and align your code so that it is easier for you and others to understand. What is Next? This part shows how to use TextView class, and how to align several TextViews. In part two, we will discover how to add a ScrollView and a Hyperlink to your text. Further Reading In the following listing you might find these articles useful

1.2 Add the text of the article

In a real app that accesses magazine or newspaper articles, the articles that appear would probably come from an online source through a content provider, or might be saved in advance in a database on the device.

For this practical, you will create the article as a single long string in the strings.xml resource.

1. In the app > res > values folder, open strings.xml.

2. Enter the values for the strings article_title and article_subtitle with a made-up title and a subtitle for the article you are adding. The string values for each should be single-line text without HTML tags or multiple lines.

3. Enter or copy and paste text for the article_text string.

Use the text provided for the article_text string in the strings.xml file of the finished ScrollingText app, or use your own generic text. You can copy and then paste the same sentence over and over, as long as the result is a long section of text that will not fit entirely on the screen.

Keep in mind the following (refer to the figure below for an example):

i. As you enter or paste text in the strings.xml file, the text lines don't wrap around to the next line—they extend

beyond the right margin. This is the correct behavior—each new line of text starting at the left margin represents an entire paragraph.

ii. Enter \n to represent the end of a line, and another \n to represent a blank line.

Why? You need to add end-of-line characters to keep paragraphs from running into each other.

Tip: If you want to see the text wrapped in strings.xml, you can press Return to enter hard line endings, or format

the text first in a text editor with hard line endings.

iii. If you have an apostrophe (') in your text, you must escape it by preceding it with a backslash (\'). If you have a

double-quote in your text, you must also escape it (\"). You must also escape any other non-ASCII characters.See

the "Formatting and Styling" section of String Resources for more details.

iv. Enter the HTML and </b> tags around words that should be in bold.

v. Enter the HTML and </i> tags around words that should be in italics. Note, however, that if you use curled

apostrophes within an italic phrase, you should replace them with straight apostrophes.

vi. You can combine bold and italics by combining the tags, as in ... words...</i></b>. Other HTML tags are ignored.

vii. Enclose The entire text within <string name="article_text"> </string> in the strings.xml file.

viii. Include a web link to test, such as www.google.com (the example below uses www.orcaes.co ). Don't use an

HTML tag—any HTML tags except the bold and italic tags will be ignored and presented as text, which is not what

you want.

 

string resource

 

4. Run the app.


What is Next

In this post, we illustrate how to allign several TextViews in a RelativeLayout, you have displayed the article , and you can even scroll it, but the scrolling is not smooth and there is no scroll bar because you haven't yet included a ScrollView. In part two of this practical, you will add a ScrollView and you will also allow tapping a web link to navigate to a web page.


Further Reading

You might the following articles useful for you:


Share it

Facebook Twitter Google+