Multiple Views Inside a ScrollView in Android

Last Updated : 25 Aug, 2022

In Android, a ScrollView is a view group that is used to make vertically scrollable views. A scroll view contains a single direct child only. In order to place multiple views in the scroll view, one needs to make a view group(like LinearLayout) as a direct child and then we can define many views inside it. A ScrollView supports Vertical scrolling only, so in order to create a horizontally scrollable view, HorizontalScrollView is used. In this article, we are going to learn how to add multiple views inside a ScrollView.

Note: This Android article covered in both Java and Kotlin languages.

Step by Step Implementation

Step 1: Create a New Project in Android Studio

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio.

Step 2: Working with the activity_main.xml file

Navigate to app > res > layout > activity_main.xml and add the below code to it. Comments are added in the code to get to know in detail.

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">

    <!-- using ScrollView  -->
    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/white">
        
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical" >
           
              <!-- using Linear Layout To add 
                 multiple views inside it  -->
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical">

                <Button
                    android:id="@+id/textView"
                    android:layout_width="match_parent"
                    android:layout_height="150dp"
                    android:textSize="30dp"
                    android:textColor="@color/purple_700"
                    android:textAlignment="center"
                    android:backgroundTint="@color/white"
                    android:text="GeeksforGeeks"
                    android:layout_marginTop="10dp"/>

                <Button
                    android:id="@+id/textView2"
                    android:layout_width="match_parent"
                    android:layout_height="150dp"
                    android:textSize="30dp"
                    android:textColor="@color/purple_700"
                    android:textAlignment="center"
                    android:text="GeeksforGeeks"
                    android:backgroundTint="@color/white"
                    android:layout_marginTop="10dp"/>

                <Button
                    android:id="@+id/textView3"
                    android:layout_width="match_parent"
                    android:layout_height="150dp"
                    android:textSize="30dp"
                    android:layout_marginTop="10dp"
                    android:textColor="@color/purple_700"
                    android:textAlignment="center"
                    android:backgroundTint="@color/white"
                    android:text="GeeksforGeeks" />

                <TextView
                    android:id="@+id/textView4"
                    android:layout_width="match_parent"
                    android:layout_height="150dp"
                    android:textSize="60dp"
                    android:textColor="@color/purple_700"
                    android:textAlignment="center"
                    android:layout_marginTop="10dp"
                    android:padding="3dp"
                    android:background="#8C8A8A"
                    android:text="GeeksforGeeks"/>

                <TextView
                    android:id="@+id/textView5"
                    android:layout_width="match_parent"
                    android:layout_height="150dp"
                    android:textSize="60dp"
                    android:textColor="@color/purple_700"
                    android:layout_marginTop="10dp"
                    android:textAlignment="center"
                    android:padding="3dp"
                    android:background="#8C8A8A"
                    android:text="GeeksforGeeks"/>

                <TextView
                    android:id="@+id/textView6"
                    android:layout_width="match_parent"
                    android:layout_height="150dp"
                    android:textSize="60dp"
                    android:textColor="@color/purple_700"
                    android:layout_marginTop="10dp"
                    android:textAlignment="center"
                    android:padding="3dp"
                    android:background="#8C8A8A"
                    android:text="GeeksforGeeks"/>
            </LinearLayout>

        </LinearLayout>

    </ScrollView>

</androidx.constraintlayout.widget.ConstraintLayout>

Step 3: Working with the MainActivity file

Navigate to app > java > your app's package name > MainActivity file and add the below code to it. Comments are added in the code to get to know in detail.

Java

package com.example.gfgvalidator;

import android.graphics.Color;
import android.graphics.drawable.ColorDrawable;
import android.os.Bundle;
import androidx.appcompat.app.ActionBar;
import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

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

        // for changing the background color of title bar
        ActionBar aBar = getSupportActionBar();
        ColorDrawable cd = new ColorDrawable(Color.parseColor("#FF00FF00"));
        if (aBar != null) {
            aBar.setBackgroundDrawable(cd);
        }
    }
}

Kotlin

package com.example.gfgvalidator;

import android.graphics.Color;
import android.graphics.drawable.ColorDrawable;
import android.os.Bundle;
import androidx.appcompat.app.ActionBar;
import androidx.appcompat.app.AppCompatActivity;

class MainActivity : AppCompatActivity() {

  override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        
        // for changing the background color of title bar
        val aBar = supportActionBar
        val cd = ColorDrawable(Color.parseColor("#FF00FF00"))
        aBar?.setBackgroundDrawable(cd)
    }  
}

Output:

Activity Lifecycle in Android with Demo App

its_codezada17

Improve

Article Tags :

Multiple Views Inside a ScrollView in Android

Step by Step Implementation

Similar Reads

Thank You!

What kind of Experience do you want to share?