Android ScrollView Tutorial With Example | Horizontal ScrollView In Android

android gridview, android fragment tutorial, android scrollview, android horizontal scrollview, android fillviewport, android spinner

Hello and welcome to Android ScrollView Tutorial With Example.

You can directly go to the practical examples using the below table of content.

1. Android ScrollView Tutorial With Example | Vertical ScrollView In Android

2. Android Horizontal ScrollView Tutorial With Example For Beginners

There are some cases where you need to display so much vertical information that it can not be displayed in the screen of the device.

For example, you are showing the details about any restaurant. Here, first you will show a big rectangle photo of the restaurant, then the name, address, opening hours, food menu, pricing etc.

Screen of mobile device has not enough space to show all these information at once. Here, Scroll view will help you.

If you put all this information inside the scroll view, user will be able to scroll down or up vertically to show all the information.

Scroll view enable us to create vertical scrollable layout. For horizontal scrolling, we need to use Horizontal Scroll View.

ScrollView is a subclass of frame layout. As frame layout allows only one child, you can place only one child view in scroll view. Child of scroll view can contain entire view hierarchy.

For example, You can add linearlayout with vertical orientation as a child of scrollview. Inside this linearlayout, you can add as many user interface widgets as you want.

RecyclerView and ListView have scrolling effect by default. So you should never add both these elements to the scrollview. It will led to poor user interface performance and a poor user experience.

Similarly, in the child element of ListView or RecyclerView, it is advisable not to use ScrollView. Such thing will also confuse user about scrolling purpose.

You should use the scrollview when you have specific or static number of the children.

If you have dynamic number of children, something like result for “restaurants near me”.

Here, number of restaurants will be different in the different locations. In this case, you can use ListView or RecyclerView.

XML Property

Following is the XML representation of the scrollview.

 <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fillViewport="true"
        android:id="@+id/scrollView">

Below are the properties associated with scroll view.

1. android:layout_width 

It will define the width of the scroll view. Generally, you should give value as match_parent so that it reduce the complexity for different screen size.

But you can also give fix size in the dp.

2. android:layout_height

You can set the height of the scroll view by using this property.

To give fix height to the scroll view, you can use dp here also.

3. android:id

Id will specify the unique identity to the scroll view.

When you want to access your scroll view in the java file, You will need this id in the findViewById() method.

This id should be unique in the whole android studio project to reduce complexity and data redundancy.

4. android:fillViewport

It defines whether the scrollview should stretch its content to fill the viewport.

This property accepts boolean value. If true then scroll view will stretch it’s content otherwise not.

For more details about this property, visit this tutorial.

Methods of ScrollView

Android gives some methods to programmatically control the scroll view from JAVA class.

Following are various methods.

1. addView(View child)

You can add a child view to your scroll view using this method.

2. isFillViewport()

Indicates whether this ScrollView’s content is stretched to fill the viewport.

This method will return the boolean value (true or false).

If fillViewport property is enabled then it will return true otherwise false.

3. onTouchEvent(MotionEvent ev)

Implement this method to handle touch screen motion events.

4. requestChildFocus(View child, View focused)

Called when a child of this parent wants focus.

By default, system has focus on the scroll view. Suppose you have edittext in the scroll view. Now you can use this method to request focus on this method to enter the text.

5. scrollTo(int x, int y)

Set the scrolled position of your view.

This version also clamps the scrolling to the bounds of our child.

6. setFillViewport(boolean fillViewport)

Indicates this ScrollView whether it should stretch its content height to fill the viewport or not.

You can pass boolean value (true or false) in the parameter of this method.

If you pass true then system will stretch its content height to fill the viewport.

7. setSmoothScrollingEnabled(boolean smoothScrollingEnabled)

Set whether arrow scrolling will animate its transition.

8. computeVerticalScrollRange()

The scroll range of a scroll view is the overall height of all of its children.





1. Android ScrollView Tutorial With Example | Vertical ScrollView In Android

Let us develop two projects in android studio to understand the scrollview practically.

In the first example, we will use plenty of buttons to make our view scrollable.

It will be simple example to understand the core elements in the scrollview.

So follow all the below steps to make first example.

Step 1. XML code

Make a new fresh project in the android studio.

When you are going through the process of making a new project in android studio, you will be asked to choose the type of the main activity.

