CODEWITHSUNDEEP
androidxmlandroid-recyclerviewandroid-styles
Sun
Sun

Reputation: 6888

Android: Add divider between items in RecyclerView

I am using RecyclerView with rounded corner, to make it rounded corner I used below XML:

view_rounded.xml:-

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#008f8471"/>
    <stroke android:width="2dp" android:color="#ffffff" />
    <corners android:radius="10dp"/>
</shape>

fragment_main.xml:-

<android.support.v7.widget.RecyclerView
    android:id="@+id/recycler_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/view_rounded"/>

adapter_main.xml:-

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

    <TextView
        android:id="@+id/textTitle"
        style="@style/AppTheme.ListTextView"
        />

</LinearLayout>

style.xml:-

<style name="AppTheme.ListTextView" parent="android:Widget.Material.TextView">
  <item name="android:gravity">left</item>
  <item name="android:layout_width">match_parent</item>
  <item name="android:layout_height">wrap_content</item>
  <item name="android:textAllCaps">false</item>
  <item name="android:padding">10dp</item>
  <item name="android:textAppearance">@android:style/TextAppearance.DeviceDefault.Medium</item>
  <item name="android:textColor">@color/tabsScrollColor</item> 
  <item name="android:textStyle">bold</item> 
</style>

Getting (without item separator):

enter image description here

Required (with item separator):

enter image description here

Upvotes: 18

Views: 47110

Answers (16)

Silambarasan Poonguti
Silambarasan Poonguti

Reputation: 9442

Try this

recyclerView.apply {
        ....
        addItemDecoration(DividerItemDecoration(context, DividerItemDecoration.VERTICAL))
    }

Upvotes: 0

Avishkar Ramjeet
Avishkar Ramjeet

Reputation: 51

This line of code worked for me:

recyclerView.addItemDecoration(new DividerItemDecoration(context, DividerItemDecoration.HORIZONTAL));

For vertical line, pass second argument as DividerItemDecoration.VERTICAL.

Upvotes: 1

Tung Vo
Tung Vo

Reputation: 2549

you should try add Divider 

mListview.addItemDecoration(new DividerItemDecoration(this.getActivity(), LinearLayout.VERTICAL));

Upvotes: 11

Hiren Patel
Hiren Patel

Reputation: 52790

I have done this way:

onCreateView() of Fragment:

RecyclerView recyclerView = (RecyclerView) rootView.findViewById(R.id.recyclerView);
recyclerView.addItemDecoration(new SimpleDividerItemDecoration(getActivity()));

SimpleDividerItemDecoration.java:

public class SimpleDividerItemDecoration extends RecyclerView.ItemDecoration {
    private Drawable mDivider;

    public SimpleDividerItemDecoration(Context context) {
        mDivider = context.getResources().getDrawable(R.drawable.recycler_horizontal_divider);
    }

    @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 + mDivider.getIntrinsicHeight();

            mDivider.setBounds(left, top, right, bottom);
            mDivider.draw(c);
        }
    }
}

recycler_horizontal_divider.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <size
        android:width="1dp"
        android:height="1dp" />

    <solid android:color="#2EC590" />

</shape>

Hope this will help you.

Upvotes: 8

Ravi
Ravi

Reputation: 960

Just One Line...

recyclerView.addItemDecoration(new DividerItemDecoration(getActivity(), null));

That's all

Upvotes: 0

Viktor Yakunin
Viktor Yakunin

Reputation: 3266

To add dividers to your recyclerview you need to use decorator - https://gist.github.com/alexfu/0f464fc3742f134ccd1e after you add that to your project add a line recyclerView.addItemDecoration(new DividerItemDecoration(getActivity(), DividerItemDecoration.VERTICAL_LIST));

Upvotes: 1

Sushant
Sushant

Reputation: 1874

Well what I did to achieve this is, I first created layout for my adapter row as 

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/LinearLayout1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">
    <View
    android:id="@+id/lineView"
    android:layout_width="match_parent"
    android:layout_height="2px"
    android:background="@android:color/black"/>
    <TextView
        android:id="@+id/textTitle"
        style="@style/AppTheme.ListTextView"
        />

   </LinearLayout>

Then in my adapter I checked for first row and changed its viewLine Visibility to invisible

@Override
public void onBindViewHolder(ChildInfoViewHolder holder, final int position) {
    if(position == 0){
        holder.viewLine.setVisibility(View.INVISIBLE);
    }
//...
}

public static class MyViewHolder extends RecyclerView.ViewHolder{
    protected View viewLine;
    public ChildInfoViewHolder(View view) {
        super(view);
        viewLine = view.findViewById(R.id.viewLine);
        //... 
    }
}

Upvotes: 1

Riyaz Ahamed
Riyaz Ahamed

Reputation: 802

RecyclerView works different from ListViews. You need to add ItemDecorators for the recycler view. As the docs says,

An ItemDecoration allows the application to add a special drawing and layout offset to specific item views from the adapter's data set. This can be useful for drawing dividers between items, highlights, visual grouping boundaries and more.

Take a look into this link : https://developer.android.com/reference/android/support/v7/widget/RecyclerView.ItemDecoration.html

Upvotes: 2

Rostyslav Roshak
Rostyslav Roshak

Reputation: 16

The problem is because you are setting the background with corners not only to the list view, but also to the item. You should make separate backgrounds for item (with selector) and one for list view with corners.

list_bg.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#008f8471"/>
    <stroke android:width="1dip" android:color="#ffffff" />
    <corners android:radius="10dp"/>
    <padding android:left="0dip" android:top="0dip" android:right="0dip" android:bottom="0dip" />
</shape>

Now you can setup this drawable as the background of your list view.

<ListView
    android:id="@+id/listView"
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:background="@drawable/list_bg.xml"
    android:fastScrollEnabled="true"
    android:choiceMode="singleChoice" />

