New Tutorials:   NUMPY    TKINTER    KOTLIN    JAVASCRIPT    SASS/SCSS    PL/SQL    Matplotlib    C++ Programs
CLOSE
   Android  NestedScrollView  Mobile Application  
   Technology    Programming

How to add a NestedScrollView in Android App

         
  DECEMBER 8, 2020   by onlyklohan

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

  1. Open Your Android Studio Click on "Start a new Android Studio project"(Learn how to setup Android Studio and create your first Android project)

  2. Choose "Empty Activity" from the project template window and click Next

  3. 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) )

  4. Next click on Finish button after filling the above details

  5. 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.

implement Nested Scroll View in Android example

scolling down,

implement Nested Scroll View in Android example

scrolling further,

implement Nested Scroll View in Android example

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.


RELATED POSTS



Subscribe and receive amazing posts directly in your inbox.