Custom top row for gridview

Question

I am trying to make a gridview that has a different first row than the other rows. I used the following code to achieve what you can see in the screenshot. The only problem now is that when you scroll the top row stays there:

        <LinearLayout
            android:id="@+id/firstImages"
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <ImageView
                android:id="@+id/imageFirst"
                android:layout_weight="2"
                android:scaleType="fitCenter"
                android:adjustViewBounds="true"
                android:layout_width="0dp"
                android:layout_height="wrap_content" />
            <LinearLayout
                android:orientation="vertical"
                android:layout_weight="1"
                android:layout_width="0dp"
                android:layout_height="wrap_content">
                <ImageView
                    android:id="@+id/imageSecond"
                    android:scaleType="fitCenter"
                    android:adjustViewBounds="true"
                    android:layout_width="match_parent"
                    android:layout_weight="1"
                    android:layout_height="0dp" />
                <ImageView
                    android:id="@+id/imageThird"
                    android:scaleType="fitCenter"
                    android:adjustViewBounds="true"
                    android:layout_width="match_parent"
                    android:layout_weight="1"
                    android:layout_height="0dp" />
            </LinearLayout>
        </LinearLayout>
        <GridView
            android:id="@+id/catchesGrid"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_below="@+id/firstImages"
            android:layout_above="@+id/dealersFooter"
            android:numColumns="3"
            android:stretchMode="columnWidth"
            android:layout_alignParentEnd="true">

        </GridView>

I am showing the images using Picasso:

@Override
public View getView(int position, View convertView, ViewGroup parent) {
    SquaredImageView view = (SquaredImageView) convertView;
    if (view == null) {
        view = new SquaredImageView(context);
        view.setScaleType(CENTER_CROP);
    }

    Catch catchItem = getItem(position);

    String url = "image_url";

    Picasso.with(context) //
            .load(url) //
            .fit() //
            .into(view);

    return view;
}

Answer 1

<ScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent">

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

            <LinearLayout
                android:id="@+id/firstImages"
                android:orientation="horizontal"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <ImageView
                    android:id="@+id/imageFirst"
                    android:layout_weight="2"
                    android:scaleType="fitCenter"
                    android:adjustViewBounds="true"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content" />
                <LinearLayout
                    android:orientation="vertical"
                    android:layout_weight="1"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content">
                    <ImageView
                        android:id="@+id/imageSecond"
                        android:scaleType="fitCenter"
                        android:adjustViewBounds="true"
                        android:layout_width="match_parent"
                        android:layout_weight="1"
                        android:layout_height="0dp" />
                    <ImageView
                        android:id="@+id/imageThird"
                        android:scaleType="fitCenter"
                        android:adjustViewBounds="true"
                        android:layout_width="match_parent"
                        android:layout_weight="1"
                        android:layout_height="0dp" />
                </LinearLayout>
            </LinearLayout>
            <GridView
                android:id="@+id/catchesGrid"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_below="@+id/firstImages"
                android:layout_above="@+id/dealersFooter"
                android:numColumns="3"
                android:stretchMode="columnWidth"
                android:layout_alignParentEnd="true">

            </GridView>

        </LinearLayout>

    </ScrollView>

Now in your code, scroll using the ScrollView do not scroll using the GridView.

Also note that ScrollView can only host one direct child, hence the extra LinearLayout.