NestedScrollView is just like Android ScrollView, but it supports acting as both, a nested scrolling parent and child on both new and old versions of Android.
It is enabled by default. The NestedScrollView is used when there is a need for a scrolling view inside another scrolling view. You have seen this in many apps for example when we open a text file and when we reach the end of the text file there is an Ad below the text file. This is where NestedScrollView comes into the picture.
The main disadvantage of NestedScrollView is that it only supports vertical scroll, but to add horizontal scroll we have many other options such as Android HorizontalScrollView.
So let's implement a simple NestedScrollView in our android app.
Step 1: Create a new Project
-
Open Your Android Studio Click on "Start a new Android Studio project"(Learn how to setup Android Studio and create your first Android project)
-
Choose "Empty Activity" from the project template window and click Next
-
Enter the App Name, Package name, save location, language(Java/Kotlin, we use Java for this tutorial ) and minimum SDK(we are using API 19: Android 4.4 (KitKat) )
-
Next click on Finish button after filling the above details
-
Now wait for the project to finish building.
Step 2: Modify activity_main.xml
Now go to app -> res -> layout -> activity_main.xml and add the NestedScrollView inside the Android RelativeLayout and inside the NestedScrollView add an Android LinearLayout with orientation as 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: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">
<!-- Nested Scroll View -->
<androidx.core.widget.NestedScrollView
android:layout_width = "match_parent"
android:layout_height = "wrap_content">
<!-- Linear LAyout -->
<LinearLayout
android:orientation = "vertical"
android:layout_width = "match_parent"
android:layout_height = "wrap_content">
<Button
android:padding = "8dp"
android:background = "#F44336"
android:layout_margin = "16dp"
android:textStyle = "bold"
android:textSize = "32dp"
android:textColor = "#ffffff"
android:text = "Button "
android:layout_width = "match_parent"
android:layout_height = "160dp"/>
<TextView
android:textAlignment = "center"
android:textSize = "12dp"
android:padding = "8dp"
android:layout_margin = "20dp"
android:fontFamily = "monospace"
android:textStyle = "bold"
android:text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
android:layout_width = "match_parent"
android:layout_height = "wrap_content"/>
<Button
android:padding = "8dp"
android:background = "#E91E63"
android:layout_margin = "12dp"
android:textStyle = "bold"
android:textSize = "32dp"
android:textColor = "#ffffff"
android:text = "Button "
android:layout_width = "match_parent"
android:layout_height = "160dp"/>
<TextView
android:textAlignment = "center"
android:textSize = "8dp"
android:padding = "8dp"
android:layout_margin = "20dp"
android:fontFamily = "monospace"
android:textStyle = "bold"
android:text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
android:layout_width = "match_parent"
android:layout_height = "wrap_content"/>
<Button
android:padding = "8dp"
android:background = "#9C27B0"
android:layout_margin = "16dp"
android:textStyle = "bold"
android:textSize = "32dp"
android:textColor = "#ffffff"
android:text = "Button "
android:layout_width = "match_parent"
android:layout_height = "160dp"/>
<Button
android:padding = "8dp"
android:background = "#673AB7"
android:layout_margin = "8dp"
android:textStyle = "bold"
android:textSize = "32dp"
android:textColor = "#ffffff"
android:text = "Button "
android:layout_width = "match_parent"
android:layout_height = "160dp"/>
<Button
android:padding = "8dp"
android:background = "#2196F3"
android:layout_margin = "16dp"
android:textStyle = "bold"
android:textSize = "32dp"
android:textColor = "#ffffff"
android:text = "Button "
android:layout_width = "match_parent"
android:layout_height = "260dp"/>
<TextView
android:textAlignment = "center"
android:textSize = "16dp"
android:padding = "8dp"
android:layout_margin = "20dp"
android:fontFamily = "monospace"
android:textStyle = "bold"
android:text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
android:layout_width = "match_parent"
android:layout_height = "wrap_content"/>
<Button
android:padding = "8dp"
android:background = "#009688"
android:layout_margin = "16dp"
android:textStyle = "bold"
android:textSize = "32dp"
android:textColor = "#ffffff"
android:text = "Button "
android:layout_width = "match_parent"
android:layout_height = "80dp"/>
<Button
android:padding = "8dp"
android:background = "#FFEB3B"
android:layout_margin = "16dp"
android:textStyle = "bold"
android:textSize = "32dp"
android:textColor = "#ffffff"
android:text = "Button "
android:layout_width = "match_parent"
android:layout_height = "160dp"/>
<ImageView
android:background = "#2BFF06"
android:padding = "16dp"
android:layout_margin = "16dp"
android:layout_width = "match_parent"
android:layout_height = "300dp"/>
<Button
android:padding = "8dp"
android:background = "#FF9800"
android:layout_margin = "16dp"
android:textStyle = "bold"
android:textSize = "32dp"
android:textColor = "#ffffff"
android:text = "Button "
android:layout_width = "match_parent"
android:layout_height = "160dp"/>
</LinearLayout>
</androidx.core.widget.NestedScrollView>
</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 Nested Scroll View will look in the android application.
scolling down,
scrolling further,
Conclusion:
This is a basic example for creating a Nested Scroll View. 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.
