Android NestedScrollView
NestedScrollView can be defined as below –
"As the Name suggests,Android NestedScrollView is used when we want to implement scrollable view inside another scrollable view."
Normally, it is difficult to implement scrollable view inside another scrollable view because system would be unable to decide which view to scroll. This is where NestedScrollView comes in.
Attributes of Android NestedScrollView
Attributes of nestedScrollView is same as ScrollView. It is a support v4 that runs on old version of android as well. It is added in api 22.
At first, we will create android application. Then, we will use NestedScrollView in this application.
Follow steps below to create new project. Please ignore the steps if you've already created a new application.
| S. No. | Steps |
| 1 | Open Android Studio. |
| 2 | Click on Start a new Android Studio Project Write application name as NestedScrollView. Then, click next button. |
| 3 | Select minimum SDK you need. However, we have selected 14 as minimum SDK. Then, click next button. |
| 4 | Then, select Empty Activity => click next => click finish. |
| 5 | If you have followed above process correctly, you will get a newly created project successfully. However, you can also visit tutorial to Create a New Project to know steps in detail. |
Now, we will modify xml and java file to use NestedScrollView in the application.
Modify Values folder
Open res/values/strings.xml file. Then, add below code into it.
<resources>
<string name="app_name">NestedScrollView</string>
<string name="no_image">No Image</string>
<string name="nested_scroll_text">Ukacademe.com presents tutorial on NestedScrollView! NestedScrollView is just like ScrollView, but it supports acting as both a nested scrolling parent and child on both new and old versions of Android. Nested scrolling is enabled by default. NestedScrollView is used when there is need for scrolling inside another scrolling view. Normally this would be difficult task because system would be unable to decide which view to scroll. This is where NestedScrollView comes into role. </string>
</resources> Download Drawable Resources Needed
You'll need some images, stored in res/drawable folder, to be used in the application. So drawable images will be used by views inside NestedScrollView in the application.
NestedScrollView in xml file
Open res/layout/activity_main.xml file. Then, add below code into it.
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
android:gravity="center"
android:orientation="vertical">
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_margin="20dp"
android:background="@android:color/white"
android:padding="10dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/nested_scroll_text"/>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
android:contentDescription="@string/no_image"
android:src="@drawable/android_ukacademe"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
android:contentDescription="@string/no_image"
android:src="@drawable/aspdotnet"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
android:contentDescription="@string/no_image"
android:src="@drawable/css_ukacademe"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
android:contentDescription="@string/no_image"
android:src="@drawable/java_ukacademe"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
android:contentDescription="@string/no_image"
android:src="@drawable/html_ukacademe"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
android:contentDescription="@string/no_image"
android:src="@drawable/csharp_ukacademe"/>
</LinearLayout>
</ScrollView>In activity_main.xml file, we have defined NestedScrollView inside ScrollView. Using NestedScrollView, we've defined scrollable view inside another scrollable view. It is used same as ScrollView i.e. It can contain only one direct child. Note that we've defined linearLayout inside NestedScrollView as a direct child. Then, we've defined view to be scrolled inside it. All the imageViews have been defined inside ScrollView.
NestedScrollView in java file
Open src/main/java/com.ukacademe.nestedscrollview/MainActivity.java file. Then, add below code into it.
package com.ukacademe.nestedscrollview;
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);
}
}
We have changed nothing in MainActivity. So, it's like after project creation.
Since the file of AndroidManifest.xml is very important in any android application, we are also going to see the content inside this file.
AndroidManifest.xml
Code inside src/main/AndroidManifest.xml file is as below –
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.ukacademe.nestedscrollview">
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/AppTheme">
<activity android:name=".MainActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>When we run the application, we will get output as shown below.
Output
