Working with the ScrollView

Overview

When an app has layout content that might be longer than the height of the device and that content should be vertically scrollable, then we need to use a ScrollView.

Usage

Vertically Scrolling

To make any content vertically scrollable, simply wrap that content in a ScrollView:

<ScrollView
  android:layout_width="match_parent"
  android:layout_height="match_parent">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical" >   
        
          <TextView
              android:id="@+id/tv_long"
              android:layout_width="wrap_content"
              android:layout_height="match_parent"
              android:text="@string/really_long_string" >
          </TextView>
  
          <Button
              android:id="@+id/btn_act"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:text="View" >
          </Button>
    </LinearLayout>
</ScrollView>

Note that a ScrollView can only contain a single child element so if you need multiple things to be scrollable, you need to wrap that content into a layout as shown above.

In certain situations, you want to position content beneath the end of the scrollable content area. For example for a "terms of service" where you can only accept once you've scrolled through all the content. In this case, you might need to apply the android:fillViewport property to "true". Read this post by Romain Guy for a detailed look at this use case.

Scrollable TextView

Note that a TextView doesn't require a ScrollView and if you just need a scrolling TextView simply set the scrollbars property and apply the correct MovementMethod:

<TextView
    android:id="@+id/tv_long"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:scrollbars = "vertical"
    android:text="@string/really_long_string" >
</TextView>

and then in the activity:

TextView tv = (TextView) findViewById(R.id.tv_long);
tv.setMovementMethod(new ScrollingMovementMethod());

Now the TextView will automatically scroll vertically.

Horizontally Scrolling

In other cases, we want content to horizontally scroll in which case we need to use the HorizontalScrollView instead like this:

<HorizontalScrollView
  android:layout_width="match_parent"
  android:layout_height="match_parent">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >   
        <!-- child views in here -->
    </LinearLayout>
</HorizontalScrollView>

and now you have a horizontally scrolling view.

Nested ScrollViews

Adding a ScrollView within another ScrollView can be difficult. Most of the times it won’t end well. You will end up adding few workarounds. Instead, use the NestedScrollView as outlined here. A working sample can be found here as this is very useful when working with CoordinatorLayout

Resources

• http://examples.javacodegeeks.com/android/core/ui/scrollview/android-scrollview-example/
• http://www.curious-creature.org/2010/08/15/scrollviews-handy-trick/
• http://www.androidhub4you.com/2013/05/simple-scroll-view-example-in-android.html
• http://developer.android.com/reference/android/widget/ScrollView.html
• http://developer.android.com/reference/android/widget/HorizontalScrollView.html
• http://www.whitesof.com/?q=tutorials/android/android-scroll-view-tutorial