Showing another background when reaching the end of the NestedScrollView

Question

I've checked this concept in many websites, and wanted to make it in my app. The idea is simple, having a static background, for instance a color as a background in the app, and when the scroll is in the ends, it shows some trees in the bottom.

It's like placing the second background in the bottom of the Scrollview. I have tried to only place a background, but it shows in the bottom of the app, not in the Scrollview.

Is there a way to make this? as I have already searched and didn't find any reliable source.

Could you attach some gif or video example of desired behavior? — Gaket, Apr 12 '17 at 11:20

Alejandro Núñez · Accepted Answer · 2017-04-18T02:01:52.017

If I understood correctly, you can achieve what you are looking for using this XML layout (or build the same structure programatically).

You just need to put an ImageView with your drawable as the "src" at the bottom of the ViewGroup inside the NestedScrollView (as ScrollViews can only have one child). You would get a ScrollView, with a ViewGroup inside, with your content followed by your image.

When a user scrolls to the bottom below your content, the image will appear from the bottom. In the code below I show you the XML and where you can set the background for the app, and for the bottom of the scroll view, and where to place the content.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:background="@drawable/app_background">
    <!-- YOU CAN SET YOUR APP BACKGROUND COLOR OR DRAWABLE UP HERE -->

    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <LinearLayout
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

                <!-- YOUR CONTENT GOES HERE -->
                <TextView android:text="Your content here instead of this TextView"
                          android:layout_width="match_parent" 
                          android:layout_height="1500dp" />


                <!-- YOUR FOOTER IMAGE HERE -->
                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:src="@drawable/trees" />
        </LinearLayout>
    </android.support.v4.widget.NestedScrollView>
</LinearLayout>

If you want the image in the bottom to show behind the ScrollView content instead of below, you need to remove the ImageView in the XML above, and instead set a background drawable to the LinearLayout inside the NestedScrollView, and use the following XML resource drawable as a background:

<?xml version="1.0" encoding="utf-8"?>
<bitmap
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:src="@drawable/trees"
    android:gravity="bottom|center_horizontal" />

This XML will create a new drawable that aligns to the bottom of a view when set as a background. Just save that code in an xml file called trees_background.xml in your drawable folder, and change the LinearLayout to have

android:background="@drawable/trees_background.xml"

score 0 · Answer 2 · answered Apr 12 '17 at 11:15

0

If I understood you right, the simplest way to achieve desired behavior is to add an additional ViewType to your recycler's adapter and add this item to the end of your items list. It will work as a footer for Recycler View, so when user scrolls to the bottom, they will see your trees or anything.

answered Apr 12 '17 at 11:15

Gaket

5,580
2
30
59

I can give an example if you don't know how to add something like Footer to your recycler view. – Gaket Apr 12 '17 at 11:16
I'd like an example to check, to re-explain my question. two backgrounds, one shows as Full Background, and when the scroll ends, the second backgrounds shows in the bottom. – Jaeger Apr 12 '17 at 11:28

ANAND PURUSHOTTAM · Answer 3 · 2017-04-20T19:31:42.903

You can detect whether you have reached the bottom of NestedScrollView or not in the following way and then can apply your own logic to change background accordingly .

  NestedScrollView nestedScrollView = (NestedScrollView) findViewById(R.id.nestedScrollView);

        nestedScrollView.setOnScrollChangeListener(new NestedScrollView.OnScrollChangeListener() {
            @Override
            public void onScrollChange(NestedScrollView v, int scrollX, int scrollY, int oldScrollX, int oldScrollY) {

                if (scrollY < oldScrollY) {
                    // Scroll UP
                } else if (scrollY > oldScrollY) {
                    //Scroll down

                } else if (scrollY == 0) {
                    // TOP SCROLL
                } else if (scrollY == (v.getChildAt(0).getMeasuredHeight() - v.getMeasuredHeight())) {
                    //You have reached  the bottom of nested scrollview
                    //Add you logic here to change background
                }
            }
        });

Hope i get you question right.

Showing another background when reaching the end of the NestedScrollView

3 Answers3