Android Tutorials - Recyclerview and its On Item click listener - Part 2

  • By :Subba Raju
  • Date : 20-02-2017

In our previous blog, we discussed how to create recyclerview and its on item click listener for a vertical scroll.

Now Let us talk about Horizontal scroll and Grid layout in RecyclerView

RecyclerView(Horizontal Scroll):

In order to change Vertical Scroll to Horizontal scroll, make alterations in Activity or Fragment.

final LinearLayoutManager linearLayoutManager = new LinearLayoutManager(this,
   LinearLayoutManager.HORIZONTAL, false);

Also, change the XML based on your requirement.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android=""
          android:src="@mipmap/ic_launcher" />

Here is how the preview looks like

To achieve recyclerview

    There is no need to change the entire code as this will run successfully when you run the app, after making minor alterations.

    To achieve recyclerview

    RecyclerView(Grid View):

    If we want Recyclerview as Grid make the following changes in the code

    final GridLayoutManager linearLayoutManager = new GridLayoutManager(this,2);

    In the Gridlayout manager parameter, pass context and the count of columns required for the grid.

    To achieve recyclerview

      Item Decorator:

      Make use of an Item Decorator to draw dividers and boundaries in between Gridview. For that we should create a class which extends RecyclerView.ItemDecoration

      Also, pass the parameters for grid spacing, grid size(column count)

      final GridLayoutManager gridLayoutManager = new GridLayoutManager(this,2);
      mainRecyclerView.addItemDecoration(new ItemDecorationColumns(2,2));

      ItemDecorationColumns Class:

      public class ItemDecorationColumns extends RecyclerView.ItemDecoration {
        private int mSizeGridSpacingPx;
        private int mGridSize;
        private boolean mNeedLeftSpacing = false;
        public ItemDecorationColumns(int gridSpacingPx, int gridSize) {
            mSizeGridSpacingPx = gridSpacingPx;
            mGridSize = gridSize;
        public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
            int frameWidth = (int) ((parent.getWidth() - (float) mSizeGridSpacingPx * (mGridSize - 1)) / mGridSize);
            int padding = parent.getWidth() / mGridSize - frameWidth;
            int itemPosition = ((RecyclerView.LayoutParams) view.getLayoutParams()).getViewAdapterPosition();
            if (itemPosition < mGridSize) {
       = 0;
            } else {
       = mSizeGridSpacingPx;
            if (itemPosition % mGridSize == 0) {
                outRect.left = 0;
                outRect.right = padding;
                mNeedLeftSpacing = true;
            } else if ((itemPosition + 1) % mGridSize == 0) {
                mNeedLeftSpacing = false;
                outRect.right = 0;
                outRect.left = padding;
            } else if (mNeedLeftSpacing) {
                mNeedLeftSpacing = false;
                outRect.left = mSizeGridSpacingPx - padding;
                if ((itemPosition + 2) % mGridSize == 0) {
                    outRect.right = mSizeGridSpacingPx - padding;
                } else {
                    outRect.right = mSizeGridSpacingPx / 2;
            } else if ((itemPosition + 2) % mGridSize == 0) {
                mNeedLeftSpacing = false;
                outRect.left = mSizeGridSpacingPx / 2;
                outRect.right = mSizeGridSpacingPx - padding;
            } else {
                mNeedLeftSpacing = false;
                outRect.left = mSizeGridSpacingPx / 2;
                outRect.right = mSizeGridSpacingPx / 2;
            outRect.bottom = 0;

      Run the app:

      To achieve recyclerview

      Subscribe For Our Newsletter And Stay Updated

      Recent blogs

      Drupal lightning
      Drupal 8 gives developers and content authors full flexibility to shape their websites and applications that meets their vision. It...
      Artificial Intelligence
      Over the years, AI has been instrumental in personalizing user experience and this is one of the prime reasons why brands are...
      adobe aem analytics
      Take a moment and think about all the different ways a potential customer interacts with your brand. He might hear about you from a...

      This website uses cookies to offer you an enhanced website experience. We collect information about how you interact with our website to provide personalized services to you. To find out more, see our Privacy Policy