CardView in the ListView

Question

I'm trying to load views with image and text by using CardView in the list. However, there is a divider between the cards.

This is my output:

I'm trying to do like in this video, no divider lines.

Here's my XML code.

activity_cat_list.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="match_parent">
    <ListView
        android:id="@+id/lvCat"
        android:layout_width="match_parent"
        android:layout_height="match_parent"></ListView>

</LinearLayout>

item_cat

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="8dp">
    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#FEFEFE"
        android:layout_margin="8dp"
        app:cardCornerRadius="4dp"
        card_view:cardCornerRadius="4dp"
        app:cardPreventCornerOverlap="false"
        app:cardUseCompatPadding="true"
        card_view:cardElevation="8dp">

        <!-- Main Content View -->
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            <ImageView
                android:id="@+id/ivCat"
                android:layout_width="match_parent"
                android:layout_height="250dp"
                android:layout_alignParentTop="true"
                android:scaleType="centerCrop"/>

            <TextView
                android:id="@+id/tvCatName"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/ivCat"
                android:text="Name"
                android:maxLines="3"
                android:padding="8dp"
                android:textColor="#222"
                android:textStyle="bold"
                android:textSize="22dp" />

            <TextView
                android:id="@+id/tvDescription"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/tvCatName"
                android:text="Description"
                android:maxLines="3"
                android:padding="8dp"
                android:textColor="#666"
                android:textSize="14dp" />
        </RelativeLayout>
    </android.support.v7.widget.CardView>
</LinearLayout>

edit 1: add CatAdapter.java

public class CatAdapter extends ArrayAdapter<Cat> {
    public CatAdapter(Context context, ArrayList<Cat> cats) {
        super(context,0,cats);
    }

    @NonNull
    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        //get data item from this position
        Cat cats = getItem(position);

        //check if existing view is being reused, otherwise inflate the views
        if (convertView == null)
            convertView = LayoutInflater.from(getContext()).inflate(R.layout.item_cat, parent, false);

        //lookup view for data population
        TextView tvName = (TextView)convertView.findViewById(R.id.tvCatName);
        TextView tvDescription = (TextView)convertView.findViewById(R.id.tvDescription);
        ImageView ivCat = (ImageView)convertView.findViewById(R.id.ivCat);

        //populate into template view from data source
        tvName.setText(cats.getName());
        tvDescription.setText(cats.getDescription());
        Glide.with(getContext()).load(cats.getImages()).into(ivCat);

        return convertView;
    }
}

Can you share the java code where you are setting the adapter to this listview? — harshithdwivedi, Jan 18 '17 at 17:57
set divider property to null, http://stackoverflow.com/questions/1914477/how-do-i-remove-lines-between-listviews-on-android — Pavneet_Singh, Jan 18 '17 at 18:03
@IhsanRamli sometimes setting the divider to null in xml won't work. So try doing it programmatically. `listView.setDivider(null);` `listView.setDividerHeight(0);` — harshithdwivedi, Jan 18 '17 at 18:18

score 2 · Answer 1 · answered Jan 18 '17 at 17:52

2

You can remove divider with xml :

<ListView
    android:id="@+id/lvCat"
    android:dividerHeight="0dp"
    android:divider="@null"
    android:layout_width="match_parent"
    android:layout_height="match_parent"></ListView>

answered Jan 18 '17 at 17:52

Yoleth

1,269
7
15

It's still there. – Ihsan Ramli Jan 18 '17 at 17:55
I tried with the code I gave you and it's working. Edit your post with activity layout code so we can check. – Yoleth Jan 18 '17 at 18:14
you can mark the divider as transparent, that should work too but setting it to null should work and should be preferred. – Hitesh Jan 18 '17 at 22:24

CardView in the ListView

1 Answers1