New Tutorials:   TKINTER    KOTLIN    JAVASCRIPT    SASS/SCSS    PL/SQL
CLOSE
   Android  ScrollView  Mobile Application  
   Technology    Programming

How to add a ScrollView in Android App

         
 OCTOBER 5, 2020   by onlyklohan

In Android Apps(Learn Android App development) we have seen the Scrolling content which scrolls horizontal or vertical, to add such feature in our Android app we are provided with the ScrollView. A ScrollView is an Android view group which is used to make vertically scrollable views in our andrid app . A ScrollView only contains a direct single child. So in order to place multiple views inside the ScrollView, we simply create a view group(like Android LinearLayout) as a direct child of the ScrollView and inside that view group we defines all other views.

The main disadvantage of ScrollView is that it only support vertical scroll, but to add horizontal scroll we have many other options such as HorizontalScrollView.

So let's implement a simple ScrollView in our android app.

Step 1: Create a new Project

  1. Click on File, then New > New Project. (Learn how to setup Android Studio and create your first Android project)

  2. Choose "Empty Activity" for the project template window .

  3. Select language as Java.

  4. Select the minimum SDK

  5. Now wait for the project to finish building.

Step 2: Modify activity_main.xml

Add the ScrollView inside RelativeLayout and inside the ScrollView add a LinearLayout with orientation vertical.

android:orientation="vertical"

And inside LinearLayout container we add multiple views which we want to scroll. Complete code of activity_main.xml is shown below:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    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:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <Button
                android:background="#4CAF50"
                android:text="Hello World 1"
                android:layout_width="match_parent"
                android:layout_height="200dp"/>
            <ImageView
                android:background="#2196F3"
                android:layout_width="match_parent"
                android:layout_height="200dp"/>

            <TextView
                android:background="#FF0D59"
                android:layout_width="match_parent"
                android:layout_height="200dp"/>

            <Button
                android:background="#24d"
                android:layout_width="match_parent"
                android:layout_height="200dp"/>

            <Button
                android:background="#673AB7"
                android:text="Hello World 2"
                android:layout_width="match_parent"
                android:layout_height="200dp"/>
            <ImageView
                android:background="#9C27B0"
                android:layout_width="match_parent"
                android:layout_height="200dp"/>

            <TextView
                android:background="#E91E63"
                android:layout_width="match_parent"
                android:layout_height="200dp"/>

            <Button
                android:background="#F44336"
                android:layout_width="match_parent"
                android:layout_height="200dp"/>

            <Button
                android:background="#03A9F4"
                android:text="Hello World 3"
                android:layout_width="match_parent"
                android:layout_height="200dp"/>
            <ImageView
                android:background="#FF5722"
                android:layout_width="match_parent"
                android:layout_height="200dp"/>

            <TextView
                android:background="#FF9800"
                android:layout_width="match_parent"
                android:layout_height="200dp"/>

            <Button
                android:background="#8BC34A"
                android:layout_width="match_parent"
                android:layout_height="200dp"/>

            <Button
                android:background="#FFEB3B"
                android:text="Hello World 4"
                android:layout_width="match_parent"
                android:layout_height="200dp"/>
            <ImageView
                android:background="#009688"
                android:layout_width="match_parent"
                android:layout_height="200dp"/>

            <TextView
                android:background="#FFA000"
                android:layout_width="match_parent"
                android:layout_height="200dp"/>

            <Button
                android:background="#981874"
                android:layout_width="match_parent"
                android:layout_height="200dp"/>

            <Button
                android:background="#6A7C6B"
                android:text="Hello World 5"
                android:layout_width="match_parent"
                android:layout_height="200dp"/>
            <ImageView
                android:background="#3F51B5"
                android:layout_width="match_parent"
                android:layout_height="200dp"/>

            <TextView
                android:background="#FF0000"
                android:layout_width="match_parent"
                android:layout_height="200dp"/>

            <Button
                android:background="#00FF1A"
                android:layout_width="match_parent"
                android:layout_height="200dp"/>

            <TextView
                android:text="The quick, brown fox jumps over a lazy dog. DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps. Bawds jog, flick quartz, vex nymphs. Waltz, bad nymph, for quick jigs vex! Fox nymphs grab quick-jived waltz. Brick quiz whangs jumpy veldt fox. Bright vixens jump; dozy fowl quack. Quick wafting zephyrs vex bold Jim. Quick zephyrs blow, vexing daft Jim. Sex-charged fop blew my junk TV quiz. How quickly daft jumping zebras vex. Two driven jocks help fax my big quiz. Quick, Baz, get my woven flax jodhpurs! Now fax quiz Jack! my brave ghost pled. Five quacking zephyrs jolt my wax bed. Flummoxed by job, kvetching W. zaps Iraq. Cozy sphinx waves quart jug of bad milk. A very bad quack might jinx zippy fowls. Few quips galvanized the mock jury box. Quick brown dogs jump over the lazy fox. The jay, pig, fox, zebra, and my wolves quack! Blowzy red vixens fight for a quick jump. Joaquin Phoenix was gazed by MTV for luck. A wizard’s job is to vex chumps quickly in fog. Watch Jeopardy!, Alex Trebek's fun TV quiz game. Woven silk pyjamas exchanged for blue quartz. Brawny gods"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"/>

        </LinearLayout>
    </ScrollView>
</RelativeLayout>

Step 3: MainActivity.java file

There is nothing to do with the MainActivity.java file for this project, so keep it as it is.

//MainActivity.java file
package com.studytonight.project;
import androidx.appcompat.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);
    }
}

Output:

In the below snapshots, you can see how the ScrollView will look in the android application.

ScrollView example in Android studio

scolling down...

ScrollView example in Android studio

ScrollView example in Android studio

ScrollView example in Android studio

Conclusion:

This is a basic example for creating a ScrollView. You can try different layouts using this in your Android application. If you face any issue while doing this, please share it in the comment section below and we will be happy to help.


RELATED POSTS



Subscribe and receive amazing posts directly in your inbox.