Staggered GridView in Android with Example
Last Updated :
30 Aug, 2022
StaggeredGridLayout is a LayoutManager in the android studio similar to GridView, but in StaggeredGridLayout each grid has its own height and width.
Difference Between GridView and Staggered GridView
StaggeredGridlayout
- The children are in a staggered grid format.
- It supports horizontal and vertical layout
- Example: Pinterest, a wallpaper app, a status app, etc
GridView
- The children’s in a rectangular grid format
- It also supports horizontal and vertical layout
- Example: Flipkart, Amazon, wallpaper app, etc
Example
A sample GIF is given below to get an idea about what we are going to do in this article. We are going to implement this project using both Java and Kotlin Programming Language for Android.
Step by Step Implementation
Step 1: Create a New Project in Android Studio
To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. The code for that has been given in both Java and Kotlin Programming Language for Android.
Step 2: Adding Dependency to the build.gradle File
Go to Module build.gradle file and add this dependency and click on Sync Now button.
implementation 'androidx.recyclerview:recyclerview:1.1.0'
Step 3: Working with the XML Files
Next, go to the activity_main.xml file, which represents the UI of the project. Below is the code for the activity_main.xml file. Comments are added inside the code to understand the code in more detail. Add a RecyclerView as shown below.
XML
<? xml version = "1.0" encoding = "utf-8" ?>
android:layout_width = "match_parent"
android:layout_height = "match_parent"
tools:context = ".MainActivity" >
< androidx.recyclerview.widget.RecyclerView
android:id = "@+id/recycleViewStagged"
android:layout_width = "match_parent"
android:layout_height = "match_parent" />
</ RelativeLayout >
|
Now we create a new layout resource file (recyclerview_row.xml)
Inside it, we add a simple ImageView and set it android:scaleType=”fitXY” complete code of recyclerview_row.xml is shown below
XML
<? xml version = "1.0" encoding = "utf-8" ?>
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:layout_margin = "8dp" >
< ImageView
android:id = "@+id/imgView"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:scaleType = "fitXY"
android:src = "@drawable/k1" />
</ RelativeLayout >
|
Step 4: Working with the Java/Kotlin Files
Go to the MainActivity File and refer to the following code. Below is the code for the MainActivity File. Comments are added inside the code to understand the code in more detail. First, we create a RecyclerViewAdapter class and extend it to RecyclerView.Adapter<RecyclerViewAdapter.ViewHolder> and implements its methods as shown below. Below is the code for the RecyclerViewAdapter file. Comments are added inside the code to understand the code in more detail.
Java
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<Integer> Image;
Context context;
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 );
return new ViewHolder(v);
}
@Override
public void onBindViewHolder(ViewHolder viewHolder, int i) {
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);
imgview = (ImageView) itemView.findViewById(R.id.imgView);
}
}
}
|
Kotlin
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
class RecyclerViewAdapter(var context: Context, private var Image: ArrayList<Int>) :
RecyclerView.Adapter<RecyclerViewAdapter.ViewHolder>() {
override fun onCreateViewHolder(viewGroup: ViewGroup, i: Int): ViewHolder {
val v: View = LayoutInflater.from(viewGroup.context).inflate(R.layout.recyclerview_row, viewGroup, false )
return ViewHolder(v)
}
override fun onBindViewHolder(viewHolder: ViewHolder, i: Int) {
viewHolder.imgview.setImageResource(Image[i])
}
override fun getItemCount(): Int {
return Image.size
}
class ViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
var imgview: ImageView
init {
imgview = itemView.findViewById<View>(R.id.imgView) as ImageView
}
}
}
|
Now Open the MainActivity File there within the Class
First of all, create the object of the RecyclerViewAdapter, RecyclerView class, and an ArrayList to store ids of images
// creating recyclerviewadapter object
RecyclerViewAdapter recyclerViewAdapter;
// creating arrayList
ArrayList<Integer> ImageList;
// creating recycler view object
RecyclerView recyclerView;
Now inside the onCreate() method, link those objects with their respective IDs that are given in the activity_main.xml file.
// 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);
Now inside onCreate() method, we create a RecyclerView.LayoutManager (Learn more about StaggeredGridLayoutManager) and set it to RecyclerView
// setting recyclerView layoutManager
RecyclerView.LayoutManager layoutManager = new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL);
recyclerView.setLayoutManager(layoutManager);
Now we initialize and setAdapter()
recyclerViewAdapter = new RecyclerViewAdapter(this, ImageList);
// setting recycle view adapter
recyclerView.setAdapter(recyclerViewAdapter);
Below is the complete code for the MainActivity file. Comments are added inside the code to understand the code in more detail.
Java
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 {
RecyclerViewAdapter recyclerViewAdapter;
ArrayList<Integer> ImageList;
RecyclerView recyclerView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super .onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
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);
RecyclerView.LayoutManager layoutManager = new StaggeredGridLayoutManager( 2 , StaggeredGridLayoutManager.VERTICAL);
recyclerView.setLayoutManager(layoutManager);
recyclerViewAdapter = new RecyclerViewAdapter( this , ImageList);
recyclerView.setAdapter(recyclerViewAdapter);
}
}
|
Kotlin
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.recyclerview.widget.RecyclerView
import androidx.recyclerview.widget.StaggeredGridLayoutManager
import java.util.*
class MainActivity : AppCompatActivity() {
private lateinit var recyclerViewAdapter: RecyclerViewAdapter
private lateinit var ImageList: ArrayList<Int>
private lateinit var recyclerView: RecyclerView
override fun onCreate(savedInstanceState: Bundle?) {
super .onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
ImageList = ArrayList(mutableListOf<Int>(
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)
val layoutManager: RecyclerView.LayoutManager = StaggeredGridLayoutManager( 2 , StaggeredGridLayoutManager.VERTICAL)
recyclerView.layoutManager = layoutManager
recyclerViewAdapter = RecyclerViewAdapter( this , ImageList)
recyclerView.adapter = recyclerViewAdapter
}
}
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...