Here, you need to select Empty Activity. Empty activity does not write any source code automatically, so that we can have complete clear and empty project.

Now in the new project, there are two files. activity_main.xml and MainActiivity.java.

In the activity_main.xml file, you need to write down the following coding lines.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

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

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="10dp"
                android:background="#000"
                android:text="Button 1"
                android:textColor="#fff"
                android:textStyle="bold" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="10dp"
                android:background="#e71313"
                android:text="Button 2"
                android:textColor="#fff"
                android:textStyle="bold" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="10dp"
                android:background="#14e634"
                android:text="Button 3"
                android:textColor="#fff"
                android:textStyle="bold" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="10dp"
                android:background="#dc12ea"
                android:text="Button 4"
                android:textColor="#fff"
                android:textStyle="bold" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="10dp"
                android:background="#08e9b5"
                android:text="Button 5"
                android:textColor="#fff"
                android:textStyle="bold" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="10dp"
                android:background="#000"
                android:text="Button 6"
                android:textColor="#fff"
                android:textStyle="bold" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="10dp"
                android:background="#e2c90d"
                android:text="Button 7"
                android:textColor="#fff"
                android:textStyle="bold" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="10dp"
                android:background="#bc10f1"
                android:text="Button 8"
                android:textColor="#fff"
                android:textStyle="bold" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="10dp"
                android:background="#eda514"
                android:text="Button 9"
                android:textColor="#fff"
                android:textStyle="bold" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="10dp"
                android:background="#13e8f7"
                android:text="Button 10"
                android:textColor="#fff"
                android:textStyle="bold" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="10dp"
                android:background="#000"
                android:text="Button 11"
                android:textColor="#fff"
                android:textStyle="bold" />

        </LinearLayout>

    </ScrollView>

</android.support.constraint.ConstraintLayout>

In this file, the root element is ConstraintLayout.

After this ConstraintLayout, I have taken the scroll view.

Now scroll view should have only one child. Here, we are going to develop vertical scroll view.

So I have taken a Linear Layout inside the scroll view.

Now inside this linear layout you add as many widgets as you want.

I have taken eleven buttons inside this linear layout.

Make sure that orientation property of linear layout has “vertical” value. (So that all the child elements will be set vertically)

Now because our linearlayout’s parent element is scroll view, android will make our linearlayout and it’s child elements scrollable.

Step 2. Main JAVA

We do not need to change anything in the Main file MainActivity.java

Source code for MainActivity.java is as the below

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

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}

So after this much writings, you should get the following output

Second Example For ScrollView

First example includes only buttons in the scrollview.

In this example, we will see how we can put different views like imageview, textview, button etc. together inside the scroll view.

So create another brand new project in android studio with empty activity as the default activity.

Step 1. Changing XML Files

When you create a new project in android studio, you will have two files, activity_main.xml and MainActivity.java

In the activity_main.xml file, add the following coding lines

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

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

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:padding="10dp">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:scaleType="fitXY"
                android:src="@mipmap/sppp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="10dp"
                android:text="Spider-Man is a fictional superhero created by writer-editor Stan Lee and writer-artist Steve Ditko. He first appeared in the anthology comic book Amazing Fantasy #15 (August 1962) in the Silver Age of Comic Books. He appears in American comic books published by Marvel Comics, as well as in a number of movies, television shows, and video game adaptations set in the Marvel Universe."
                android:textSize="25sp" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="10dp"
                android:background="#f40eb3"
                android:text="Book Ticket"
                android:textColor="#fff"
                android:textStyle="bold" />

        </LinearLayout>


    </ScrollView>

</LinearLayout>

Similar to the XML file of the first example, this file also have one scrollviw.

Inside this scrollview there is only element. It is linearlayout.

Orientation of linearlayout is vertical so that all the children widgets of this linearlayout are set in the vertical format.

This linearlayout has three elements. ImageView, TextView and Button.

Textview has long text such that it can not be written on the small screen of mobile device.

Imageview is above the textview and button is at the bottom of the textview.

Thus android will enable the scroll for this layout.

Step 2. Main Code

We do not need to change anything in the MainActivity.java file.

Source code for MainActivity.java file is as the following

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

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}

2. Android Horizontal ScrollView

Warmest welcome to Android Horizontal ScrollView Tutorial With Example For Beginners.

I will explain about the definition and usage about the horizontal scroll view in this tutorial.

