Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Table of contents
1.
Introduction
2.
Scroll View
2.1.
For example:
3.
Attributes of Scroll View
3.1.
Example:
3.2.
strings.xml:
3.3.
activity_main.xml:
3.4.
MainActivity.kt:
3.5.
Output:
4.
Horizontal Scroll View
4.1.
Example
4.2.
strings.xml:
4.3.
activity_main.xml:
4.4.
MainActivity.kt:
4.5.
Output:
5.
FAQs
6.
Key Takeaways  
Last Updated: Mar 27, 2024
Easy

Android Scroll View

Author Pradeep Kumar
1 upvote
Master Python: Predicting weather forecasts
Speaker
Ashwin Goyal
Product Manager @

Introduction

In this blog, we will look into the Scroll View of Android. ScrollView allows you to scroll across several views within a parent view group. We will discuss how Scroll View is created and registered. Additionally, we will look at the different kinds of attributes a Scroll View can have and their uses.

In this article, we will be using the Android Studio application, so in case you haven't yet set up the application on your system, you can check out this article.

Scroll View

ScrollView is a view group that we can use to create vertically scrollable views. There is only one direct child in a scroll view. Because a ScrollView can only scroll vertically, you'll need to use a Horizontal Scroll View to create a horizontally scrollable view.

The ScrollView tag is used to create a Scroll View in an android application.

For example:

<ScrollView
        android:id="@+id/scrollView2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginStart="1dp"
        android:layout_marginEnd="1dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <TextView
            android:id="@+id/scroll_text"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:text="@string/scroll_text" />
    </ScrollView>

In the above example, Scroll View has one child, which is a TextView widget. Here the android:orientation of the Text View widget is set to vertical. It defines whether to display child views in a row or column.

Attributes of Scroll View

Following are some of the important attributes of a Scroll View:

  • android:id: A Unique id to identify any widget
  • android:layout_width: It defines the width of the layout
  • android:layout_height: It sets the layout's height 
  • android:layout_marginStart: The amount of space needed at the start of the widget
  • android:layout_marginEnd: It represents the amount of space needed on the End of the widget
  • android:inputType: This allows you to define the input method's behaviour
  • android:text: Specifies the default text displayed in the field
  • app:layout_constraintTop_toTopOf: Align the desired view's top with the top of another

Example:

Now that we have learned what a Scroll View is. Let's learn how to code it in a program by building a basic Android application that uses Scroll View

First, we need to create a new project in Android Studio by selecting the empty activity option. Now add some strings that will be displayed on the screen, in the strings.xml file.

strings.xml:

<resources>
    <string name="app_name">Scroll View - Vertical</string>
    <string name="scroll_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id lacinia magna. Nunc ac neque non dolor accumsan tincidunt. Cras eu ante laoreet, semper nisl quis, auctor arcu. Nullam quis commodo risus. In nisi sapien, laoreet ac justo a, ultricies vestibulum est. Nulla facilisi. Aenean lectus lacus, tristique ut semper eu, vulputate ac metus. Nullam tempor sagittis mi, non aliquet nunc blandit a. Vestibulum eget hendrerit lacus. Mauris iaculis est sed tellus imperdiet varius. Vestibulum a diam sem. Donec vestibulum, erat sit amet ornare ullamcorper, massa enim volutpat sem, eu facilisis velit leo eget nibh. Curabitur dapibus viverra elit ac tristique. Etiam maximus ut eros ac finibus. Pellentesque vitae est eros.
</string>
</resources>

In the string tag named "scroll_text," add a large text, preferably more than 1000-1500 words, so that viewing the whole text needs scrolling. 

In this activity_main.xml file, we have added code for adding one Scroll View

activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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:id="@+id/scrollView2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginStart="1dp"
        android:layout_marginEnd="1dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <TextView
            android:id="@+id/scroll_text"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:text="@string/scroll_text" />
    </ScrollView>

</androidx.constraintlayout.widget.ConstraintLayout>

Now, go to the MainActivity.kt file. The code for the same would look something like this:

MainActivity.kt:

package com.example.scrollview_horizontal

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }
}

Output:

 

Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

Horizontal Scroll View

Horizontal Scroll View is used to add horizontal scroll ability in an android application. We can use the Horizontal Scroll View tag to create the same.

Example

First, we need to create a new project in Android Studio by selecting the empty activity option. Now add some strings that will be displayed on the screen, in the strings.xml file.

strings.xml:

<resources>
    <string name="app_name">Horizontal Scroll View</string>
    <string name = "text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id lacinia magna. Nunc ac neque non dolor accumsan tincidunt. Cras eu ante laoreet, semper nisl quis, auctor arcu. Nullam quis commodo risus. In nisi sapien, laoreet ac justo a, ultricies vestibulum est. Nulla facilisi. Aenean lectus lacus, tristique ut semper eu, vulputate ac metus.</string>
</resources>

In this activity_main.xml file, we have added code for adding a Horizontal Scroll View

activity_main.xml:

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

    <LinearLayout
        android:layout_width="250dp"
        android:layout_height="250dp"
        android:layout_marginTop="25dp"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/text1"
            android:layout_width="250dp"
            android:layout_height="250dp"
            android:layout_marginRight="25dp"
            android:text="@string/text" />

        <TextView
            android:id="@+id/text2"
            android:layout_width="250dp"
            android:layout_height="250dp"
            android:layout_marginRight="25dp"
            android:text="@string/text"/>

        <TextView
            android:id="@+id/text3"
            android:layout_width="250dp"
            android:layout_height="250dp"
            android:layout_marginRight="25dp"
            android:text="@string/text"/>

    </LinearLayout>
</HorizontalScrollView>

Now, go to the MainActivity.kt file. The code for the same would look something like this:

MainActivity.kt:

package com.example.scrollview_horizontal

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }
}

Output:

By scrolling from left to right or vice versa, you can read the full text.

FAQs

1. What is the use of XML attribute android:fillViewport?
Answer: It defines whether the scroll view should stretch its content to fill the viewport.

2. How can we place multiple views in a scroll view?
Answer: To add many views, we can create a view group (such as LinearLayout) as a direct child and then add multiple views inside it.

3. How do we specify which scroll bar to display?
Answer: android:scrollbars property can be used to specify the scroll bar that needs to be displayed. 

Check this out : usb debugging

Key Takeaways  

In this article, we have extensively discussed the Scroll View in Android and its implementation in Android Studio. We discussed how Scroll View could be created and registered in an android application.

We hope that this blog has helped you enhance your knowledge regarding the Scroll View. All the widgets are enclosed inside a UI layout and if you would like to learn more about layouts, check out our article on Android UI layouts. And to learn in-depth about android development, check out our Android Development course on the Coding Ninjas website. Do upvote our blog to help other ninjas grow. Happy Coding!

Previous article
List View in Android
Next article
Android Card View
Live masterclass