Nested scrollview

How to create Nested ScrollView in Android

In this tutorial, we will learn how to create Nested ScrollView in android.

What is NestedScrollView / how to create Nested ScrollView?

NestedScrollView is similar to ScrollView, however, it helps to appear as a nested scrolling parent and child on each new and old version of Android. It is enabled by default. NestedScrollView is used while there may be a want for a scrolling view inner every other scrolling view.

Preview: Nested ScrollView in Android

File: String.xml

–> Open the  res/values/strings.xml. Then add the code given below into it.

<resources>
    <string name="app_name">ScrollView and  Horizontal ScrollView</string>
    <string name="demo_txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent posuere pretium condimentum. Integer lacinia felis arcu, in commodo dolor sodales in. Nunc eget neque lacinia neque imperdiet mattis. Integer non imperdiet augue. In non lorem at orci blandit tincidunt. Ut sed mauris justo. Nunc velit libero, auctor eu orci ut, ultricies iaculis justo. Sed varius massa arcu, in mattis lorem varius nec. In ac ipsum ut lacus ullamcorper tincidunt ut vitae urna. Proin non hendrerit mauris, eu dictum magna. Nunc sagittis est ac nulla tempor feugiat. Nunc non libero in lacus convallis tempor ut quis tellus. Suspendisse ultricies tincidunt ultricies. Suspendisse congue auctor turpis, eleifend bibendum ipsum tincidunt et. Aliquam lacinia gravida dolor. Proin mattis quam nibh, ac mollis ligula ullamcorper nec. Nam et nunc ultrices, pellentesque nisi in, vulputate arcu. Nulla blandit urna scelerisque diam commodo, quis vulputate mi lobortis. Quisque malesuada eu urna in dapibus. Mauris fringilla, elit vel tincidunt iaculis, sem diam lobortis nulla, et interdum turpis diam vitae ante. Etiam hendrerit, sapien vitae bibendum auctor, nibh ipsum iaculis sem, eu lobortis diam risus ac augue. Mauris luctus, dui id eleifend tristique, magna diam accumsan mi, viverra bibendum lectus elit ac neque. Fusce nisi leo, posuere ac aliquet sed, porta at quam. Donec viverra, ante et pharetra tincidunt, nisi quam hendrerit enim, ut posuere arcu elit eget augue. Maecenas sed dignissim tortor. Phasellus massa tortor, condimentum et felis et, tristique tempor magna. Proin pellentesque lacinia ultrices. Quisque euismod augue vestibulum, pellentesque nibh in, tempor eros. Aenean rutrum, nunc non facilisis tincidunt, lorem urna egestas ex, pulvinar imperdiet est nunc a ipsum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla a ipsum nulla. Morbi a lacinia risus. </string>
</resources>

File: activity_main.xml

–> In activity_main.xml file, we have defined nestedScrollView inside ConstraintLayout. Using nestedScrollView, we have defined scrollable view inside another ConstraintLayout. It is used the same as scrollView i.e. It can contain only one direct child. Note that we have defined linear layout inside nestedScrollView as a direct child. Then, we have defined the view to be scrolled inside it. textview and imageView have been defined inside scrollView.

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

    <androidx.core.widget.NestedScrollView
        android:id="@+id/scrollView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

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

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="@string/demo_txt" />

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="300dp"
                android:src="@drawable/ic_launcher_background" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="@string/demo_txt" />

        </LinearLayout>
    </androidx.core.widget.NestedScrollView>

</androidx.constraintlayout.widget.ConstraintLayout>

File:MainActivity.kt

–> In MainActivity, nothing has changed. So, it’s the same as it was before the project was created.

package com.sagar.nestedscrollview

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)

    }
}
  • We hope that this guide will assist you in quickly creating a simple WebView Android app. If you have any problems, please post them in the comments section and we will gladly assist you.

Leave a Reply