Learn Programming Together: Nested scroll views in Android

The official widget to make a scroll layout in Android is ScrollView. Basically, adding a ScrollView inside ScrollView can be difficult . Most of the times it won’t end well. You will end up adding few workarounds and a person maintaining your code will probably hate you for the rest of his life. Fortunately, with the appearance of Material Design technology, NestedScrollView was released and this becomes much easier.
In this tip, I will present the way to put NestedScrollView to ScrollView and ListView. Let watch this DEMO VIDEO first:

NestedScrollView inside ScrollView

NestedScrollView supports acting as both a nested scrolling parent and child on both new and old versions of Android. Nested scrolling is enabled by default. Here is an example how to add it in your xml (use as a child of ScrollView):

activity_scroll_view.xml

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    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:padding="@dimen/activity_horizontal_margin">

        <android.support.v4.widget.NestedScrollView
            android:layout_width="match_parent"
            android:layout_height="150dp"
            android:padding="@dimen/activity_horizontal_margin">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:scaleType="centerCrop"
                android:text="@string/long_text"
                android:textStyle="bold" />

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

        <include layout="@layout/layout_card" />
    </LinearLayout>
</ScrollView>

After running this activity, we'll have this output:

You can see that we can scroll the NestedScrollView to read TextView content.

Using as ListView item

Not surprisingly, NestedScrollView can be used as a ListView item, so with this design, each row can be scrolled. You can make a simple activity layout with a ListView object like this:

activity_listview.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ListView
        android:id="@+id/list_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</LinearLayout>

Make a custom layout for each ListView row, containing a NestedScrollView:

item_list_view.xml

<android.support.v4.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="140dp"
    android:padding="@dimen/activity_horizontal_margin">

    <TextView
        android:id="@+id/text_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="left|center"
        android:padding="10dp"
        android:textColor="@android:color/white"
        android:background="#008080" />

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

Proving some programmatically codes:

ListViewActivity.java

package info.devexchanges.nestedscrollview;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v7.app.AppCompatActivity;
import android.widget.ArrayAdapter;
import android.widget.ListView;

import java.util.LinkedList;

public class ListViewActivity extends AppCompatActivity {

    private LinkedList<String> strings;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_list_view);

        ListView listView = (ListView) findViewById(R.id.list_view);

        setDummyData();
        ArrayAdapter<String> adapter = new ArrayAdapter<>(this, R.layout.item_list_view, R.id.text_view, strings);
        listView.setAdapter(adapter);

    }

    private void setDummyData() {
        strings = new LinkedList<>();
        for (int i = 0; i < 10; i++) {
            strings.add(getString(R.string.long_text));
        }
    }
}

Running this activity, you'll have this output:

Conclusions

This widget is very useful in create nesting scroll views in one screen (sometimes, Android developers may deal with this problem). Moreover, you can check out official document about NestedScrollView to deep understanding it's features. Hopefully in the future, Google developers still improve Material Design technology and release more excelent widgets or features to make Android better and not inferior to iOS.

View Project on Github