How to add dividers and spaces between items in RecyclerView in Android

In this android programming code example, we are going the explore how to add dividers and spaces between items in RecyclerView in android.

Steps

  1. Add a RecyclerView widget in the XML layout file.
  2. Get the instance of the RecyclerView.
  3. Create a String ArrayList and populate it with data.
  4. Add a LinearLayoutManager.
  5. Create a custom CustomDividerItemDecoration class that extends RecyclerView ItemDecorator.
  6. Use the RecyclerView addItemDecoration()method to add the custom ItemDecorator.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

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

</RelativeLayout>

MainActivity.java

public class RecyclerViewActivity1 extends AppCompatActivity {
    private RecyclerView list;
    private adapter recyclerAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_recycler_view1);
        list = (RecyclerView) findViewById(R.id.list);

        //Data
        ArrayList<String> country = new ArrayList<>();
        country.add("Nigeria");
        country.add("China");
        country.add("USA");
        country.add("Ghana");
        country.add("Canada");
        country.add("Finland");
        country.add("Denmark");
        country.add("Argentina");
        country.add("Andorra");
        country.add("Togo");

        LinearLayoutManager layoutManager = new LinearLayoutManager(this);
        list.setLayoutManager(layoutManager);
        recyclerAdapter = new adapter(RecyclerViewActivity1.this, country);
        list.addItemDecoration(new CustomDividerItemDecoration(RecyclerViewActivity1.this));
        list.setAdapter(recyclerAdapter);

    }

    private class CustomDividerItemDecoration extends RecyclerView.ItemDecoration{
        private Drawable drawableline;
        private CustomDividerItemDecoration(Context context){
            drawableline = ContextCompat.getDrawable(context, R.drawable.recyclerline);
        }
        @Override
        public void onDrawOver(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 + drawableline.getIntrinsicHeight();
                drawableline.setBounds(left, top, right, bottom);
                drawableline.draw(c);
            }
        }

    }

    private class adapter extends RecyclerView.Adapter<adapter.myViewHolder> {
        Context context;
        List<String> mData;

        public adapter(Context context, List<String> data) {
            this.context = context;
            this.mData = data;
        }

        @Override
        public adapter.myViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
            View view = LayoutInflater.from(context).inflate(R.layout.recyclerview_adapter1, parent, false);
            return new myViewHolder(view);
        }

        @Override
        public void onBindViewHolder(adapter.myViewHolder holder, int position) {
            holder.country.setText(mData.get(position));
        }

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

        public class myViewHolder extends RecyclerView.ViewHolder {
            TextView country;

            public myViewHolder(View itemView) {
                super(itemView);
                country = (TextView) itemView.findViewById(R.id.country);
            }
        }
    }
}

If you have any questions or suggestions kindly use the comment box or you can contact us directly through our contact page below.

 

Add a Comment