22 May 2024 Leave a comment Tech-Help
When working with RecyclerView in Android, you might want to add dividers and spaces between items to enhance the UI. Unlike ListView, RecyclerView doesn’t have built-in properties for dividers. However, you can achieve this functionality using RecyclerView.ItemDecoration. This guide provides a practical approach to adding dividers and spaces.
Using DividerItemDecoration
The Android Support Library introduced the DividerItemDecoration class, which simplifies adding dividers between items in a RecyclerView with a LinearLayoutManager. It supports both horizontal and vertical orientations.
Basic Usage
To use DividerItemDecoration, follow these steps:
DividerItemDecoration dividerItemDecoration = new DividerItemDecoration(recyclerView.getContext(),
layoutManager.getOrientation());
recyclerView.addItemDecoration(dividerItemDecoration);
Customizing the Divider
If you want to customize the divider, you can use a custom drawable:
DividerItemDecoration itemDecorator = new DividerItemDecoration(getContext(), DividerItemDecoration.VERTICAL);
itemDecorator.setDrawable(ContextCompat.getDrawable(getContext(), R.drawable.divider));
recyclerView.addItemDecoration(itemDecorator);
You can define your custom drawable in the res/drawable folder. For example, create a file named divider.xml:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<size android:height="1dp" />
<solid android:color="#ff992900" />
</shape>
Creating Custom ItemDecoration
If you need more control over the spacing and dividers, you can create a custom ItemDecoration. Below is an example of a custom ItemDecoration class for adding vertical space between items:
public class VerticalSpaceItemDecoration extends RecyclerView.ItemDecoration {
private final int verticalSpaceHeight;
public VerticalSpaceItemDecoration(int verticalSpaceHeight) {
this.verticalSpaceHeight = verticalSpaceHeight;
}
@Override
public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
if (parent.getChildAdapterPosition(view) != parent.getAdapter().getItemCount() - 1) {
outRect.bottom = verticalSpaceHeight;
}
}
}
To use this custom ItemDecoration, add it to your RecyclerView in your fragment or activity:
recyclerView.addItemDecoration(new VerticalSpaceItemDecoration(48));
Advanced Customization
For advanced customization, you can override the onDraw and onDrawOver methods of ItemDecoration to draw custom dividers:
public class DividerItemDecoration extends RecyclerView.ItemDecoration {
private Drawable divider;
public DividerItemDecoration(Context context, int resId) {
divider = ContextCompat.getDrawable(context, resId);
}
@Override
public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {
int left = parent.getPaddingLeft();
int right = parent.getWidth() - parent.getPaddingRight();
int childCount = parent.getChildCount();
for (int i = 0; i < childCount; i++) {
View child = parent.getChildAt(i);
RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child.getLayoutParams();
int top = child.getBottom() + params.bottomMargin;
int bottom = top + divider.getIntrinsicHeight();
divider.setBounds(left, top, right, bottom);
divider.draw(c);
}
}
}
Conclusion
Adding dividers and spaces in a RecyclerView can significantly improve the user interface of your app. Whether you use the built-in DividerItemDecoration or create a custom ItemDecoration, you have the flexibility to achieve the desired look and feel.
Enhance Your Mobile Development with Repeato
While working on enhancing your app’s UI, consider using Repeato, a no-code test automation tool for iOS and Android. Repeato allows you to create, run, and maintain automated tests effortlessly. It’s particularly useful for mobile developers, enabling them to focus on creating a great product rather than spending time on test maintenance. Repeato’s computer vision and AI capabilities make it easy to forward test automation tasks to non-technical colleagues or QAs, ensuring a smooth and efficient development process.
