Android ScrollView: They see me scrolling, they hate me

Imagine you have a phone with a 4’ screen and you cannot see the whole interface of your favorite app just because a dumb developer forgot or didn’t want to make the view scrollable. Not very elegant, don’t you think?

One of the most basic techniques on Android layout design is scrolling. When you design your interface you have to be sure that your users are able to see the whole content from a wide variety of devices (phones, tablets, TVs, etc) with very different screen sizes. You also have to provide scrollable views in case your users switch to portrait/landscape mode, it would be a mess otherwise. As a developer one of your goals should be that your app is correctly displayed in most devices, that means adjustment. Also consider if you need a layout adapted to a particular screen size or if you could split the content and show it in two different screens rather than scrolling.

Android platform includes basic views to achieve scrolling: ScrollView and HorizontalScrollView. The first one provides vertical scrolling while the last, I’m sure you already guessed that, provides horizontal scrolling (ta-da!). You can introduce scroll views in xml layouts or through java code. I personally prefer to create layouts using the xml way because it’s more efficient and, in my opinion, easier to do and test, so I will use xml for the example:

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
 android:id="@+id/scrollView"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:fillViewport="true">

  <LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:id="@+id/parent">

    <ImageView
      android:id="@+id/imageView"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:src="@drawable/resource" />

    <TextView
      android:id="@+id/textView1"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Example 1" />

    <TextView
      android:id="@+id/textView2"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Example 2" />

    <TextView
      android:id="@+id/textView3"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Example 3" />

    <Button
      android:id="@+id/button"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Button1"/>

 </LinearLayout>

</ScrollView>

That’s a complete layout, depending on device size and mode (portrait or landscape) you will be able to scroll or not.

Things you have to take in mind about ScrollView and HorizontalScrollView:

  • It just allows you to scroll if content doesn’t fit the screen. Why would you want to scroll if there is nothing left to be seen?
  • Must be the parent view of the layout. This is because ScrollView and HorizontalScrollView are FrameLayouts that means you have to put the content inside so you can scroll over it. This is their hierarchy in a very basic diagram:
ScrollView and HorizontalScrollView hierarchy
ScrollView and HorizontalScrollView hierarchy
  • You can wrap other layouts such as LinearLayout or RelativeLayout with scroll views.
<HorizontalScrollView xmlns:android="http://schemas.android.com/apk/res/android"
  android:id="@+id/scrollView"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:fillViewport="true">

  <RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/relativeLayout">

    <TextView
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:text="Hello!" />

  </RelativeLayout>
</HorizontalScrollView>
  • Never nest a ListView inside a scroll view, they are incompatibles because ListView takes care of its own scrolling thing. If you don’t trust me, go ahead, you won’t be able to make the interface work properly. There are solutions to this problem, you can ask Google, but I’d think before if my design is well thought. I don’t recommend this practice. Another approach could be try to create an adapter which use LinearLayouts (for example) as rows and fill each row with content dynamically as needed.
  • The most important property is android:fillViewport, which should be always present. According to the official documentation this parameter “Defines whether the scrollview should stretch its content to fill the viewport”. I usually set it to true.
  • You should set the width and height properties to match_parent since the scroll view is the root component of the layout.

And… that’s all. Now you know how to build a scrollable interface and you have to decide if you need this approach or not. I hope you liked this very basic post about android and don’t hesitate to write a comment to correct me if I’m wrong, to support the post or just rave.

2 thoughts on “Android ScrollView: They see me scrolling, they hate me

Leave a Reply

Your email address will not be published. Required fields are marked *