There are some cases where you need to show the icons or other things in the horizontal manner.

Now if the number of items are large then small screen of mobile device can not handle these items. Here, horizontal scroll view holds our hand.

For example, you are developing an app about the book store or library. Now you want to make bookshelf in this app.

Bookshelf have horizontal design where you will show the cover page books in a horizontal manner.

Of course, there are much books in the every category. Here, you need to use the horizontal scroll view to show case book shelf with plenty of book cover pages.

A Horizontal scroll view is a subclass of Frame Layout meaning that you should place one child in it containing the entire contents to scroll. This child may itself be a layout manager with a complex hierarchy of objects.

Generally, developers prefer to use Linearlayout as an only child of the Horizontal Scroll View. Here, orientation of linearlayout is horizontal so that compiler place every child horizontally.

The TextView class also takes care of its own scrolling, so does not require a HorizontalScrollView, but using the two together is possible to achieve the effect of a text view within a larger container.

Using horizontalscrollview, you can enable horizontal scrolling only.

For vertical scrolling you should use Scroll View or ListView or RecyclerView Widgets.

XML Information

Following is the XML representation of the horizontalscrollview.

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

Following are the important properties of the horizontal scroll view.

1. android:layout_height

You can set the height of the horizontal scroll view by using this property.

To give fix height to the horizontal scroll view, you can use dp also.

2. android:layout_width 

It will define the width of the horizontal scroll view. Generally, you should give value as match_parent so that it reduce the complexity for different screen size.

But you can also give fix size in the dp.

3. android:id

Id will specify the unique identity to the scroll view.

When you want to access your horizontal scroll view in the java file, You will need this id in the findViewById() method.

This id should be unique in the whole android studio project to reduce complexity and data redundancy.

4. android:fillViewport

It defines whether the horizontal scrollview should stretch its content to fill the viewport.

This property accepts boolean value. If true then scroll view will stretch it’s content otherwise not.

For more details about this property, visit this tutorial.

Methods of Horizontal Scroll View

1. addView(View child)

Using the above method, you can add a child from the java class.

2. arrowScroll(int direction)

Handle scrolling in response to a left or right arrow click.

3. computeScroll()

Called by a parent to request that a child update its values for mScrollX and mScrollY if necessary.

4. fullScroll(int direction)

This method handles scrolling in response to a “home/end” shortcut press.

5. isFillViewport()

Indicates whether this HorizontalScrollView’s content is stretched to fill the viewport.

This method checks whether the fillViewPort option is enabled for horizontal scroll view or not.

6. onTouchEvent(MotionEvent ev)

Implement this method to handle touch screen motion events.

7. requestChildFocus(View child, View focused)

Called when a child of this parent wants focus.

By default focus is hold by the horizontalscrollview.

8. scrollTo(int x, int y)

Set the scrolled position of your view.

This version also clamps the scrolling to the bounds of our child.

9. setFillViewport(boolean fillViewport)

Indicates this HorizontalScrollView whether it should stretch its content width to fill the viewport or not.

10. onSizeChanged(int w, int h, int oldw, int oldh)

This is called during layout when the size of this view has changed.





2. Android Horizontal ScrollView Tutorial With Example For Beginners

Create a new and fresh project in the android studio.

While you are going through the process of preparing a brand new project in android studio, you will be asked to choose the type of the default activity.

Here, I recommend you to select Empty Activity. Empty activity does not write any source code automatically, so that we can have complete clear and empty project workspace.

Now in the new project, there are two automatically generated files. activity_main.xml and MainActiivity.java.

Step 1. Make XML file

