Apply the solution

app/src/main/java/xyz/leomurca/stageredlayoutview/MainActivity.kt

@@ -4,15 +4,18 @@ import android.os.Bundle
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
 import androidx.activity.enableEdgeToEdge
-import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.items
 import androidx.compose.material3.Scaffold
-import androidx.compose.material3.Text
-import androidx.compose.runtime.Composable
+import androidx.compose.runtime.*
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.dp
 import xyz.leomurca.stageredlayoutview.ui.theme.StageredLayoutViewTheme
 
+
 class MainActivity : ComponentActivity() {
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
@@ -20,28 +23,95 @@ class MainActivity : ComponentActivity() {
         setContent {
             StageredLayoutViewTheme {
                 Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
-                    Greeting(
-                        name = "Android",
-                        modifier = Modifier.padding(innerPadding)
+                    val gridData = listOf(
+                        // Row 1
+                        listOf(
+                            GridItem(weight = 2f, height = 200),
+                            GridItem(weight = 1f, height = 200)
+                        ),
+
+                        // Row 2
+                        listOf(
+                            GridItem(weight = 1f, height = 150),
+                            GridItem(weight = 1f, height = 150),
+                            GridItem(weight = 1f, height = 150)
+                        ),
+                        // Row 3
+                        listOf(
+                            GridItem(weight = 1f, height = 250),
+                            GridItem(weight = 2f, height = 250)
+                        ),
+
+                        // Row 4
+                        listOf(
+                            GridItem(weight = 1f, height = 160),
+                            GridItem(weight = 1f, height = 160),
+                            GridItem(weight = 1f, height = 160)
+                        ),
+
+                        // Row 5
+                        listOf(
+                            GridItem(weight = 1f, height = 160),
+                        ),
                     )
+                    StaggeredLayoutView(gridData, Modifier.padding(innerPadding))
                 }
             }
         }
     }
 }
 
-@Composable
-fun Greeting(name: String, modifier: Modifier = Modifier) {
-    Text(
-        text = "Hello $name!",
-        modifier = modifier
-    )
-}
+/**
+ * Data class to represent an item in the grid.
+ *
+ * Each [GridItem] holds the information necessary to display an item within a grid row.
+ *
+ * @property weight The relative weight for this grid item when used in a [Row]. This controls
+ * how much horizontal space the item occupies relative to its siblings. Defaults to 1F.
+ * @property height The height (in pixels) to be used for displaying the image.
+ */
+data class GridItem(
+    val weight: Float = 1F,
+    val height: Int,
+)
 
-@Preview(showBackground = true)
+/**
+ * A composable that displays a staggered grid of items.
+ *
+ * The grid is constructed by arranging rows (provided as lists of [GridItem]s) in a [LazyColumn].
+ * Each row is composed of a [Row] where individual grid items are displayed using [Box].
+ *
+ * @param gridData A list of rows where each row is a list of [GridItem]. Each inner list represents
+ * a row in the staggered grid.
+ * @param modifier The [Modifier] to be applied to the root [LazyColumn].
+ */
 @Composable
-fun GreetingPreview() {
-    StageredLayoutViewTheme {
-        Greeting("Android")
+fun StaggeredLayoutView(gridData: List<List<GridItem>>, modifier: Modifier) {
+    LazyColumn(
+        modifier = modifier
+            .fillMaxSize()
+            .background(Color.White)
+    ) {
+        items(gridData) { rowItems ->
+            Row(modifier = Modifier.fillMaxWidth()) {
+                rowItems.forEachIndexed { index, item ->
+                    Box(
+                        modifier = Modifier
+                            .weight(item.weight)
+                            .height(item.height.dp)
+                            .background(Color(0xFF228B22))
+                            .padding(4.dp)
+                            .fillMaxSize()
+                    )
+
+                    if (index < rowItems.size - 1) {
+                        Spacer(modifier = Modifier.width(4.dp))
+                    }
+                }
+            }
+            if (rowItems != gridData.last()) {
+                Spacer(modifier = Modifier.height(4.dp))
+            }
+        }
     }
-}
+}