Fixed position for elements inside scroll views in both directions

Question

I am building a view in my Android application which should scroll both horizontal and vertical. Therefore I have surrounded my view with a horizontal scroll view and inside this horizontal scroll view I have another scroll view (vertical scroll view).

In the top of the scroll view I have a timeline (red in the illustration). When scrolling the vertical scroll view, the timeline should be static. It should stay in top. So this timeline is visible in the top at all times.

In the left of these scroll views, I have five buttons (different colors in the illustration). These buttons should scroll with the vertical scroll view but not the horizontal scroll view, meaning these should be visible in the left side at all times.

The white area in the scroll view will scroll both ways.

I have managed to have the timeline (red in the illustration) stay at top and only scroll with the horizontal scroll view but I cannot figure out where I should put my five buttons to make sure, that these will also stay on top and only scroll with the vertical scroll view.

This is my layout as it is now with the timeline staying at top.

<!-- Horizontal scroll view -->
<HorizontalScrollView android:id="@+id/schedule_concerts_scroll_view" 
                      android:layout_width="wrap_content"
                      android:layout_height="fill_parent" 
                      android:fadingEdge="none" 
                      android:scrollbars="none"
                      android:layout_below="@+id/schedule_day_pager_layout">

    <!-- Scroll container for horizontal scroll view -->
    <RelativeLayout android:layout_width="wrap_content"
                    android:layout_height="fill_parent"
                    android:id="@+id/schedule_layout">

        <!-- The timeline (red in the illustration) Should only scroll horizontal and stay at top -->
        <RelativeLayout android:id="@+id/schedule_timeline"
                        android:layout_width="wrap_content"
                        android:layout_height="23dp"
                        android:layout_marginBottom="0dp"
                        android:layout_alignParentTop="true" />

        <!-- Vertical scroll view -->
        <ScrollView android:layout_height="wrap_content"
                    android:layout_width="wrap_content"
                    android:fadingEdge="none"
                    android:scrollbars="none"
                    android:layout_below="@+id/schedule_timeline">

            <!-- Scroll container for vertical scroll view -->
            <RelativeLayout android:layout_width="wrap_content"
                            android:layout_height="wrap_content">

                <!-- The content here should be scrolling both ways -->

            </RelativeLayout>

        </ScrollView>

    </RelativeLayout>

</HorizontalScrollView>

This is the illustration, I have been referring to. This should help explain how my layout should end up.

Illustration of scroll directions

Does anyone know how I can achieve the scroll in both directions with views having a fixed position for both directions?

score 1 · Accepted Answer · edited May 23 '17 at 12:19

I found that it was easy to move the buttons on the left side out of both of the scroll views and listen for onScrollChanged and whenever the vertical scroll view was scrolled, then scroll the buttons accordingly. Therefore I put the buttons inside a scroll view and called onScroll() on this scroll view when onScrollChanged() was called.

For a great description on how to extend ScrollView to implement onScrollChanged() see, this answer.

Fixed position for elements inside scroll views in both directions

1 Answers1