How to set border for android recyclerview grid layout.

Question

I want a view that looks like this , a border without spacing between items.

Currently my view looks like this, i am using a recyclerview with card view layout.

below is my code for each individual item

single_item_homepage xml:

<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="95dp"
android:layout_height="95dp"
android:layout_margin="8dp"
>

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

    <ImageView
        android:id="@+id/imageViewCategory"
        android:layout_width="match_parent"
        android:layout_height="75dp"
        />

    <TextView
        android:text="Shirt"
        android:id="@+id/textViewCategory"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:textSize="15sp"/>


    </LinearLayout>

</android.support.v7.widget.CardView>

HomePage activity:

public class HomepageActivity extends AppCompatActivity {


private RecyclerView recyclerView;
private ImageAdapter imageAdapter;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_homepage);

    recyclerView = findViewById(R.id.recyclerView);
    imageAdapter = new ImageAdapter(this);

    recyclerView.setHasFixedSize(true);
    recyclerView.setLayoutManager(new GridLayoutManager(HomepageActivity.this,3));
    recyclerView.setAdapter(imageAdapter);

    }
}

this is my adapter class:

public class ImageAdapter extends RecyclerView.Adapter<ImageAdapter.ImageViewHolder> {


private Context context;

public ImageAdapter(Context context) {
    this.context = context;
}

private int[] resourceId = new int[] {R.drawable.shirt,R.drawable.sleeveless,R.drawable.outerwear,
        R.drawable.sweater,R.drawable.pants,R.drawable.shorts,R.drawable.skirt,R.drawable.dresses,
        R.drawable.shoes,R.drawable.bags,R.drawable.accessories,R.drawable.swimwear
};

private String[] names = new String[]{
        "Shirts","Sleevless","Outerwear","Sweater","Pants","Shorts","Skirts","Dresses","Shoes","Bags","Accessories","Swimwear"
};



@NonNull
@Override
public ImageAdapter.ImageViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
    View v = LayoutInflater.from(context).inflate(R.layout.single_item_homepage,parent,false);
    return new ImageViewHolder(v);
}

@Override
public void onBindViewHolder(@NonNull ImageAdapter.ImageViewHolder holder, int position) {
    String currName = names[position];
    int currResource = resourceId[position];
    holder.categoryName.setText(currName);
    holder.categoryImage.setImageResource(currResource);

}

@Override
public int getItemCount() {
    return names.length;
}

class ImageViewHolder extends RecyclerView.ViewHolder {

    TextView categoryName;
    ImageView categoryImage;


    public ImageViewHolder(View itemView) {
        super(itemView);

        categoryName = itemView.findViewById(R.id.textViewCategory);
        categoryImage = itemView.findViewById(R.id.imageViewCategory);
        }
    }
}

is there a way to change the recyclerview border ? Thanks in advance :)

remove CardView and add this to your recyclerView `recyclerView.addItemDecoration(new DividerItemDecoration(this, DividerItemDecoration.HORIZONTAL)) recyclerView.addItemDecoration(new DividerItemDecoration(this, DividerItemDecoration.VERTICAL))` — Maddy, Jun 28 '18 at 05:17
first remove cardview margin and than show below link may be help you https://stackoverflow.com/questions/31242812/how-can-a-divider-line-be-added-in-an-android-recyclerview — Payal Sorathiya, Jun 28 '18 at 05:18
@Maddy if card view is removed what layout do you replace it with? — calveeen, Jun 28 '18 at 06:12

Maddy · Accepted Answer · 2018-11-16T04:40:47.133

14

HomepageActivity.java

recyclerView = findViewById(R.id.recyclerView);
imageAdapter = new ImageAdapter(this);

recyclerView.setHasFixedSize(true);
recyclerView.addItemDecoration(new DividerItemDecoration(this,
                DividerItemDecoration.HORIZONTAL))
recyclerView.addItemDecoration(new DividerItemDecoration(this,
                DividerItemDecoration.VERTICAL))
recyclerView.setLayoutManager(new GridLayoutManager(HomepageActivity.this,2));
recyclerView.setAdapter(imageAdapter);

