HorizontalScrollView in Android | AndroidMonks

HorizontalScrollView in Android with Example

HorizontalScrollView provides with a Class to create a View that allows scrolling an item in the horizontal manner only. This View is a replacement to the deprecated Gallery class, and can be effectively used to show pictures or any drawable for that matter. Creating aHorizontalScrollView is simple and performs the same process as that of a ScrollView(Vertical Scrolling only)

In this tutorial we will see how to create a simple Image HorizontalScrollView with the help of a Adapter. Adapters are a very effective way to Store any values in a Recurring or a repeating Views. Know more about adapters here.

Once, you are done with knowing what a adapter is, we can continue with the tutorial.

HorizontalScrollView – XML Implementation

Creating a Horizontal ScrollView is simple, it follows the same procedure as to create a ScrollView. Use the XML tag,
HorizontalScrollView
I have a sample Implementation below.

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

HorizontalScrollView – Creating Scrollable Views

It is important to note that, just like we did for a ScrollView, we need to have a child View, which will in turn hold, multiple siblings. This has to be the norm for creating any number of Scrollable Views. See the sample Below for clearer understanding.

<HorizontalScrollView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">
<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">
    <ImageView
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:background="@drawable/monk"/>
    <ImageView
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:background="@drawable/monk"/>
    <ImageView
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:background="@drawable/monk"/>
    <ImageView
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:background="@drawable/monk"/>
    <ImageView
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:background="@drawable/monk"/>
    <ImageView
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:background="@drawable/monk"/>
    <ImageView
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:background="@drawable/monk"/>
    <ImageView
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:background="@drawable/monk"/>
</LinearLayout>
</HorizontalScrollView>

The HorizontalScrollView, by itself cannot hold multiple Views, it has to have only one direct child (which is the LinearLayout in this example) and the child can hold any number of views it wants for a Scrolling Effect.

Upon completion, we can be sure to put the Horizontal ScrollView inside a LinearLayout if you want to, and it is done.

Check the Complete XML implementation for HorizontalScrollView Implementation.

<?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"
    android:gravity="center"
    android:orientation="vertical"
    >

    <HorizontalScrollView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/horizontalView"
        android:layout_gravity="center">

        <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <ImageView
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:background="@drawable/monk"/>
        <ImageView
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:background="@drawable/monk"/>
        <ImageView
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:background="@drawable/monk"/>
        <ImageView
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:background="@drawable/monk"/>
        <ImageView
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:background="@drawable/monk"/>
        <ImageView
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:background="@drawable/monk"/>
        <ImageView
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:background="@drawable/monk"/>
        <ImageView
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:background="@drawable/monk"/>
        <ImageView
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:background="@drawable/monk"/>
        <ImageView
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:background="@drawable/monk"/>

        <ImageView
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:background="@drawable/monk"/>
        <ImageView
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:background="@drawable/monk"/>
        <ImageView
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:background="@drawable/monk"/>
        <ImageView
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:background="@drawable/monk"/>
        <ImageView
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:background="@drawable/monk"/>
    </LinearLayout>
    </HorizontalScrollView>
</LinearLayout>

HorizontalScrollView – Activity implementation

Some of the used Public Methods are.

  • addView(View child, int index) -Adds a child view. If no layout parameters are already set on the child, the default parameters for this ViewGroup are set on the child
  • computeScroll() – Called by a parent to request that a child update its values for mScrollX and mScrollY if necessary. This will typically be done if the child is animating a scroll using a Scroller object.
  • arrowScroll(int direction) – Specifies the direction in which the ScrollView has to slide, in response to a button that has left or right arrow marked in it.
  • fling(int velocityX) – Fling is the motion/gesture that depicts a fast scroll of items. You can specify the velocityX that will fling the items in the X axis (Horizontal)
  • smoothScrollTo(int x, int y) – Provides a smooth scroll instead of a immediate scroll. Can be considered as the opposite to fling action. On performing the fling gesture, it will still move smooth instead of a hurried running of items on the horizontal axis.

Upon knowing all this, you can add these public methods as and when needed. To check the complete list of method calls, you can check here.

Activity implementation

package com.monks.android.newapplication;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.HorizontalScrollView;

public class MainActivity extends AppCompatActivity {
    HorizontalScrollView horizontalScrollView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.horizontal_scrollview);
        horizontalScrollView = findViewById(R.id.horizontalView);
        //Setting Fling Action on it for example purpose
        horizontalScrollView.fling(2);

    }
}

Resulting Application

Horizontal ScrollView
Horizontal ScrollView
Fling Action
Fling Action

Drop in any comments below.

“Learn and Be Curious”

 

Leave a Comment

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