NestedScrollView in Android with Example

Last Updated : 29 Jan, 2025

NestedScrollView is an advanced version of ScrollView, that supports nested scrolling operations allowing it to act as both a parent and child. NestedScrollView is used when there is a need for a scrolling view insidee which view to scroll. Let’s discuss a NestedScrollView in Android by taking an example. another scrolling view. You have seen this in many apps for example when we open a pdf file and when we reached the end of the PDF there is an Ad below the pdf file. This is where NestedScrollView comes in. Normally this would be difficult to accomplish since the system would be unable to decide.

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.

The code for that has been given in both Java and Kotlin Programming Language for Android.

Step 2: Working with the activity_main.xml File

Go to the app > res > values > strings.xml and a long text string file to display those strings in the activity_main.xml file. Also in the app > res > drawable folder add a few images for the HorizontalScrollView.

In the activity_main.xml file, add the NestedScrollView as the parent layout and inside it add a ConstraintLayout and inside it add a HorizontalScrollView and a regular ScrollView to be nested.

Note: One can create only one direct child such as a layout or view inside the NestedScrollView.

Here is the code for the activity_main.xml file.

<?xml version="1.0" encoding="utf-8"?>
<androidx.core.widget.NestedScrollView 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="wrap_content"
    android:background="@color/white"
    tools:context=".MainActivity">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <HorizontalScrollView
            android:id="@+id/horizontalScrollView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:scrollbars="none"
            android:padding="8dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent">

            <LinearLayout
                android:layout_width="200dp"
                android:layout_height="200dp"
                android:layout_margin="2dp"
                android:orientation="horizontal">


                <ImageView
                    android:id="@+id/image1"
                    android:layout_width="200dp"
                    android:layout_height="200dp"
                    android:layout_margin="4dp"
                    android:scaleType="centerCrop"
                    android:src="@drawable/k1" />

                <ImageView
                    android:id="@+id/image2"
                    android:layout_width="200dp"
                    android:layout_height="200dp"
                    android:layout_margin="4dp"
                    android:scaleType="centerCrop"
                    android:src="@drawable/k2" />

                <ImageView
                    android:id="@+id/image3"
                    android:layout_width="200dp"
                    android:layout_height="200dp"
                    android:layout_margin="4dp"
                    android:scaleType="centerCrop"
                    android:src="@drawable/k3" />

                <ImageView
                    android:id="@+id/image4"
                    android:layout_width="200dp"
                    android:layout_height="200dp"
                    android:layout_margin="4dp"
                    android:scaleType="centerCrop"
                    android:src="@drawable/k4" />


            </LinearLayout>
        </HorizontalScrollView>

        <ScrollView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="16dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/horizontalScrollView">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="@string/sample_text"
                android:textSize="18sp" />

        </ScrollView>

    </androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>

Step 3: Working with the MainActivity File

Go to the MainActivity File and refer to the following code. Since there is no change in MainActivity File, so we can use the file attached below.

MainActivity File:

Java

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);
    }
}

Kotlin

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

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