Android Gridview Row Dividers/Separators

android gridview row dividers / separators

I ended up creating a custom gridview, something like this:

https://stackoverflow.com/a/9757501/1310343

using a background image that is exactly as high as one item in my gridview, and has a devider at the bottom.

Works like a charm!

Android GridView draw dividers

Unfortunately, after looking at the source code, I could not see any easy way to add borders other than taking the approach of adding borders to the each cell. As a reference, I will post my solution here.

list_item.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="horizontal"
    android:background="@drawable/list_selector">

    <!-- Cell contents -->

</LinearLayout>

list_selector.xml

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

item_border.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid 
        android:color="@android:color/transparent" 
    />
    <stroke 
        android:width="1px" 
        android:color="@color/list_divider" 
    />
</shape>

item_border_selected.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid 
        android:color="@color/list_select" 
    />
    <stroke 
        android:width="1px" 
        android:color="@color/list_divider" 
    />
</shape>

items_view.xml

<?xml version="1.0" encoding="utf-8"?>
<GridView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_marginLeft="-1px"
    android:layout_marginRight="-1px"
    android:listSelector="@android:color/transparent"
/>

Since all lines double in size as they join their neighboring cells, I made the divider size 1px instead of 1dp so it doesn't appear too large on some screens. Also, I made the grid view have negative margins to hide the lines on either side. I hope this helps someone.

How to set divider in gridview

public class Best_Product extends BaseAdapter {
    View gridView;
    private Context context;

    private ArrayList<HashMap<String, String>> MyArr = new ArrayList<HashMap<String, String>>();
    Function_List fun_lib = new Function_List();
    public Best_Product(Context c,ArrayList<HashMap<String, String>> json_value) {
        // TODO Auto-generated method stub
        context = c;
        MyArr = json_value;
    }

    public int getCount() {
        // TODO Auto-generated method stub
        int total_size = MyArr.size();
        Log.d("size of item", "" + MyArr.size());
            if((MyArr.size()%2)==0)
            {
                // do nothing 
            }
            else
            {
                total_size = MyArr.size()+1;
            }

        return total_size;
    }

    public Object getItem(int position) {
        // TODO Auto-generated method stub
        return position;
    }

    public long getItemId(int position) {
        // TODO Auto-generated method stub
        HashMap<String, String> mapAtPostion = MyArr.get(position);
        return Long.valueOf(MyArr.get(position).get("product_id"));

    }

    public View getView(int position, View convertView, ViewGroup parent) {

        View view = convertView;
        RelativeLayout background_color; // this will be the Relativelayout of the content of GridView. you will be set backgroud color of last item 
        LayoutInflater inflater = (LayoutInflater) context
                .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            if (view == null) {
                view = new View(context);
                view = inflater.inflate(R.layout.home_best_collection_content, parent, false);
                background_color = (RelativeLayout)view.findViewById(R.id.bckground);
                    //checking last item of the array
                if(position ==MyArr.size()-1)
                {
                    //change the last item background color
                    background_color.setBackgroundColor();
                }
                else
                {
                        // do the work here 
                }
            }
            else
            {

            }
        return view;
    }
}

Please try this code and let me know any problem,
thanks

Drawable dividers for a GridView

Use GridLayoutManager with Recyclerview and add the Itemdecoration from the following gist.You can vary offset's as per your requirement.

---

Related Topics