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.36k
    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 'com.android.support:recyclerview-v7:24.0.0'

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

        <android.support.v7.widget.RecyclerView
            android:id="@+id/recycler"
            android:layout_width="match_parent"
            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="http://schemas.android.com/apk/res/android"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
    
        <ImageView
            android:id="@+id/iv_item"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:scaleType="centerInside"
            android:adjustViewBounds="true" />
    
    </RelativeLayout>

    7. OpenActivity's java class.

    8. Find Recycler View from xml.

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

    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.one, R.drawable.two, R.drawable.three, R.drawable.four, R.drawable.one, 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) {
                super(itemView);
                imageview = (ImageView) itemView.findViewById(R.id.iv_item);
            }
        }

    21. set Length to getItemCount().

      @Override
        public int getItemCount() {
            return drawables.length;
        }

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

      @Override
        public void onBindViewHolder(HorizonHolder holder, int position) {
    
            holder.imageview.setImageResource(drawables[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.

    recyclerView.setLayoutManager(gridLayoutManager);

    27. set Adapter to RecyclerView.

     recyclerView.setAdapter(adapter);

    output:- image

    Happy Coding :D

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
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: