Building Staggered Grid Layouts Using XML UI

While Jetpack Compose offers a modern, declarative approach to building Android UIs, many existing and legacy Android applications still rely on XML-based layouts. Achieving a staggered grid layout, sometimes called a masonry layout, in XML UI requires a slightly different approach compared to Jetpack Compose, often involving the use of third-party libraries or custom implementations. This post guides you through how to achieve this with XML layouts.

Understanding Staggered Grid Layout

A staggered grid layout arranges views in a grid-like structure where the sizes of the views, especially their heights, can vary. This creates a visually dynamic effect, where items fit together like puzzle pieces. Common examples include Pinterest’s board display and various image gallery apps.

Why Use Staggered Grid Layout?

• Improved Aesthetics: Offers a visually appealing and modern look compared to regular grid layouts.
• Flexible Content Display: Handles views of varying sizes elegantly, without leaving empty spaces.
• Better User Experience: Engages users with a dynamic and interactive interface.

Implementing Staggered Grid Layout with XML

Android XML layouts do not have a built-in staggered grid layout manager. However, we can achieve this effect using third-party libraries such as RecyclerView with a StaggeredGridLayoutManager or other custom solutions.

Method 1: Using RecyclerView with StaggeredGridLayoutManager

The most straightforward way to implement a staggered grid layout in XML is using a RecyclerView and the StaggeredGridLayoutManager. RecyclerView is a flexible view for providing a limited window into a large data set. StaggeredGridLayoutManager arranges items in a staggered grid formation, where items can span multiple columns.

Step 1: Add Dependency

Ensure that you have the RecyclerView dependency added in your build.gradle file:

dependencies {
    implementation 'androidx.recyclerview:recyclerview:1.3.2'
    implementation 'androidx.recyclerview:recyclerview-selection:1.1.0'  // If you need item selection
}

Step 2: Define the Layout XML

In your XML layout file (e.g., activity_main.xml), add a RecyclerView:

<androidx.recyclerview.widget.RecyclerView
    android:id="@+id/staggeredRecyclerView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"/>

Step 3: Create the Item Layout XML

Create an XML layout for each item in the grid (e.g., staggered_grid_item.xml). This can be a simple CardView containing an ImageView and a TextView:

<androidx.cardview.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="4dp"
    app:cardCornerRadius="8dp"
    app:cardElevation="4dp">

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

        <ImageView
            android:id="@+id/itemImage"
            android:layout_width="match_parent"
            android:layout_height="150dp"
            android:scaleType="centerCrop"
            android:src="@drawable/ic_launcher_background"/>  <!-- Replace with your image -->

        <TextView
            android:id="@+id/itemText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="8dp"
            android:text="Item Text"
            android:textSize="16sp"/>

    </LinearLayout>

</androidx.cardview.widget.CardView>

Step 4: Create a RecyclerView Adapter

Create an adapter for your RecyclerView that inflates the item layout and binds the data. Here’s an example in Kotlin:

import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.ImageView
import android.widget.TextView
import androidx.recyclerview.widget.RecyclerView
import androidx.cardview.widget.CardView
import com.example.yourapp.R  // Replace with your app's package

class StaggeredGridAdapter(private val items: List) :
    RecyclerView.Adapter<StaggeredGridAdapter.ViewHolder>() {

    class ViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
        val itemImage: ImageView = itemView.findViewById(R.id.itemImage)
        val itemText: TextView = itemView.findViewById(R.id.itemText)
        val cardView: CardView = itemView.findViewById(R.id.cardView)
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
        val view = LayoutInflater.from(parent.context)
            .inflate(R.layout.staggered_grid_item, parent, false)
        return ViewHolder(view)
    }

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        val item = items[position]
        holder.itemText.text = item.text
        // Load your image into itemImage using an image loading library such as Glide or Picasso
        // For example:
        // Glide.with(holder.itemView.context).load(item.imageUrl).into(holder.itemImage)
        
        // Setting different heights dynamically
        val height = item.height
        val layoutParams = holder.cardView.layoutParams
        layoutParams.height = height
        holder.cardView.layoutParams = layoutParams
        
        holder.itemImage.setImageResource(item.imageResource)
    }

    override fun getItemCount(): Int = items.size
}

data class StaggeredGridItem(val text: String, val imageResource: Int, val height: Int)

Step 5: Set up the Activity

In your Activity, initialize the RecyclerView with the StaggeredGridLayoutManager:

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.recyclerview.widget.StaggeredGridLayoutManager
import androidx.recyclerview.widget.RecyclerView
import com.example.yourapp.StaggeredGridAdapter
import com.example.yourapp.StaggeredGridItem
import com.example.yourapp.R

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val staggeredRecyclerView: RecyclerView = findViewById(R.id.staggeredRecyclerView)
        val items = listOf(
            StaggeredGridItem("Item 1", R.drawable.image1, 300),
            StaggeredGridItem("Item 2", R.drawable.image2, 200),
            StaggeredGridItem("Item 3", R.drawable.image3, 250),
            StaggeredGridItem("Item 4", R.drawable.image4, 150),
            StaggeredGridItem("Item 5", R.drawable.image5, 400),
            StaggeredGridItem("Item 6", R.drawable.image6, 200),
            // ... more items
        )

        val adapter = StaggeredGridAdapter(items)
        staggeredRecyclerView.adapter = adapter
        val layoutManager = StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL) // 2 is the number of columns
        staggeredRecyclerView.layoutManager = layoutManager
    }
}

In this example:

• The StaggeredGridLayoutManager is set to use 2 columns. You can adjust the column count as needed.
• The item heights are dynamically assigned in the adapter, allowing for a true staggered effect.

Conclusion

Implementing a staggered grid layout using XML UI in Android primarily involves leveraging the RecyclerView with the StaggeredGridLayoutManager. By setting up the adapter correctly and ensuring varying heights for each item, you can create a dynamic and visually appealing layout for your Android application. While it might involve slightly more boilerplate compared to Jetpack Compose, this method provides a robust and widely supported solution for staggered grid layouts.