StaggeredGridLayout é um LayoutManager no android studio semelhante ao GridView , mas em StaggeredGridLayout cada grade tem sua própria altura e largura.

Diferença entre GridView e Staggered GridView 

StaggeredGridlayout

1. As crianças estão em um formato de grade escalonado.
2. Suporta layout horizontal e vertical
3. Exemplo: Pinterest, um aplicativo de papel de parede, aplicativo de status, etc.

GridView

1. As crianças em formato de grade retangular
2. Ele também suporta layout horizontal e vertical
3. Exemplo: Flipkart, Amazon, aplicativo de papel de parede, etc.

Exemplo

Um exemplo de GIF é fornecido abaixo para se ter uma ideia sobre o que faremos neste artigo. Observe que vamos implementar este projeto usando a   linguagem Java . 

Implementação passo a passo

Etapa 1: Criação de um novo projeto

Para criar um novo projeto no Android Studio, consulte Como criar / iniciar um novo projeto no Android Studio . Observe que escolha Java como a linguagem, embora iremos implementar este projeto na linguagem Java.

Etapa 2: antes de ir para a seção de codificação, faça uma pré-tarefa

Vá para Gradle Scripts> seção build.gradle (Módulo: app) , importe as seguintes dependências e clique em “ sincronizar agora ” no pop-up acima.

dependencies
{

// Adicionando visão Recycler 

implementação 'androidx.recyclerview: recyclerview: 1.1.0'

}

Etapa 3: projetar a interface do usuário 

No arquivo activity_main.xml, adicione um RecyclerView conforme mostrado abaixo. 

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
  
    <!-- Recycler view -->
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recycleViewStagged"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</RelativeLayout>

Agora criamos um novo arquivo de recurso de layout ( recyclerview_row.xml ) dentro dele, adicionamos um ImageView simples e o definimos  android: scaleType = ”fitXY”, o código completo de recyclerview_row.xml é mostrado abaixo

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="8dp">
  
    <!-- simple image view -->
    <ImageView
        android:id="@+id/imgView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="fitXY"
        android:src="@drawable/k1" />
</RelativeLayout>

Etapa 4: Parte de codificação

Primeiro, criamos uma classe RecyclerViewAdapter.java e a estendemos para RecyclerView.Adapter <RecyclerViewAdapter.ViewHolder>  e implementa seus métodos conforme mostrado abaixo. Abaixo está o código para o  arquivo RecyclerViewAdapter.java . Os comentários são adicionados dentro do código para entender o código em mais detalhes.

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import androidx.recyclerview.widget.RecyclerView;
import java.util.ArrayList;
  
public class RecyclerViewAdapter extends RecyclerView.Adapter<RecyclerViewAdapter.ViewHolder> {
  
    // ArrayList
    ArrayList<Integer> Image;
    Context context;
  
    // constructor
    public RecyclerViewAdapter(Context context, ArrayList<Integer> Image) {
        super();
        this.context = context;
        this.Image = Image;
    }
  
    @Override
    public ViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) {
        View v = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.recyclerview_row, viewGroup, false);
        ViewHolder viewHolder = new ViewHolder(v);
        return viewHolder;
    }
  
    @Override
    public void onBindViewHolder(ViewHolder viewHolder, int i) {
        // setting image resource
        viewHolder.imgview.setImageResource(Image.get(i));
    }
  
    @Override
    public int getItemCount() {
        return Image.size();
    }
  
    public static class ViewHolder extends RecyclerView.ViewHolder {
  
        public ImageView imgview;
        public ViewHolder(View itemView) {
            super(itemView);
            
            // getting ImageView reference
            imgview = (ImageView) itemView.findViewById(R.id.imgView);
        }
    }
}

Agora abra o arquivo MainActivity.java lá dentro da classe, antes de tudo, crie o objeto da classe RecyclerViewAdapter, RecyclerView e um ArrayList  para armazenar ids de imagens

// criando objeto recyclerviewadapter

RecyclerViewAdapter recyclerViewAdapter;

// criando arrayList

ArrayList <Integer> ImageList;

// criando objeto de visualização do reciclador

RecyclerView recyclerView;

Agora, dentro do método onCreate() , vincule esses objetos aos seus respectivos IDs fornecidos no arquivo activity_main.xml .

 // adicionando valores a arrayList

 ImageList = new ArrayList <> (Arrays.asList (

               R.drawable.k1, R.drawable.k2,

               R.drawable.k3, R.drawable.k4,

               R.drawable.k5, R.drawable.k6,

               R.drawable.k7, R.drawable.k8,

               R.drawable.k9)

 );

 recyclerView = findViewById (R.id.recycleViewStagged);

Agora dentro do método onCreate() , criamos um   RecyclerView.LayoutManager (Saiba mais sobre StaggeredGridLayoutManager ) e o definimos como RecyclerView 

// configurando recyclerView layoutManager

RecyclerView.LayoutManager layoutManager = novo StaggeredGridLayoutManager (2, StaggeredGridLayoutManager.VERTICAL);

recyclerView.setLayoutManager (layoutManager);

Agora inicializamos e setAdapter()

recyclerViewAdapter = new RecyclerViewAdapter (this, ImageList);

// configurando o adaptador de visualização de reciclagem

recyclerView.setAdapter (recyclerViewAdapter);

Abaixo está o código completo para o arquivo MainActivity.java . Os comentários são adicionados dentro do código para entender o código em mais detalhes.

import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.RecyclerView;
import androidx.recyclerview.widget.StaggeredGridLayoutManager;
import java.util.ArrayList;
import java.util.Arrays;
  
public class MainActivity extends AppCompatActivity {
  
    // creating recyclerviewadapter object
    RecyclerViewAdapter recyclerViewAdapter;
      
    // creating arrayList
    ArrayList<Integer> ImageList;
      
    // creating recycler view object
    RecyclerView recyclerView;
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
  
        // adding values to arrayList
        ImageList = new ArrayList<>(Arrays.asList(
                R.drawable.k1, R.drawable.k2,
                R.drawable.k3, R.drawable.k4,
                R.drawable.k5, R.drawable.k6,
                R.drawable.k7, R.drawable.k8,
                R.drawable.k9)
        );
  
        recyclerView = findViewById(R.id.recycleViewStagged);
  
        // setting recyclerView layoutManager
        RecyclerView.LayoutManager layoutManager = new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL);
        recyclerView.setLayoutManager(layoutManager);
        recyclerViewAdapter = new RecyclerViewAdapter(this, ImageList);
          
        // setting recycle view adapter
        recyclerView.setAdapter(recyclerViewAdapter);
    }
}

Saída: