Skip to content

Working with the ScrollView

Jump to bottom Edit New page
Nathan Esquenazi edited this page Feb 24, 2016 · 7 revisions

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

Created by CodePath with much help from the community.

Add a custom sidebar
Clone this wiki locally