Search code examples
androidlayoutscrollviewtablelayouthorizontalscrollview

Android Nested ScrollView Freeze Pane

I am attempting to achieve something like in Excel when you can freeze the top pane of a sheet. I have a TableLayout inside a HorizontalScrollView for my header.

For my content, it is a TableLayout inside a HorizontalScrollView inside a ScrollView. I am getting close, but can't figure out why the table body starts halfway down my view.

The actual header and rows are loaded programmatically "". As you can see the rows start halfway down the screen and they scroll way past the actual row count.

I also am now having an issue with the horizontal scrolling which was working 100 revisions ago.

Showing the table rows halfway down

Main XML

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="390dp"
    android:layout_height="match_parent"
    android:background="@drawable/bordered_stuff"
    android:orientation="vertical">

    <HorizontalScrollView
        android:id="@+id/window_guild_listtab_header_scroller_horizontal"
        android:layout_width="811dp"
        android:layout_height="wrap_content"
        android:fillViewport="true"
        android:layout_marginBottom="1dp"
        android:scrollbars="none" >

        <TableLayout
            android:id="@+id/window_guild_listtab_table_header"
            android:layout_width="811dp"
            android:layout_height="wrap_content"
            android:layout_marginLeft="2dp"
            android:layout_marginTop="2dp"
            android:layout_marginRight="2dp">

            <!--Data loaded here programatically-->

        </TableLayout>

    </HorizontalScrollView>

    <ScrollView
        android:id="@+id/window_guild_listtab_table_scroller"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fillViewport="true"
        android:layout_marginBottom="1dp"
        android:fadeScrollbars="false"
        android:scrollbarAlwaysDrawVerticalTrack="true"
        android:scrollbarSize="3dp"
        android:scrollbarStyle="outsideOverlay"
        android:scrollbarThumbVertical="@color/THEME_LIGHT_TEXT">

        <HorizontalScrollView
            android:id="@+id/window_guild_listtab_table_scroller_horizontal"
            android:layout_width="811dp"
            android:layout_height="wrap_content"
            android:fillViewport="true"
            android:layout_marginBottom="1dp"
            android:fadeScrollbars="false"
            android:scrollbarAlwaysDrawHorizontalTrack="true"
            android:scrollbarSize="3dp"
            android:scrollbarStyle="outsideOverlay"
            android:scrollbarThumbHorizontal="@color/THEME_LIGHT_TEXT">

            <TableLayout
                android:id="@+id/window_guild_listtab_table"
                android:layout_width="811dp"
                android:layout_height="wrap_content"
                android:layout_marginLeft="2dp"
                android:layout_marginRight="2dp">

                <!--Data loaded here programatically-->

            </TableLayout>

        </HorizontalScrollView>

    </ScrollView>

</LinearLayout>

And here is how the rows are inflated without posting a wall of code:

<TableRow xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:background="@drawable/table_border"
    android:divider="@color/THEME_LIGHT_TEXT"
    android:showDividers="middle">

    <ImageView
        android:id="@+id/game_guild_list_row_flag_left_imageview"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_margin="1dp"
        android:layout_weight="0.121"
        android:gravity="center"
        android:background="@drawable/bordered_stuff" />

    <com.kisnardonline.helpers.FontTextView
        android:id="@+id/game_guild_list_row_tag_value"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_margin="1dp"
        android:layout_weight="0.055"
        android:gravity="center"
        android:text=""
        android:textColor="@color/THEME_LIGHT_TEXT"
        android:textSize="13sp" />
Solution

  • And on the 3rd day he figured it out... hope someone else finds this helpful.

    <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="811dp"
    android:layout_height="match_parent"
    android:background="@drawable/bordered_stuff"
    android:orientation="vertical">

    <HorizontalScrollView
        android:id="@+id/window_guild_listtab_header_scroller_horizontal"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_marginBottom="1dp"
        android:fillViewport="true"
        android:scrollbars="none">

        <ScrollView
            android:id="@+id/window_guild_listtab_header_fake_scroller"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:fillViewport="true"
            android:layout_marginBottom="1dp"
            android:scrollbars="none">

            <TableLayout
                android:id="@+id/window_guild_listtab_table_header"
                android:layout_width="811dp"
                android:layout_height="wrap_content"
                android:layout_marginLeft="2dp"
                android:layout_marginTop="2dp"
                android:layout_marginRight="2dp">

                <!--Data loaded here programatically-->

            </TableLayout>

        </ScrollView>

    </HorizontalScrollView>

    <HorizontalScrollView
        android:id="@+id/window_guild_listtab_table_scroller_horizontal"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:fillViewport="true"
        android:layout_marginBottom="1dp"
        android:fadeScrollbars="false"
        android:scrollbarAlwaysDrawHorizontalTrack="true"
        android:scrollbarSize="3dp"
        android:scrollbarStyle="outsideOverlay"
        android:scrollbarThumbHorizontal="@color/THEME_LIGHT_TEXT">

        <ScrollView
            android:id="@+id/window_guild_listtab_table_scroller"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:fillViewport="true"
            android:layout_marginBottom="1dp"
            android:fadeScrollbars="false"
            android:scrollbarAlwaysDrawVerticalTrack="true"
            android:scrollbarSize="3dp"
            android:scrollbarStyle="outsideOverlay"
            android:scrollbarThumbVertical="@color/THEME_LIGHT_TEXT">

                <TableLayout
                    android:id="@+id/window_guild_listtab_table"
                    android:layout_width="811dp"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="2dp"
                    android:layout_marginRight="2dp">

                    <!--Data loaded here programatically-->

                </TableLayout>

        </ScrollView>

    </HorizontalScrollView>

</LinearLayout>