Wrapping two ScrollViews into a LinearLayout

Question

I am struggling to find a solution for one of the Android Studio (Kotlin) class problems by Google: how to add another image that scrolls down with the first ScrollView. I created a LinearLayout that has two ScrollViews within it. The first ScrollView has a large amount of text which scrolls down perfectly. However, in the second ScrollView, for the image above the text, it does not scroll down with the text.

Here is a view of the Design element of the activity_main (the green bar below the star is ImageView1 which is in the second ScrollView):

Here is the code for the ScrollViews in my activity_main:

    <LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <ScrollView
        android:id="@+id/bio_scroll2"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:srcCompat="@android:drawable/button_onoff_indicator_on" />
    </ScrollView>

    <ScrollView
        android:id="@+id/bio_scroll"
        android:layout_width="match_parent"
        android:layout_height="463dp">

        <TextView
            android:id="@+id/bio_text"
            style="@style/NameStyle"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:lineSpacingMultiplier="1.2"
            android:text="@string/bio" />
    </ScrollView>
</LinearLayout>

Some guidance will be greatly appreciated.

Answer 1

The reason I told you to use only one ScrollView is that you don't need two. You can use any number of views in a Scrollview, just make sure the child of ScrollView is a Layout. You can use any layout and then put whatever you have in that layout. That's how ScrollView is used.

As the official docs of ScrollView state :

Scroll view may have only one direct child placed within it. To add multiple views within the scroll view, make the direct child you add a view group, for example LinearLayout, and place additional views within that LinearLayout.

So, change your code as :

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <ScrollView
        android:id="@+id/bio_scroll2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <ImageView
                android:id="@+id/imageView1"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:srcCompat="@android:drawable/button_onoff_indicator_on" />

            <TextView
                android:id="@+id/bio_text"
                style="@style/NameStyle"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:lineSpacingMultiplier="1.2"
                android:text="@string/bio" />

        </LinearLayout>

    </ScrollView>

</LinearLayout>

Furthermore, You can remove the root LinearLayout if you don't want to add any other view in it and that will make the ScrollView the root layout.

Also, the height as match_parent doesn't work in ScrollView and it works only as wrap_content or any fix size so if you want to make it take the full height of its parent, you've to use android:fillViewport="true" in ScrollView's tag and height of its parent should be match_parent.