Create a staggered grid like the given image

Question

I am trying to achieve this view:

This is the partial view , I can have view vertically merged with 2 cells or horizontally merged 2 cells or single small view.

This view can scroll vertically

Please help me to get this.

checkout following link : http://abhiandroid.com/materialdesign/recyclerview-as-staggered-grid-example.html — sapan ravani, Apr 14 '17 at 11:54
@sapna , I have checked this code view are arrange only vertically but you can check i have synchronized view vertically as well as horizontally — Amit Sharma, Apr 14 '17 at 12:00
Hope This Helps : https://inducesmile.com/android/android-staggeredgridlayoutmanager-example-tutorial/ — Haris ali, Apr 14 '17 at 12:16

score 0 · Answer 1 · edited May 23 '17 at 12:25

You can create this layout by using nested LinearLayout with attribute layout_weight and weightSum. To make this layout scrollable, use ScrollView as a root layout.

Here is an working example:

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="8dp"
        android:orientation="vertical">

        <!-- ROW1 -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:background="#ff0000">

        </LinearLayout>

        <!-- ROW2 -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:orientation="horizontal"
            android:weightSum="2">

            <!-- ROW2 COL1-->
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:layout_marginRight="4dp"
                android:layout_weight="1"
                android:background="#00ff00">

            </LinearLayout>

            <!-- ROW2 COL2-->
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="4dp"
                android:orientation="vertical"
                android:layout_weight="1"
                android:weightSum="2">

                <!-- ROW2 COL2 CHILD1-->
                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="96dp"
                    android:layout_marginBottom="4dp"
                    android:layout_weight="1"
                    android:background="#0000ff">

                </LinearLayout>

                <!-- ROW2 COL2 CHILD2-->
                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="96dp"
                    android:layout_marginTop="4dp"
                    android:layout_weight="1"
                    android:background="#0000ff">

                </LinearLayout>
            </LinearLayout>
        </LinearLayout>

        <!-- ROW3 -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:orientation="horizontal"
            android:weightSum="2">

            <!-- ROW3 COL1-->
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="100dp"
                android:layout_marginRight="4dp"
                android:layout_weight="1"
                android:background="#fff000">

            </LinearLayout>

            <!-- ROW3 COL2-->
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="100dp"
                android:layout_marginLeft="4dp"
                android:layout_weight="1"
                android:background="#fff000">

            </LinearLayout>
        </LinearLayout>

        <!-- ROW4 -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:orientation="horizontal"
            android:weightSum="2">

            <!-- ROW4 COL1-->
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:layout_marginRight="4dp"
                android:layout_weight="1"
                android:background="#ff00ff">

            </LinearLayout>

            <!-- ROW4 COL2-->
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="4dp"
                android:orientation="vertical"
                android:layout_weight="1"
                android:weightSum="2">

                <!-- ROW4 COL2 CHILD1-->
                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="96dp"
                    android:layout_marginBottom="4dp"
                    android:layout_weight="1"
                    android:background="#00ffff">

                </LinearLayout>

                <!-- ROW4 COL2 CHILD2-->
                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="96dp"
                    android:layout_marginTop="4dp"
                    android:layout_weight="1"
                    android:background="#00ffff">

                </LinearLayout>
            </LinearLayout>
        </LinearLayout>

    </LinearLayout>
</ScrollView>

OUTPUT:

You can also use GridLayout to achieve this view.

Here is a good tutorial about GridLayout and some stackOverflow answers.

Hope this will help~

Create a staggered grid like the given image

1 Answers1