In the activity_main.xml file, you need to add the below source code

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

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

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="200dp"
            android:orientation="horizontal">

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="10dp"
                android:background="#000"
                android:text="Button 1"
                android:textColor="#fff"
                android:textStyle="bold" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="10dp"
                android:background="#e71313"
                android:text="Button 2"
                android:textColor="#fff"
                android:textStyle="bold" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="10dp"
                android:background="#14e634"
                android:text="Button 3"
                android:textColor="#fff"
                android:textStyle="bold" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="10dp"
                android:background="#dc12ea"
                android:text="Button 4"
                android:textColor="#fff"
                android:textStyle="bold" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="10dp"
                android:background="#08e9b5"
                android:text="Button 5"
                android:textColor="#fff"
                android:textStyle="bold" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="10dp"
                android:background="#000"
                android:text="Button 6"
                android:textColor="#fff"
                android:textStyle="bold" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="10dp"
                android:background="#e2c90d"
                android:text="Button 7"
                android:textColor="#fff"
                android:textStyle="bold" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="10dp"
                android:background="#bc10f1"
                android:text="Button 8"
                android:textColor="#fff"
                android:textStyle="bold" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="10dp"
                android:background="#eda514"
                android:text="Button 9"
                android:textColor="#fff"
                android:textStyle="bold" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="10dp"
                android:background="#13e8f7"
                android:text="Button 10"
                android:textColor="#fff"
                android:textStyle="bold" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="10dp"
                android:background="#000"
                android:text="Button 11"
                android:textColor="#fff"
                android:textStyle="bold" />

        </LinearLayout>

    </HorizontalScrollView>

</android.support.constraint.ConstraintLayout>

Above file make a layout where compiler will put 11 buttons horizontally which you can scroll horizontally.

Root layout of this file is the constraint layout.

Constraint layout has only one child, which is the HorizontalScrollView. This tag is the main element, which will enable us to make our layout horizontal scrollable.

Now official documentation of HorizontalScrollView says that it should contain only one child.

So HorizontalScrollView also have only one child, which is Linearlayout.

This linearlayout contains the 11 buttons. Orientation property of linearlayout has the value “horizontal”.

Because of this “horizontal” value of orientation property, linearlayout will arrange all the eleven buttons in the horizontal manner.

If the value of orientation property is “vertical” then there is no meaning of using horizontal scroll view.

Step 2. Java Writings

Our main task in this project is to make horizontal scroll view.

We can achieve it from XML file activity_main.xml only.

So we do not need to do any programming logic in the JAVA file.

Hence, do not update anything in the MainActivity.java file.

Source code for MainActivity.java file is looking like the below

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

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}

After this much work in this project, run it and you should get the below output

Another Example For Android Horizontal Scroll View

Our first example was adding only buttons in the horizontal scroll view.

Now in this example, I will add images in the horizontal scroll view.

So again, make a new project in the android studio.

Again this time, you need select Empty activity as the default activity in this project.

Step 1. Updating activity_main.xml file

You will find activity_mian.xml file in this project also.

This time, source code for activity_mian.xml file is looking like the below

<?xml version="1.0" encoding="utf-8"?>
<HorizontalScrollView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        android:layout_marginTop="100dp">

        <ImageView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:scaleType="fitXY"
            android:padding="5sp"
            android:src="@mipmap/spider"/>
        <ImageView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:scaleType="fitXY"
            android:padding="5sp"
            android:src="@mipmap/hulk"/>
        <ImageView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:scaleType="fitXY"
            android:padding="5sp"
            android:src="@mipmap/captain"/>
        <ImageView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:scaleType="fitXY"
            android:padding="5sp"
            android:src="@mipmap/scarlet"/>
        <ImageView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:scaleType="fitXY"
            android:padding="5sp"
            android:src="@mipmap/blackp"/>
        <ImageView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:scaleType="fitXY"
            android:padding="5sp"
            android:src="@mipmap/widow"/>
        <ImageView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:scaleType="fitXY"
            android:padding="5sp"
            android:src="@mipmap/iron"/>
        <ImageView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:scaleType="fitXY"
            android:padding="5sp"
            android:src="@mipmap/spider"/>
        <ImageView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:scaleType="fitXY"
            android:padding="5sp"
            android:src="@mipmap/spider"/>

    </LinearLayout>

</HorizontalScrollView>

The parent element of this file is the HorizontalScrollView.

As mentioned in the previous example, horizontal scroll view can have only one child tag so this parent element have one child as a linearlayout.

Now this linearlayout contains several number of imageviews.

All this imageviews have mages of different marvel heroes.

Orientation property for this linearlayout has the value “horizontal”. Hence, compiler will set every image horizontally.

You can scroll to view all the images. You can also add textview, button,imageview together to make horizontal scroll view something like you can find on the play store.

Play store shows us various apps which are horizontally scrollable along with the app icon and app name.

Step 2. Java Programme

Similar to previous example, we have written all the logic for horizontal scroll view in the activity_main.xml file.

So again, we should not touch MainActivity.java file.

This file may look like the below

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

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}

\