Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
  • Staggered Grid Layout with RecyclerView android

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 1.38k
    Comment on it

    This blog is about how to create StaggeredGridLayout with Recycler view in Android.
    Recyler View is advanced version of ListView/GridView.

    Here we start how to Create StaggeredGridLayout with  Recyler View.

    1. Create Project.

    2. Create Activity.

    3. Open Gradle file and add support of RecylerView.

       compile ''

    4. Open activity's xml file and add RecylerView View.

            android:layout_height="wrap_content" />

    5. Create new layout xml file with name:- view_item.xml.

    6. Write below code to view_item class.

    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android=""
            android:adjustViewBounds="true" />

    7. OpenActivity's java class.

    8. Find Recycler View from xml.

    RecyclerView recyclerView = (RecyclerView) findViewById(;

    9. Create new java class with name StaggeredAdapter.

    10 . Create subclass of StaggeredAdapter's with name StaggeredHolder.

    11. Extends StaggeredHolder with RecyclerView.ViewHolder.

     class StaggeredHolder extends RecyclerView.ViewHolder {}

    12. Create Constructor of StaggeredHolder.

    13. Extends StaggeredAdapter with RecyclerView.Adapter<StaggeredAdapter.StaggeredHolder>.

    public class StaggeredAdapter extends RecyclerView.Adapter<StaggeredAdapter.StaggeredHolder> {

    14. Override methods.

    15. Create field array of drawable items and add ids of drawable images.

    int[] drawables = {, R.drawable.two, R.drawable.three, R.drawable.four,, R.drawable.two, R.drawable.three};

    16. Create instance of Layout Inflater under onCreateViewHolder().

    LayoutInflater inflater = LayoutInflater.from(parent.getContext());

    17. Create View instance by inflating item xml file.

    View contactView = inflater.inflate(R.layout.view_item, parent, false);

    18. return new object of StaggeredHolder.

    return new StaggeredHolder(contactView);

    19. In StaggeredHolder add ImageView as field variable.

     ImageView imageview;

    20. In Constructor of StaggeredHolder find imageView's view.

     class StaggeredHolder extends RecyclerView.ViewHolder {
            ImageView imageview;
            public StaggeredHolder(View itemView) {
                imageview = (ImageView) itemView.findViewById(;

    21. set Length to getItemCount().

        public int getItemCount() {
            return drawables.length;

    22. Set Image resource to ImageView under onBindViewHolder().

        public void onBindViewHolder(HorizonHolder holder, int position) {

    23. Under your activity Create StaggeredAdapter's Instance.

    StaggeredAdapter adapter = new StaggeredAdapter();

    24. Create StaggeredGridLayoutManager instance.

     StaggeredGridLayoutManager gridLayoutManager =
                    new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL);

    25. StaggeredGridLayoutManager set RecylerView as a Staggered Grid Layout.

    26. Set StaggeredGridLayoutManager to RecylerView.


    27. set Adapter to RecyclerView.


    output:- image

    Happy Coding :D

 0 Comment(s)

Sign In

Sign up using

Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: