Gridlayout + ScrollView

Question

I want to create a layout like first page of android market. I am trying to use gridlayout as I would like to put imageview with different sizes and location, I also need to input scrollview.

Actually my problem is how to input scrollview inside android.support.v7.widget.GridLayout?

I´ve tried:

<?xml version="1.0" encoding="utf-8"?>
 <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res/com.astuetz.viewpager.extensions.example"
     android:id="@+id/scrollView1"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content" >

<android.support.v7.widget.GridLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:columnCount="10" >

    <ImageView
        android:id="@+id/ImageView1"
        android:layout_width="130dp"
        android:layout_height="130dp"
        app:layout_column="2"
        app:layout_gravity="left"
        app:layout_row="1"
        android:src="@drawable/tab_background_focused" />

    <EditText
        android:id="@+id/editText1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_column="5"
        app:layout_gravity="bottom"
        app:layout_row="1"
        android:ems="10" >

        <requestFocus />
    </EditText>

    <ImageView
        android:id="@+id/ImageView2"
        android:layout_width="130dp"
        android:layout_height="130dp"
        app:layout_column="1"
        app:layout_columnSpan="3"
        app:layout_gravity="left"
        app:layout_row="2"
        android:src="@drawable/tab_background_focused" />

    <ImageView
        android:id="@+id/ImageView3"
        android:layout_width="130dp"
        android:layout_height="130dp"
        app:layout_column="2"
        app:layout_gravity="left"
        app:layout_row="4"
        app:layout_rowSpan="2"
        android:src="@drawable/tab_background_focused" android:adjustViewBounds="true"/>

    <ImageButton
        android:id="@+id/imageButton1"
        android:layout_width="130dp"
        android:layout_height="130dp"
        app:layout_column="2"
        app:layout_gravity="left"
        app:layout_row="7"
        android:src="@drawable/background_dots" />


    <ImageView
        android:id="@+id/imageView4"
        android:layout_width="130dp"
        android:layout_height="130dp"
        app:layout_column="2"
        app:layout_gravity="left"
        app:layout_row="9" android:adjustViewBounds="true" android:src="@drawable/tab_background"/>


    <ImageView
        android:id="@+id/imageView5"
        android:layout_width="130dp"
        android:layout_height="match_parent"
        app:layout_column="2"
        app:layout_gravity="left"
        app:layout_row="9"
        android:adjustViewBounds="true" />

   <ImageView
        android:id="@+id/imageView6"
        android:layout_width="130dp"
        android:layout_height="130dp"
        app:layout_column="2"
        app:layout_gravity="left"
        app:layout_row="9" android:adjustViewBounds="true"/>

      <ImageView
        android:id="@+id/imageView7"
        android:layout_width="130dp"
        android:layout_height="130dp"
        app:layout_column="2"
        app:layout_gravity="left"
        app:layout_row="2" /> 


    <android.support.v7.widget.Space
        android:id="@+id/space1"
        android:layout_width="145dp"
        android:layout_height="1dp"
        app:layout_column="0"
        app:layout_gravity="left"
        app:layout_row="0" />

    <android.support.v7.widget.Space
        android:layout_width="1dp"
        android:layout_height="21dp"
        app:layout_column="0"
        app:layout_row="0" />

    <android.support.v7.widget.Space
        android:id="@+id/space2"
        android:layout_width="1dp"
        android:layout_height="127dp"
        app:layout_column="0"
        app:layout_gravity="left"
        app:layout_row="1" />

    <android.support.v7.widget.Space
        android:id="@+id/space3"
        android:layout_width="10dp"
        android:layout_height="1dp"
        app:layout_column="0"
        app:layout_gravity="left"
        app:layout_row="0" />

    <android.support.v7.widget.Space
        android:id="@+id/space4"
        android:layout_width="1dp"
        android:layout_height="10dp"
        app:layout_column="0"
        app:layout_gravity="left"
        app:layout_row="1" />

    <android.support.v7.widget.Space
        android:id="@+id/space5"
        android:layout_width="44dp"
        android:layout_height="1dp"
        app:layout_column="3"
        app:layout_gravity="left"
        app:layout_row="0" />

    <android.support.v7.widget.Space
        android:layout_width="1dp"
        android:layout_height="58dp"
        app:layout_column="0"
        app:layout_row="5" />

    <android.support.v7.widget.Space
        android:layout_width="1dp"
        android:layout_height="10dp"
        app:layout_column="0"
        app:layout_row="3" />

    <android.support.v7.widget.Space
        android:id="@+id/space6"
        android:layout_width="1dp"
        android:layout_height="17dp"
        app:layout_column="0"
        app:layout_gravity="left"
        app:layout_row="6" />

    <android.support.v7.widget.Space
        android:id="@+id/space7"
        android:layout_width="238dp"
        android:layout_height="1dp"
        app:layout_column="4"
        app:layout_gravity="left"
        app:layout_row="0" />

    <android.support.v7.widget.Space
        android:id="@+id/space8"
        android:layout_width="1dp"
        android:layout_height="16dp"
        app:layout_column="0"
        app:layout_gravity="left"
        app:layout_row="8" />

    <android.support.v7.widget.Space
        android:layout_width="26dp"
        android:layout_height="1dp"
        app:layout_column="2"
        app:layout_row="0" />