single_item_homepage.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:foreground="?android:selectableItemBackground"
    android:orientation="vertical"
    android:padding="@dimen/fifteen_dp">

    <ImageView
        android:id="@+id/ivGraphItemThumb"
        android:layout_width="match_parent"
        android:layout_height="125dp"
        tools:src="@drawable/ic_recent_exce" />

    <TextView
        android:id="@+id/tvMenu"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:textColor="@color/black"
        android:textSize="@dimen/fifteen_sp"
        tools:text="Item 1" />
</LinearLayout>

edited Nov 16 '18 at 04:40

answered Jun 28 '18 at 07:16

Maddy

4,525
4
33
53

1

Thank you :) this was the most helpful answer – calveeen Jun 28 '18 at 16:02
may i ask what the padding does for the linear layout? there were extra borders when i didnt add them – calveeen Jun 28 '18 at 16:03
1

@calveeen 1) padding is only for design purpose you can change/remove this as per your need 2) Border is showing because I have added DividerItemDecoration in verticle and horizontal both, Please upvote if it helps. – Maddy Jun 29 '18 at 06:44
5

rightmost gride line looks weird, is there any way to avoid drawing grid line for last column? @Maddy – Mihir Patel Oct 11 '18 at 13:57
@Maddy Is there any way to create layout with full around border? Each item should be closed with border. – Navas pk Aug 27 '19 at 01:17
1

@Navaspk do you mean like a box? – Maddy Aug 27 '19 at 04:13

Priyank Patel · Answer 2 · 2018-06-29T05:08:41.393

Add below code to set divider line for GridLayoutManager of RecylcerView.

recyclerView.addItemDecoration(new GridLayoutItemDecoration(2));

Use below GridLayoutItemDecoration class.

public class GridLayoutItemDecoration extends RecyclerView.ItemDecoration {
    private int space;

    public GridLayoutItemDecoration(int space) {
        this.space = space;
    }

    @Override
    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
        int position = parent.getChildLayoutPosition(view);

        /// Only for GridLayoutManager 
        GridLayoutManager manager = (GridLayoutManager) parent.getLayoutManager();

        if (parent.getChildLayoutPosition(view) < manager.getSpanCount())
            outRect.top = space;

        if (position % 2 != 0) {
            outRect.right = space;
        }

        outRect.left = space;
        outRect.bottom = space;
    }
}

Remove CardView and margin of root layout and set background color (white in your case) from the single_item_homepage xml.

Set background color (gray in your case) of RecyclerView which will be display as color of divider line.

So i use a linear layout for the root layout be for the single_item_homepage xml ? — calveeen, Jun 28 '18 at 07:01
Yes, you can use any linear or relative as per your design requirement. — Priyank Patel, Jun 28 '18 at 07:03

veeyikpong · Answer 3 · 2019-04-26T11:38:11.250

If you used childCount-1 in drawVertical and drawHorizontal in DividerItemDecoration, it won't work for GridLayoutManager.

I've modified DividerItemDecoration class, adding support for GridLayoutManager with just inner dividers. It can also supports the normal LinearLayoutManager.

You can try it out.

MiddleDividerItemDecoration

https://gist.github.com/Veeyikpong/a376c6128e603b0dee316670a74b345b

How to use?

GridLayoutManager

//MiddleDivideritemDecoration.ALL means both vertical and horizontal dividers
//You can also use MiddleDividerItemDecoration.VERTICAL / MiddleDividerItemDecoration.HORIZONTAL if you just want horizontal / vertical dividers
recyclerView.addItemDecoration(MiddleDividerItemDecoration(context!!, MiddleDividerItemDecoration.ALL))
recyclerView.layoutManager = GridLayoutManager(context!!, 3)
recyclerView.adapter = customAdapter

For complete usage, you can refer to https://gist.github.com/Veeyikpong/a376c6128e603b0dee316670a74b345b#gistcomment-2897799

EDITED: This will only worked for transparent background.

Does this work to support outer borders, like a box around each item? — Sampson, Aug 09 '21 at 15:10

How to set border for android recyclerview grid layout.

3 Answers3