TIPS COM: Android beginner tutorial Part 13 Scrolling content

Tuesday, February 3, 2015

Android beginner tutorial Part 13 Scrolling content

In this tutorial we will learn how to implement scrolling.

The TextView class uses its own scrolling system and it doesnt need any additional scrolling functionality, but adding visible scroll bars to TextView objects improve the visual look of the application and usability.

There are two container classes that are used to add scroll bars. These are ScrollView and HorizontalScrollView. Note that the ScrollView class only provides a vertical scroll bar. To use both, include the HorizontalScrollView container inside the ScrollView container.

It should be noted that both of these classes are subclasses of the FrameLayout class. This means that these objects can only contain 1 child. Usually this child is a LinearLayout with items stacked horizontally or vertically.

Lets create a simple example that displays a TextView with a large piece of text and make it scrollable.

First, open the strings.xml file and add a "textLorem" object which contains a huge portion of Lorem ipsum text.

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <string name="app_name">Code For Food Test</string>
    <string name="textLorem">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sit amet metus eu lacus faucibus facilisis in ac odio. Maecenas magna ipsum, hendrerit vel pulvinar eget, posuere et arcu. Phasellus semper mollis vestibulum. Mauris nec felis lorem, at porta tellus. Vestibulum vel leo mi, id consequat sem. In hac habitasse platea dictumst. Praesent suscipit auctor tellus quis condimentum. Morbi id sem id justo vestibulum consectetur. Aliquam leo nisl, tempus quis feugiat at, varius a sem. Proin nulla augue, scelerisque eu rutrum sit amet, aliquam eu leo. Nullam justo mauris, tristique quis condimentum in, sagittis a massa.</string>
    <string name="menu_settings">Settings</string>

</resources>

Now go to activity_main.xml and use this code:

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    tools:context=".MainActivity" >
        
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/textLorem" 
        android:textSize="24sp"/>

</ScrollView>

Test this on an emulator or a device and you will see that the text is vertically scrollable.

You can add multiple elements this way:

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    tools:context=".MainActivity" >
        
    <LinearLayout 
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical">
    
    <Button 
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="A button"
        />
    
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/textLorem" 
        android:textSize="24sp"/>
    
    <Button 
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Another button"
        />
    
    </LinearLayout>

</ScrollView>

That is all there is to it!

Thanks for reading.

TIPS COM

Tuesday, February 3, 2015

Android beginner tutorial Part 13 Scrolling content

No comments:

Post a Comment