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

      ecommerce sales
      As an e-commerce marketer, you are always looking for new ways in which you can drive traffic to your e-commerce site and boost...
      decoupled
      The relationship between content and code is not a healthy one anymore. The consumer-facing presentation layer is not as removed...
      On September 6th the Drupal team shipped Drupal 8.6.0, a huge update to the Drupal project. Packed with powerful features shipped...

      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

      ×