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.

Answer 1

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"