recyclerview is not fit for all screen sizes

Question

I am using recylerview and gridlayout manager with cardviews for each row, my row view(childview) is not responsive at all.

I want to show 15 cardviews in such a way that in portrait mode all my 15 childview should be visible and my recyclerview should not be scrollable whereas in landscape mode it should act vise versa( should be scrollable)

I have tried many soultions suggested on SO but nothing seems to be working.

current behaviour on different screen sizes are as follows

In the above attached screen shot ,the 3rd column, 4th and 5th row are not visible

In the above given screen my ui fits perfectly in portrait mode but in landscape i can't see all the cardviews.

in the screenshot attached above ,5th row is not visible and in the landscape mode there are some responsivness errors. cardview.xml

<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:cardview="http://schemas.android.com/apk/res-auto"
    android:layout_width="127dp"
    android:layout_height="118dp"
    android:layout_margin="5dp"
    cardview:cardCornerRadius="4dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <ImageView
                android:id="@+id/mReminder_Image_Id"
                android:layout_width="match_parent"
                android:layout_height="90dp"
                android:scaleType="fitXY"
                android:background="#ffffff"/>
            <TextView
                android:id="@+id/mReminder_Text_Id"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center"
                android:textColor="#2d2d2d"
                android:textSize="13sp"
                android:text="Reminder texts"/>
        </LinearLayout>
</android.support.v7.widget.CardView>

fragment_reminders.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".Fragments.Reminders">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="@color/colorPrimary"
        app:layout_scrollFlags="scroll|enterAlways"
        app:popupTheme="@style/AppTheme.PopupOverlay">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Reminders"
            android:textSize="20dp"
            android:textStyle="bold"
            android:textColor="@color/tab_background"
            android:layout_gravity="center" />
    </android.support.v7.widget.Toolbar>

    <android.support.v7.widget.RecyclerView
        android:id="@+id/mRecyclerView_id"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </android.support.v7.widget.RecyclerView>

</LinearLayout>

Can anyone guide me to solve this . Thanks .

Answer 1

you can use this:

recyclerView.setLayoutManager(new RecyclerView.GridLayoutManager(this, span_count)

You could have a res/values/ints.xml file with <integer> elements, giving the integer a name (name attribute) and value (text of the <integer> node). You could also have res/values-w600dp/ints.xml or res/values-land or other variations of the resource, where you provide different values to use for different screen sizes. Then, at runtime, call getResources().getInteger() to retrieve the correct value of the resource to use for the current device, and use that in your GridLayoutManager constructor. Now, you are in control over how many columns there are, by controlling how many spans are supplied to the constructor.

https://developer.android.com/training/multiscreen/screensizes

Another approach, suggested by Chiu-Ki Chan , is to create a subclass of RecyclerView, on which you provide a custom attribute for a desired approximate column width. Then, in your subclass' onMeasure() method, you can calculate the number of spans to use to give you the desired column width.

https://developer.android.com/reference/android/support/v7/widget/GridLayoutManager.html#GridLayoutManager(android.content.Context,%20int)

https://developer.android.com/reference/android/support/v7/widget/RecyclerView#setlayoutmanager

Answer 2

create a class as follows:

    import android.graphics.Rect;
    import android.support.v7.widget.GridLayoutManager;
    import android.support.v7.widget.RecyclerView;
    import android.view.View;

    public class EqualSpacingItemDecoration extends RecyclerView.ItemDecoration {
      private final int spacing;
      private int displayMode;

      public static final int HORIZONTAL = 0;
      public static final int VERTICAL = 1;
      public static final int GRID = 2;

      public EqualSpacingItemDecoration(int spacing) {
        this(spacing, -1);
      }

      public EqualSpacingItemDecoration(int spacing, int displayMode) {
        this.spacing = spacing;
        this.displayMode = displayMode;
      }

      @Override
      public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
        int position = parent.getChildViewHolder(view).getAdapterPosition();
        int itemCount = state.getItemCount();
        RecyclerView.LayoutManager layoutManager = parent.getLayoutManager();
        setSpacingForDirection(outRect, layoutManager, position, itemCount);
      }

      private void setSpacingForDirection(Rect outRect,
                                          RecyclerView.LayoutManager layoutManager,
                                          int position,
                                          int itemCount) {

        // Resolve display mode automatically
        if (displayMode == -1) {
          displayMode = resolveDisplayMode(layoutManager);
        }

        switch (displayMode) {
          case HORIZONTAL:
            outRect.left = spacing;
            outRect.right = position == itemCount - 1 ? spacing : 0;
            outRect.top = spacing;
            outRect.bottom = spacing;
            break;
          case VERTICAL:
            outRect.left = spacing;
            outRect.right = spacing;
            outRect.top = spacing;
            outRect.bottom = position == itemCount - 1 ? spacing : 0;
            break;
          case GRID:
            if (layoutManager instanceof GridLayoutManager) {
              GridLayoutManager gridLayoutManager = (GridLayoutManager) layoutManager;
              int cols = gridLayoutManager.getSpanCount();
              int rows = itemCount / cols;

              outRect.left = spacing;
              outRect.right = position % cols == cols - 1 ? spacing : 0;
              outRect.top = spacing;
              outRect.bottom = position / cols == rows - 1 ? spacing : 0;
            }
            break;
        }
      }

      private int resolveDisplayMode(RecyclerView.LayoutManager layoutManager) {
        if (layoutManager instanceof GridLayoutManager) return GRID;
        if (layoutManager.canScrollHorizontally()) return HORIZONTAL;
        return VERTICAL;
      }
    }

and for using it with your recycler view:

1)for grid view:

recyclerView.addItemDecoration(new EqualSpacingItemDecoration(<sizeofpixels>, EqualSpacingItemDecoration.GRID));

2)for vertical view:

recyclerView.addItemDecoration(new EqualSpacingItemDecoration(<sizeofpixels>, EqualSpacingItemDecoration.VERTICAL));

3)for horizontal view: recyclerView.addItemDecoration(new EqualSpacingItemDecoration(<sizeofpixels>, EqualSpacingItemDecoration.HORIZONTAL));

hope this helps you.