nesting framelayout inside a scrollview?

Question

I am having an issue that I am not sure the best way to go about it. I need to have all widgets inside a scroll view.

Below is the layout and I used the framelayout because I need to overlap a bunch of images. Yet, that entire framelayout cannot be inside the scroll view. But I need to scroll the entire panel. The part marked with the yellow arrow show the framelayout.

I looked at this thread, but this is not what I want.

ScrollView Inside ScrollView

Here's the xml and if anyone can give a lead, I greatly appreciate. thx!

<!-- unfortunately I cannot put this inside the scrollview :( -->
<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <ImageView
        android:id="@+id/image_background"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:background="@drawable/follow_add" />
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="100dp"
        android:gravity="center|bottom"
        android:orientation="horizontal">
        <ImageView
            android:id="@+id/image_icon"
            android:layout_width="120dp"
            android:layout_height="120dp"
            android:background="@drawable/feed_active" />
    </LinearLayout>

    <ImageView
        android:id="@+id/dismiss"
        android:layout_gravity="left"
        android:layout_margin="5dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/close_messages_modal" />
    <ImageView
        android:id="@+id/follow"
        android:layout_gravity="right"
        android:layout_margin="5dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/follow_add" />
</FrameLayout>


<ScrollView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="10dp"
            android:text="Layout above needs to scroll"
            android:textColor="@color/half_dark_text_color"
            android:textSize="28sp"
            android:textStyle="bold" />
        <TextView
            android:id="@+id/textView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_marginLeft="20dp"
            android:layout_marginRight="20dp"
            android:layout_marginTop="20dp"
            android:text="text1\ntext1\ntext1\ntext1\ntext1\ntext1\ntext1\ntext1\ntext1"
            android:textColor="@color/half_dark_text_color"
            android:textSize="18sp"
            android:textStyle="bold" />
        <ImageView
            android:id="@+id/id3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/close_messages_modal" />
        <ImageView
            android:id="@+id/share"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="right"
            android:background="@drawable/close_messages_modal" />
    </LinearLayout>
</ScrollView>

Answer 1

I'm not sure I understood your question completely, but, from what I understood:

Your objectives

• You want to have your FrameLayout inside your ScrollView
• ALL your content inside the ScrollView must scroll, that is, everything in the screen that you posted in the picture must scroll

From looking at your code, I am guessing you are putting the FrameLayout AND the LinearLayout as children of the ScrollView. ScrollView can only have ONE direct child. From Android documentation:

A ScrollView is a FrameLayout, meaning you should place one child in it containing the entire contents to scroll; this child may itself be a layout manager with a complex hierarchy of objects. A child that is often used is a LinearLayout in a vertical orientation, presenting a vertical array of top-level items that the user can scroll through.

Solution

So, in your case, you want to wrap that Framelayout and the LinearLayout under another ViewGroup (could be a LinearLayout) like this:

<ScrollView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">
        <!--This LinearLayout wraps your frame and linear layouts so that they both stay into scrollview and are scrollable-->
        <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
            <ImageView
                android:id="@+id/image_background"
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:background="@drawable/follow_add" />
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_marginTop="100dp"
                android:gravity="center|bottom"
                android:orientation="horizontal">
                <ImageView
                    android:id="@+id/image_icon"
                    android:layout_width="120dp"
                    android:layout_height="120dp"
                    android:background="@drawable/feed_active" />
            </LinearLayout>

            <ImageView
                android:id="@+id/dismiss"
                android:layout_gravity="left"
                android:layout_margin="5dp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/close_messages_modal" />
            <ImageView
                android:id="@+id/follow"
                android:layout_gravity="right"
                android:layout_margin="5dp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/follow_add" />
        </FrameLayout>
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">
            <TextView
                android:id="@+id/textView"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:layout_marginTop="10dp"
                android:text="Layout above needs to scroll"
                android:textColor="@color/half_dark_text_color"
                android:textSize="28sp"
                android:textStyle="bold" />
            <TextView
                android:id="@+id/textView2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:layout_marginLeft="20dp"
                android:layout_marginRight="20dp"
                android:layout_marginTop="20dp"
                android:text="text1\ntext1\ntext1\ntext1\ntext1\ntext1\ntext1\ntext1\ntext1"
                android:textColor="@color/half_dark_text_color"
                android:textSize="18sp"
                android:textStyle="bold" />
            <ImageView
                android:id="@+id/id3"
                android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                android:background="@drawable/close_messages_modal" />
            <ImageView
                android:id="@+id/share"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="right"
                android:background="@drawable/close_messages_modal" />
        </LinearLayout>
        </LinearLayout>
    </ScrollView>

This way, the ScrollView only has one direct child and everything inside it will scroll.

That should be enough to achieve what you want. Let me know if that was what you really wanted, at least that's what I understood from your post.

Cheers