How to remove this padding in Recyclerview?

Question

CODE :

private void configViews(View view) {
    int spanCount = 3; // 3 columns
    int spacing = 3;
    boolean includeEdge = true;
    mRecyclerView = (RecyclerView) view.findViewById(R.id.rv_flower_red);
    mRecyclerView.addItemDecoration(new GridSpacingItemDecoration(spanCount, spacing, includeEdge));
    mRecyclerView.setHasFixedSize(true);
    mRecyclerView.setRecycledViewPool(new RecyclerView.RecycledViewPool());
    mRecyclerView.setLayoutManager(new GridLayoutManager(getActivity().getApplicationContext(), spanCount));
    mFlowerAdapter = new FlowerAdapter_grid(this);
    mRecyclerView.setAdapter(mFlowerAdapter);
}

public class GridSpacingItemDecoration extends RecyclerView.ItemDecoration {

    private int spanCount;
    private int spacing;
    private boolean includeEdge;

    public GridSpacingItemDecoration(int spanCount, int spacing, boolean includeEdge) {
        this.spanCount = spanCount;
        this.spacing = spacing;
        this.includeEdge = includeEdge;
    }

    @Override
    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
        int position = parent.getChildAdapterPosition(view); // item position
        int column = position % spanCount; // item column

        if (includeEdge) {
            outRect.left = spacing - column * spacing / spanCount; // spacing - column * ((1f / spanCount) * spacing)
            outRect.right = (column + 1) * spacing / spanCount; // (column + 1) * ((1f / spanCount) * spacing)

            if (position < spanCount) { // top edge
                outRect.top = spacing;
            }
            outRect.bottom = spacing; // item bottom
        } else {
            outRect.left = column * spacing / spanCount; // column * ((1f / spanCount) * spacing)
            outRect.right = spacing - (column + 1) * spacing / spanCount; // spacing - (column + 1) * ((1f /    spanCount) * spacing)
            if (position >= spanCount) {
                outRect.top = spacing; // item top
            }
        }
    }
}

The core of that CODE is from https://stackoverflow.com/a/30701422/6736285

But when i use that code,

Gridlayout has padding on image's top or bottom.

As you see, there are too much vertical padding.

Question : How do i remove that padding? Please Would you let me know answer?

Here is my FlowerAdapter_grid:

public class FlowerAdapter_grid extends RecyclerView.Adapter<FlowerAdapter_grid.Holder> {

    private static final Object TAG = FlowerAdapter_grid.class.getSimpleName();
    private final FlowerClickListener mListener;
    private List<Flower> mFlowers;
    public FlowerAdapter_grid(FlowerClickListener listener) {
        mFlowers = new ArrayList<>();
        mListener = listener;
    }
    @Override
    public Holder onCreateViewHolder(ViewGroup parent, int viewType) {
        View row = LayoutInflater.from(parent.getContext()).inflate(R.layout.row_item_grid, null, false);
        return new Holder(row);
    }
    @Override
    public void onBindViewHolder(Holder holder, int position) {
        Flower currFlower = mFlowers.get(position);
        Glide.with(holder.itemView.getContext())
                .load(currFlower.getImage())
                .thumbnail(0.5f)
                .override(300, 300)
                .centerCrop()
                .into(holder.mImage);
    }

    @Override
    public int getItemCount() {
        return mFlowers.size();
    }

    public void addFlower(Flower flower) {
        mFlowers.add(flower);
        notifyDataSetChanged();
    }
    public void clear(){
        mFlowers.clear();
        notifyDataSetChanged();
    }

    public Flower getSelectedFlower(int position) {
        return mFlowers.get(position);
    }

    public class Holder extends RecyclerView.ViewHolder implements View.OnClickListener {
        private ImageView mImage;
        public Holder(View itemView) {
            super(itemView);
            mImage = (ImageView) itemView.findViewById(R.id.iv_photo);
            itemView.setOnClickListener(this);
        }
        @Override
        public void onClick(View view) {
            mListener.onClick(getLayoutPosition());
        }
    }

    public interface FlowerClickListener {
        void onClick(int position);
    }
}

and

row_item_grid

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/iv_photo"
        />
</LinearLayout>

and My fragment layout

<android.support.v4.widget.SwipeRefreshLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/swipeContainer_red"
    >
    <android.support.v7.widget.RecyclerView
        android:id="@+id/rv_flower_red"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scrollbars="none">
    </android.support.v7.widget.RecyclerView>
</android.support.v4.widget.SwipeRefreshLayout>

After trying, it returned this. What was problem?

Please try modifying the `spacing` as @PriyankPatel suggested — Ishita Sinha, Sep 24 '16 at 10:29
@PriyankPatel, I added. but sorry, i really don't know what is problem — H.fate, Sep 24 '16 at 10:35

score 4 · Accepted Answer · answered Sep 24 '16 at 10:46

I too faced this issue when I started working with recycler view.

Issue is the you are setting the grid as vertical scrolling grid and setting the row count to 3.

So it resizes your row_item_grid layout to fit 3 items in a row. So the issue here is you have used match parent for the height parent LinearLayout in the same Layout. but the image is 300dpx300dp which is at the center of the LinearLayout.

So that extra padding is because of your LinearLayout. Instead you can simple have

row_item_grid.xml

<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/iv_photo"
        />

Honestly you dont need parent layouts when your view consists of single layout. I didnt check your itemDecoration code though, for my knowledege, you wont even need it for vertical spacing if you follow these steps

How to remove this padding in Recyclerview?

1 Answers1