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="http://schemas.android.com/apk/res/android"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:orientation="horizontal">
  <LinearLayout
      android:id="@+id/row_main_adapter_linear_layout"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_margin="5dp"
      android:orientation="vertical">
      <ImageView
          android:id="@+id/row_main_adapter_iv"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:scaleType="center"
          android:contentDescription="@null"
          android:src="@mipmap/ic_launcher" />
      <TextView
          android:id="@+id/row_main_adapter_tv"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_gravity="center"
          android:gravity="center"
          android:layout_marginTop="10dp"
          android:text="Hello"
          android:textColor="@color/colorPrimary"
          android:textSize="14sp"/>
  </LinearLayout>
  <View
      android:layout_width="0.6dp"
      android:layout_height="match_parent"
      android:layout_marginStart="5dp"
      android:background="@color/colorPrimary"/>
</LinearLayout>

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.setLayoutManager(gridLayoutManager);
      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;
        }
        @Override
        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) {
                outRect.top = 0;
            } else {
                outRect.top = 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

      Tell us your requirements

      CONTACT US

      Recent blogs

      Drupal for Media Industry
      The high demand for creating a seamless digital experience across numerous devices and channels has challenged the classic approach...
      Drupal & Front-end framework
      Today's world is a close reality to something I dreamt of as a child. A world run by devices, the technology they use and...
      iOS tutorial
      A recent survey reported that, out of several thousand consumers surveyed, more than 70% of them said that these push notifications...