Android Staggered Layout With RecyclerView

1) Add this dependencies in your gradle file


implementation 'com.github.bumptech.glide:glide:4.9.0'
annotationProcessor 'com.github.bumptech.glide:compiler:4.9.0'

Glide is an Image Loader Library for Android developed by bumptech and is a library that is recommended by Google. It has been used in many Google open source projects including Google I/O 2014 official application. It provides animated GIF support and handles image loading/caching.

2) create staggerd_layout.xml in res/layout folder

staggerd_layout.xml


<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_margin="5dp">

    <androidx.cardview.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:cardCornerRadius="4dp"
        app:cardElevation="2dp"
        android:layout_centerHorizontal="true">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:padding="5dp">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:src="@mipmap/ic_launcher"
                android:id="@+id/imageview_widget"
                android:scaleType="center"/>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Canada"
                android:id="@+id/name_widget"
                android:layout_below="@+id/imageview_widget"
                android:layout_marginTop="10dp"
                android:textColor="#000"/>

        </RelativeLayout>


    </androidx.cardview.widget.CardView>
</RelativeLayout>

3)Create StaggeredRecyclerViewAdapter class 

StaggeredRecyclerViewAdapter.java

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;

import androidx.recyclerview.widget.RecyclerView;

import com.bumptech.glide.Glide;
import com.bumptech.glide.request.RequestOptions;

import java.util.ArrayList;


public class StaggeredRecyclerViewAdapter extends RecyclerView.Adapter<StaggeredRecyclerViewAdapter.ViewHolder> {

    private ArrayList<String> Title = new ArrayList<>();
    private ArrayList<String> ImageUrl = new ArrayList<>();
    private Context mContext;

    public StaggeredRecyclerViewAdapter(Context context, ArrayList<String> names, ArrayList<String> imageUrls) {
        Title = names;
        ImageUrl = imageUrls;
        mContext = context;
    }

    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.staggerd_layout, parent, false);
        return new ViewHolder(view);
    }

    @Override
    public void onBindViewHolder(ViewHolder holder, final int position) {

        RequestOptions requestOptions = new RequestOptions()
                .placeholder(R.drawable.ic_launcher_background);

        Glide.with(mContext)
                .load(ImageUrl.get(position))
                .apply(requestOptions)
                .into(holder.image);

        holder.name.setText(Title.get(position));

        holder.image.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(mContext, Title.get(position), Toast.LENGTH_SHORT).show();
            }
        });

    }

    @Override
    public int getItemCount() {
        return ImageUrl.size();
    }

    public class ViewHolder extends RecyclerView.ViewHolder{

        ImageView image;
        TextView name;

        public ViewHolder(View itemView) {
            super(itemView);
            this.image = itemView.findViewById(R.id.imageview_widget);
            this.name = itemView.findViewById(R.id.name_widget);
        }
    }
}

4)Add RecyclerView In Your activity_main.xml file


activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:background="@android:color/darker_gray">


    <androidx.recyclerview.widget.RecyclerView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/recyclerview"
        android:orientation="vertical"/>

</RelativeLayout>


5) Now Is Time To Implement Bind Data In MainActivity.java

import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;
import androidx.recyclerview.widget.StaggeredGridLayoutManager;

import android.os.Bundle;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {
 
 
    private static final int NUM_COLUMNS = 2;

    private ArrayList<String> ImageUrl = new ArrayList<>();
    private ArrayList<String> Title = new ArrayList<>();


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        initImageBitmap();
    }

    private void initImageBitmap() {

        ImageUrl.add("http://www.transindiatravels.com/wp-content/uploads/the-taj-mahal-agra.jpg");
        Title.add("Taj Mahal");

        ImageUrl.add("https://www.planetware.com/photos-large/IND/india-top-attractions-varanasi.jpg");
        Title.add("Varanasi");

        ImageUrl.add("https://www.planetware.com/photos-large/IND/india-top-attractions-jaisalmer.jpg");
        Title.add("Jaisalmer");

        ImageUrl.add("https://www.planetware.com/photos-large/IND/india-top-attractions-gateway-india.jpg");
        Title.add("Gateway of India");

        ImageUrl.add("https://upload.wikimedia.org/wikipedia/commons/0/09/India_Gate_in_New_Delhi_03-2016.jpg");
        Title.add("India Gate");

        ImageUrl.add("https://www.planetware.com/photos-large/IND/india-top-attractions-amer-fort.jpg");
        Title.add("Amer Fort, Jaipur");

        ImageUrl.add("https://www.planetware.com/photos-large/IND/india-top-attractions-goa.jpg");
        Title.add("The Beaches of Goa");

        ImageUrl.add("https://www.planetware.com/photos-large/IND/india-top-attractions-ellora-caves.jpg");
        Title.add("The Ellora Caves, Aurangabad");

        ImageUrl.add("https://images.mapsofindia.com/my-india/qutub-minar-delhi.jpg");
        Title.add("Kutub Minar");

        ImageUrl.add("https://www.planetware.com/photos-large/IND/india-top-attractions-mysore-palace.jpg");
        Title.add("Mysore Palace");

        ImageUrl.add("https://www.planetware.com/photos-large/IND/india-top-attractions-mahabodhi-temple.jpg");
        Title.add("Mahabodhi Temple, Bodhgaya");

        initRecyclerView();
    }

    private void initRecyclerView() {

        RecyclerView recyclerView = findViewById(R.id.recyclerview);

        StaggeredRecyclerViewAdapter staggeredRecyclerViewAdapter =
                new StaggeredRecyclerViewAdapter(this, Title, ImageUrl);

        StaggeredGridLayoutManager staggeredGridLayoutManager = new StaggeredGridLayoutManager( NUM_COLUMNS,
                LinearLayoutManager.VERTICAL);

        /*
        Official Link Of StaggeredGridLayoutManager

  https://developer.android.com/reference/android/support/v7/widget/StaggeredGridLayoutManager

        */

        recyclerView.setLayoutManager(staggeredGridLayoutManager);
        recyclerView.setAdapter(staggeredRecyclerViewAdapter);
    }
}

Subscribe Our YouTube Channel:
Mijas Siklodi