Android - Scrolling Vertically with a GridLayout

Question

How can I scroll vertically within a GridLayout? I have already tried using a ScrollView with the GridLayout as a Child, with RelativeLayout children within the GridLayout, but that results in all of the children piling on top of each other and or going outside of the layout.

Before Using the GridLayout in ScrollView:

After GridLayout in ScrollView:

I need to achieve that effect with the GridLayout inside the ScrollView as a Child

My XML layout file:

<ScrollView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:fillViewport="true">

    <LinearLayout
        android:id="@+id/boxContainer"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <GridLayout
            android:layout_width="wrap_content"
            android:layout_height="315dp">

            <!-- RelativeLayout children go here -->

        </GridLayout>

    </LinearLayout>

</ScrollView>

I am initialising them in OnCreate with LayoutParams:

//MiddleLayout
        GridLayout.LayoutParams middleLayoutLayoutParams = (GridLayout.LayoutParams)middleLayout.getLayoutParams();
        middleLayoutLayoutParams.setMargins(2, 273, 400, 0);
        middleLayoutLayoutParams.setGravity(Gravity.LEFT);
        middleLayoutLayoutParams.width = 424;
        middleLayout.setLayoutParams(middleLayoutLayoutParams);
        middleLayout.setBackgroundDrawable(new ColorDrawable(Color.RED));
        middleLayout.bringToFront();

        //MiddleLayout1
        GridLayout.LayoutParams middleLayoutLayoutParams1 = (GridLayout.LayoutParams)middleLayout1.getLayoutParams();
        middleLayoutLayoutParams1.setMargins(431, 273, -2, 0);
        middleLayout1.getLayoutParams().width = 645;
        middleLayout1.setLayoutParams(middleLayoutLayoutParams1);
        middleLayout1.setBackgroundDrawable(new ColorDrawable(Color.GREEN));

        //TopLayout
        GridLayout.LayoutParams topLayoutLayoutParams = (GridLayout.LayoutParams)topLayout.getLayoutParams();
        topLayoutLayoutParams.setMargins(2, 0, -2, 676);
        topLayout.getLayoutParams().width = 631;
        topLayout.setLayoutParams(topLayoutLayoutParams);
        topLayout.setBackgroundDrawable(new ColorDrawable(Color.rgb(255, 154, 0)));

        //TopLayout1
        GridLayout.LayoutParams topLayoutLayoutParams1 = (GridLayout.LayoutParams)topLayout1.getLayoutParams();
        topLayoutLayoutParams1.setMargins(638, 0, -2, 676);
        topLayout1.getLayoutParams().width = 440;
        topLayout1.setLayoutParams(topLayoutLayoutParams1);
        topLayout1.setBackgroundDrawable(new ColorDrawable(Color.BLUE));

        //bottomLayout
        GridLayout.LayoutParams bottomLayoutLayoutParams = (GridLayout.LayoutParams)bottomLayout.getLayoutParams();
        bottomLayoutLayoutParams.setMargins(2, 0, -2, 2);
        bottomLayout.getLayoutParams().width = 1073;
        bottomLayout.setLayoutParams(bottomLayoutLayoutParams);
        bottomLayout.setBackgroundDrawable(new ColorDrawable(Color.rgb(0, 0, 153)));

Any idea how I can get these to display properly within a GridLayout, or create the ScrollView/GridLayout Programatically?

Thanks!

Answer 1

I have been using GridLayouts by setting up the elements in rows and columns. The vertical scroll works without any problems. Have you tried something like this?

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/container_scroll_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

<GridLayout
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:columnCount="16" >

    <TextView
        android:id="@+id/orange"
        android:layout_row="0"
        android:layout_column="0"
        android:layout_columnSpan="6"
        android:text="Social" />

    <Space 
        android:id="@+id/space_col"
        android:layout_marginBottom="8dp"
        android:layout_marginLeft="16dp"
        android:layout_column="6"
        android:layout_columnSpan="4" />

    <TextView
        android:id="@+id/blue"
        android:layout_row="0"
        android:layout_column="10"
        android:layout_columnSpan="6"
        android:text="Utilities" />

    <TextView
        android:id="@+id/red"
        android:layout_row="1"
        android:layout_column="0"
        android:layout_columnSpan="6"
        android:text="Games" />

    <TextView
        android:id="@+id/green"
        android:layout_row="1"
        android:layout_column="6"
        android:layout_columnSpan="10"
        android:text="Google" />


</GridLayout>

</ScrollView>

You can adjust the row height by adding margins for top/bottom to the text views as needed. Don't use the margins and gravity to position the children. Only use row/column spec.