Android FrameLayouts side by side with independent internal scrolling

Question

I'm trying to set up a tablet layout with a list on the left, and a detail pane on the right. When a list item is clicked, the detail pane is populated with a series of cardsthat are longer than the list on the left. I would like the detail pane, and the list (recycler view) to scroll independently of one and other, but I can't fathom how to do so.

Here's my main_content.axml - the recyclerview is loaded into the framelayout listcontainer, and the details are placed into the detailscontainer (the textview is removed before this happens) - but both frames still scroll 'as one' - the entire app scrolls, the frames don't scroll separately.

As an aside, main_content.xml is wrapped inside a nestedscrollview, so that I can use the collapsing toolbar - you can see the main.xml here: http://pastebin.com/raw/PGsVuAp6

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" >

  <ScrollView
    android:layout_height="match_parent"
    android:layout_width="wrap_content"
    android:layout_weight="1">
      <FrameLayout
          android:id="@+id/listcontainer"
          android:layout_weight="1"
          android:layout_width="450dp"
          android:layout_height="match_parent" >
      </FrameLayout>
  </ScrollView>

  <View android:layout_height="fill_parent"
    android:layout_width="1dp"
    android:background="?android:attr/listDivider"/>

  <ScrollView
    android:layout_height="match_parent"
    android:layout_width="wrap_content"
    android:layout_weight="2">
    <FrameLayout
          android:id="@+id/detailscontainer"
          android:layout_width="match_parent"
          android:layout_weight="2"
          android:layout_height="match_parent" >
      <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:id="@+id/nodetails"
        android:layout_centerInParent="true"
        android:layout_gravity="center"
        android:text="No inspection selected."/>

    </FrameLayout>
  </ScrollView>

</LinearLayout>

Edit, for clarity, here's what's loaded into the list frame: http://pastebin.com/raw/1Wm8Tntf ----- and here's what's loaded into the detail pane: http://pastebin.com/raw/FetE8JP1

Edit 2: Here's a picture showing how the two frames, list and detail, should scroll, independently of one and other, i.e when you scroll the detail, the list should not move, and when you scroll the list, the detial should not move:

Hi can you just add an image with colors will be easy to understand — Charuක, Feb 02 '17 at 11:49
@Charuක - I've added it in at the bottom, hope it makes things easier :D — Joe Brailsford, Feb 02 '17 at 11:56

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

Instead of FrameLayout in the child of ScrollView use a LinearLayoutand it will work! or tryandroid:fillViewport="true" in ScrollView

example xml :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" >

    <ScrollView
        android:layout_height="match_parent"
        android:layout_width="wrap_content"
        android:layout_weight="1">
        <LinearLayout
            android:orientation="vertical"
            android:id="@+id/listcontainer"
            android:layout_weight="1"
            android:layout_width="450dp"
            android:layout_height="match_parent" >
            <LinearLayout
                android:background="#897"
                android:layout_width="match_parent"
                android:layout_height="300dp"></LinearLayout>
            <LinearLayout
                android:background="#127"
                android:layout_width="match_parent"
                android:layout_height="300dp"></LinearLayout>
            <LinearLayout
                android:background="#908"
                android:layout_width="match_parent"
                android:layout_height="300dp"></LinearLayout>
        </LinearLayout>
    </ScrollView>

    <View android:layout_height="fill_parent"
        android:layout_width="1dp"
        android:background="?android:attr/listDivider"/>

    <ScrollView
        android:layout_height="match_parent"
        android:layout_width="wrap_content"
        android:layout_weight="2">
        <LinearLayout
            android:orientation="vertical"
            android:id="@+id/listcontainerTwo"
            android:layout_weight="1"
            android:layout_width="450dp"
            android:layout_height="match_parent" >
            <LinearLayout
                android:background="#897"
                android:layout_width="match_parent"
                android:layout_height="300dp"></LinearLayout>
            <LinearLayout
                android:background="#127"
                android:layout_width="match_parent"
                android:layout_height="300dp"></LinearLayout>
            <LinearLayout
                android:background="#908"
                android:layout_width="match_parent"
                android:layout_height="300dp"></LinearLayout>
        </LinearLayout>
    </ScrollView>

</LinearLayout>

FrameLayout is just a container and problematic most of the time with ScrollView scenarios if you use LinearLayout anyway it scrolls I've tested that. You can find smiler question > here

This didn't work, both scrollview scrolled together, like it wasn't registering that the section was scrollable :( — Joe Brailsford, Feb 02 '17 at 12:06
Could it be because the whole of main_content.axml is warpped in a nested scrollview? See here: http://pastebin.com/raw/PGsVuAp6 — Joe Brailsford, Feb 02 '17 at 12:17
@Joe Brailsford first can you check my out put and tell me is that what you are looking for? — Charuක, Feb 02 '17 at 12:24
@Joe Brailsford thats the layout here in my answer well mm let me have a look on your main_content then — Charuක, Feb 02 '17 at 12:26
Thanks, like I say, main_content.axml is included inside a nested scrollview that's in main.axml, you can see this in the pastebin above :) — Joe Brailsford, Feb 02 '17 at 12:31
If you make that NestedScrollView another LinearLayout and make that height wrap it will work my questions is whats your requirement if it satisfy your requirement it will let that two views to scroll as two.Having a Scroll View inside another another Scroll View is not a good practice. — Charuක, Feb 02 '17 at 12:39
you have a `android.support.v4.widget.NestedScrollView` **@+id/nest_scrollview** change that to a LinearLayout — Charuක, Feb 02 '17 at 12:48

Android FrameLayouts side by side with independent internal scrolling

1 Answers1