Code Example

Android Nested Scrolling Snippets

Learn about Nested Scrolling implementation in android via simple code snippets and examples.

1. Android NestedScrolling Example

A simple step by step Android Nested Scrolling example using the NestedScrollView widget.

This example will comprise the following files:

  • MainActivity.java

Step 1: Create Project

  1. Open your AndroidStudio IDE.
  2. Go to File-->New-->Project to create a new project.

Step 2: Dependencies

No special dependencies are needed for this project.

Step 3: Design Layouts

*(a). activity_main.xml

Create a file named activity_main.xml and design it as follows:

Add the NestedScrollView as you root layout element:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:paddingLeft="8dp"
        android:paddingRight="8dp">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:paddingBottom="8dp"
            android:paddingTop="8dp"
            android:text="Section Scrolls"
            android:textSize="18sp"/>

        <include layout="@layout/section_scroll_layout"/>

        <include layout="@layout/content_scroll_layout"/>

    </LinearLayout>
</android.support.v4.widget.NestedScrollView>

*(b). content_scroll_layout.xml

Create a file named content_scroll_layout.xml and design it as follows:

<?xml version="1.0" encoding="utf-8"?>
<merge
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginBottom="16dp"
    android:layout_marginTop="8dp">

    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:cardBackgroundColor="#B39DDB">

        <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:gravity="center"
                android:paddingBottom="8dp"
                android:paddingTop="8dp"
                android:text="Content Scrolls"
                android:textSize="18sp"/>

            <android.support.v4.widget.NestedScrollView
                android:layout_width="match_parent"
                android:layout_height="96dp"
                android:paddingBottom="16dp">

                <EditText
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_margin="8dp"
                    android:background="@android:color/transparent"
                    android:hint="type in multi-line text"/>

            </android.support.v4.widget.NestedScrollView>
        </LinearLayout>

    </android.support.v7.widget.CardView>
</merge>

*(c). section_scroll_layout.xml

Create a file named section_scroll_layout.xml and design it as follows:

<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android"
              xmlns:app="http://schemas.android.com/apk/res-auto"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:orientation="vertical"
              android:paddingLeft="8dp"
              android:paddingRight="8dp">

    <android.support.v7.widget.CardView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginTop="8dp"
        app:cardBackgroundColor="#B39DDB"
        app:cardCornerRadius="2dp"
        app:cardElevation="3dp">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="8dp"
            android:paddingBottom="8dp"
            android:paddingTop="8dp"
            android:text="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."/>

    </android.support.v7.widget.CardView>

    <android.support.v7.widget.CardView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginTop="8dp"
        android:padding="8dp"
        app:cardBackgroundColor="#B39DDB"
        app:cardCornerRadius="2dp"
        app:cardElevation="3dp">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="8dp"
            android:paddingBottom="8dp"
            android:paddingTop="8dp"
            android:text="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."/>

    </android.support.v7.widget.CardView>

    <android.support.v7.widget.CardView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginTop="8dp"
        android:padding="8dp"
        app:cardBackgroundColor="#B39DDB"
        app:cardCornerRadius="2dp"
        app:cardElevation="3dp">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="8dp"
            android:paddingBottom="8dp"
            android:paddingTop="8dp"
            android:text="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."/>
    </android.support.v7.widget.CardView>

</merge>

Step 4: Write Code

Write Code as follows:

(a). MainActivity.java

Create a file named MainActivity.java

Here is the full code

package com.ahurwitz.nestedscrolling;

import android.support.v7.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);
    }
}

Run

Simply copy the source code into your Android Project,Build and Run.

Read More.

Related Posts