ScrollView in Android – Overview and Implementation

ScrollView in Android – Overview and Implementation

ScrollView is another frequently used view, which gives the ability to scroll through a list of items in the fixed part of the screen. The Scroll View may have one or more child elements placed within it. It is used mainly with a Listview in order to facilitate long list of items. Check the image below for clearer understanding.

ScrollView
ScrollView in Android

 

ScrollView – Declaration

It is important to note that, Scroll view usage should be restricted to long list of items only. Scrolling through the Facebook feeds contains never ending amount of feeds, this creates a better user experience. However, implementing a ScrollView in a simple Login/Signup page does not provide a cleaner UI.

Choose the place to implement the Scroll View properly. The declaration is as below.

<ScrollView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"></ScrollView>

This View implementation takes two properties layout_width & layout_height as default properties.

 

ScrollView – Frequently Used Properties

The following properties are used frequently in Scroll View

android:id – This is to give a unique identification to the Scroll View that is created

android:layout_gravity – Aligns the Scroll view with respect to its parent.

android:background – Allows a drawable value to this, can also assign a background color.

android:fillViewport – This is a boolean property which tells if the content inside the scroll view should scale to fill the layout or not.

We can play around with other properties of the views and create our custom Scroll view as well.

ScrollView – Vertical Implementation

Just like any other view, we can implement a Vertical scrolling, by holding the elements inside a scroll view with a LinearLayout like below. Scroll View is not capable of holding elements, it is merely suggests that the elements inside needs to be scrolled.

Our example XML:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ScrollView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
        android:background="@color/colorAccent">
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Text"/>
        <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Text"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Text"/>
        </LinearLayout>
    </ScrollView>

</LinearLayout>

This creates a simple scroll view like below

ScrollView Vertical Simple Implementation
ScrollView Vertical Simple Implementation

Once you are done with longer lists, we can see the scrolling effect of the TextView easily.

ScrollView – Horizontal Implementation

There can be cases where you might have to create a horizontal ScrollView, we make use of the XML tag, HorizontalScrollView.

<HorizontalScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    
</HorizontalScrollView>

Once you are done with implementing the horizontal scroll view, it is pretty much the same process, except we will use a LinearLayout with a Horizontal Orientation.

<HorizontalScrollView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/colorPrimaryDark"
    >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#fff"
            android:layout_gravity="center"
            android:text="Text1" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#fff"
            android:layout_gravity="center"
            android:text="Text2" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#fff"
            android:layout_gravity="center"
            android:text="Text3" />
    </LinearLayout>
</HorizontalScrollView>

This will create a simple Horizontal Scrolling, and can be used to move cards horizontally.

ScrollView – Points to Remember

  • Always implement the scroll view only when there is a absolute need to allow the user to scroll through a long list of data because a user does not like to scroll to find one element.
  • Choose horizontal or Vertical Scrolling wisely, before hand as this can result in a cleaner UI for the user
  • Do not, put both the Horizontal and Vertical scrolling into each other. This creates a very shabby movement and disrupts the User focus.
  • It is advisable to create a wireframe before you implement the scroll views.
  • Make sure that there is enough screen space for the viewer to see the other elements when they are scrolling (3-4 elements minimum should be shown, anything less than that, it feels very shabby for space).

Drop in any comments regarding the Scroll View below!

“Learn and Be Curious”.

Leave a Comment