</android.support.v7.widget.GridLayout>
</ScrollView>

In this code, the imageview start to overwrite each other in the end.

Answer 1

I solved this, you need to keep linear layout structure then add gridlayout inside this and set layout_height="the_value_you_need". Like this:

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" xmlns:app="http://schemas.android.com/apk/res/com.astuetz.viewpager.extensions.example">




    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical" >



        <android.support.v7.widget.GridLayout
            android:layout_width="match_parent"
            android:layout_height="900dp" >

            <ImageView
                android:id="@+id/imageView1"
                android:layout_width="130dp"
                android:layout_height="130dp"
                app:layout_column="0"
                app:layout_columnSpan="2"
                app:layout_gravity="left"
                app:layout_row="0"
                app:layout_rowSpan="2"
                android:src="@drawable/tab_background_pressed" />

            <ImageView
                android:id="@+id/imageView2"
                android:layout_width="130dp"
                android:layout_height="130dp"
                app:layout_column="0"
                app:layout_gravity="right"
                app:layout_row="3"
                android:src="@drawable/tab_background_pressed" />

            <ImageView
                android:id="@+id/imageView3"
                android:layout_width="130dp"
                android:layout_height="130dp"
                app:layout_column="0"
                app:layout_gravity="left"
                app:layout_row="5"
                android:src="@drawable/tab_background_pressed" />

            <ImageView
                android:id="@+id/imageView4"
                android:layout_width="130dp"
                android:layout_height="130dp"
                app:layout_column="0"
                app:layout_gravity="left"
                app:layout_row="7"
                android:src="@drawable/tab_background_pressed" />

            <ImageView
                android:id="@+id/imageView5"
                android:layout_width="130dp"
                android:layout_height="130dp"
                app:layout_column="0"
                app:layout_gravity="left"
                app:layout_row="7"
                android:src="@drawable/tab_background_pressed" />

            <android.support.v7.widget.Space
                android:layout_width="32dp"
                android:layout_height="1dp"
                app:layout_column="0"
                app:layout_row="0" />

            <android.support.v7.widget.Space
                android:id="@+id/space1"
                android:layout_width="1dp"
                android:layout_height="16dp"
                app:layout_column="0"
                app:layout_gravity="left"
                app:layout_row="2" />

            <android.support.v7.widget.Space
                android:id="@+id/space2"
                android:layout_width="1dp"
                android:layout_height="16dp"
                app:layout_column="0"
                app:layout_gravity="left"
                app:layout_row="4" />

            <android.support.v7.widget.Space
                android:id="@+id/space3"
                android:layout_width="1dp"
                android:layout_height="16dp"
                app:layout_column="0"
                app:layout_gravity="left"
                app:layout_row="6" />
        </android.support.v7.widget.GridLayout>

    </LinearLayout>


</ScrollView>

To have horizontal scroll, just change layout_widht to a fixed value.