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

      Subscribe For Our Newsletter And Stay Updated

      Recent blogs

      thunder for drupal
      Digital evolution has taken the world of professional publishing by storm. However, this evolution brought along a whole new set of...
      higher education
      Over the past 2 decades, the advancements in technology have been tremendous and these changes have played a major role in allowing...
      DrupalCamp 2018
      “Everyone you will ever meet knows something you don’t” - said Bill Nye popularly known as The Science Guy, who (coincidentally)...

      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

      ×