And for list view item you can use selector to have hover functionality: list_item_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/list_item_selected" android:state_pressed="true"/>
    <item android:drawable="@drawable/list_item_selected" android:state_pressed="false" android:state_selected="true"/>
    <item android:drawable="@android:color/transparent"/>

Where list_item_selected is : list_item_selected.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#4d8f8471"/>
    <stroke android:width="1dip" android:color="#ffffff" />
</shape>

And after that you can setup this selector to the item in your xml:

<TextView
    android:id="@+id/textView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"        
    android:background="@drawable/list_item_selector" />

So your list view will have always same background with corners, and the background of items of list view, will be without corners and will be changed in pressed or selected state.

Upvotes: 0

Irfan Ali
Irfan Ali

Reputation: 1

you are setting list_selector for both textview and listview background. Use list_selector only for listview and if you want hover effect on textview too, then create another list_selector_textview which haven't include the <corners android:radius="10dp" property.

Upvotes: 0

Online98
Online98

Reputation: 89

Try this

custom_rounded_list.xml :

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:startColor="#ff2521"
        android:endColor="#2f5511"
        android:angle="270"/>
    <padding
        android:bottom="5dp"
        android:left="5dp"
        android:right="5dp"
        android:top="5dp" />
    <corners
        android:bottomRightRadius="7dp"
        android:bottomLeftRadius="7dp"
        android:topLeftRadius="7dp"
        android:topRightRadius="7dp" />
</shape>

Your listview:

<ListView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/mylst"
    android:background="@drawable/custom_rounded_list" />

Upvotes: 0

Surender Kumar
Surender Kumar

Reputation: 1123

Use this drawable xml for curve shape listview and set background to your list view or any layout: 

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
           <corners android:radius="6dp" />

            <padding android:bottom="3dp" android:left="3dp" android:right="3dp" android:top="3dp" />
        </shape>

Upvotes: 0

Dominic D&#39;Souza
Dominic D&#39;Souza

Reputation: 981

Modify your ListView like below.Add the list_bg as the background of your ListView Also specify some padding for the top and the bottom of the listView otherwise the 1st and the last item in the list will overlap with the rounded corners showing rectangular corners.

<ListView
    android:id="@+id/listView"
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:background="@drawable/list_bg"
    android:paddingTop="10dp"
    android:paddingBottom="10dp"
    android:fastScrollEnabled="true"
    android:choiceMode="singleChoice" />

Upvotes: 0

SelvaMariappan
SelvaMariappan

Reputation: 1334

Try This From Reference Android: ListView with rounded corners

First off, we need the drawables for the backgrounds of the Lists entries: For the entries in the middle of the list, we don't need rounded corners, so create a xml in your drawable folder "list_entry_middle.xml" with following content:

<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

<item>
  <shape>
        <stroke android:width="1px" android:color="#ffbbbbbb" />
  </shape>
</item>
<item android:bottom="1dp" android:left="1dp" android:right="1dp">
 <shape >
       <solid android:color="#ffffffff" />
 </shape>
</item>
</layer-list>

For the rounded corners, create another xml, "rounded_corner_top.xml":

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

<item>
  <shape>
        <stroke android:width="1dp" android:color="#ffbbbbbb" />
        <corners android:topLeftRadius="20dp"
    android:topRightRadius="20dp"
     />
  </shape>
</item>
<item android:top="1dp" android:left="1dp" android:right="1dp" android:bottom="1dp">
 <shape >
       <solid android:color="#ffffffff" />
      <corners android:topLeftRadius="20dp"
    android:topRightRadius="20dp"
     />
 </shape>
 </item>

 </layer-list>

Implementing the bottom part is quite the same, just with bottomLeftRadius and bottomRightRadius. (maybe also create one with all corners rounded, if the list only has one entry) For better usability, also provide drawables with other colors for the different states, that the list item can have and reference them in another xml in the drawable folder ("selector_rounded_corner_top.xml") as followed:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/rounded_corner_top_click"
      android:state_pressed="true" />
    <item android:drawable="@drawable/rounded_corner_top_click"
      android:state_focused="true" />
    <item android:drawable="@drawable/rounded_corner_top" />
</selector>

Now do the same for the other backgrounds of the list. All that is left now, is to assign the right backgrounds in our ListAdapter like following:

@Override
public View getView(int position, View convertView, ViewGroup parent) {
    //...      
    //skipping the view reuse stuff

   if (position == 0 && entry_list.size() == 1) {
            view.setBackgroundResource(R.drawable.selector_rounded_corner);
        } else if (position == 0) {
            view.setBackgroundResource(R.drawable.selector_rounded_corner_top);
        } else if (position == entry_list.size() - 1) {
            view.setBackgroundResource(R.drawable.selector_rounded_corner_bottom);
        } else {
            view.setBackgroundResource(R.drawable.selector_middle);
        }

       //...
       //skipping the filling of the view
   }

Upvotes: 0

NickF
NickF

Reputation: 5737

Try this one: A very nice solution by Michel-F. Portzert

public class ClippedListView extends ListView {

    public ClippedListView(Context context) {
        super(context);
    }

    public ClippedListView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
        protected void dispatchDraw(Canvas canvas) {
        float radius = 10.0f;
        Path clipPath = new Path();
        RectF rect = new RectF(0, 0, this.getWidth(), this.getHeight());
        clipPath.addRoundRect(rect, radius, radius, Path.Direction.CW);
        canvas.clipPath(clipPath);
        super.dispatchDraw(canvas);
    }
}

Upvotes: 0

vs.thaakur
vs.thaakur

Reputation: 619

Set the selector at the background of the list item in your layout if you are using custom adapter

Upvotes: 0

Related Questions