ListView with CardViews strange behavior with margin & padding

Question

I've implemented a ListView with CardViews inside following some online tutorials.

Fragment of layout containing the list

<ListView
                android:id="@+id/interactions_list"
                android:orientation="vertical"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_alignParentEnd="true"
                android:layout_alignParentStart="true"
                android:layout_marginTop="10dp"
                android:visibility="invisible"
                android:layout_alignParentTop="true"
                android:divider="#000000"
                android:dividerHeight="4dp"
                />

Element layout

<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:card_view="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:padding="16dp"
        android:orientation="vertical"
    >
        <android.support.v7.widget.CardView
            android:background="#00000000"
            android:layout_width="fill_parent"
            android:layout_height="100dp"
            android:layout_gravity="center"
            android:layout_margin="5dp"
            card_view:cardCornerRadius="2dp"
            card_view:contentPadding="10dp"
            android:id="@+id/cv">

                <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:padding="0dip">

                    <TableRow android:padding="5dip">
                        <ImageView
                            android:id="@+id/pkicon"
                            android:layout_width="50dp"
                            android:layout_height="50dp"
                            android:layout_margin="3dp"/>

                        <LinearLayout android:id="@+id/lnlayout"
                            android:layout_width="50dp"
                            android:layout_height="wrap_content"
                            android:layout_weight="1"
                            android:orientation="vertical"
                            android:layout_margin="3dip">

                            <TextView
                                android:id="@+id/pkname"
                                android:layout_width="wrap_content"
                                android:layout_height="30dp"
                                android:textColor="#000000"
                                android:textSize="20sp"/>

                            <TextView
                                android:id="@+id/pknot"
                                android:layout_width="wrap_content"
                                android:layout_height="20dp"
                                android:textColor="#606060"/>

                        </LinearLayout>

                    </TableRow>
                </TableLayout>
        </android.support.v7.widget.CardView>

    </LinearLayout>

Now I am encountering strange behavior when user taps a card, as seen on this screenshot:

The card is shown correctly, but when tapped, the ripple effect covers the LinearLayout element and the card has a solid opaque background.

Expected behavior: the background behind the card remains white, the ripple effect occurs only on the card.

Please help out.

You want to make the card inside the item clickable. Currently there is an onItemSelectedListener set on the parent ListView and it draws ripple background beneath the items. Maybe you'd like to use RecyclerView instead. RecyclerView does not have this confusing sugar. You'll be in charge of click listeners. Start here https://developer.android.com/training/material/lists-cards.html — Eugen Pechanec, Jul 18 '17 at 20:04

score 2 · Answer 1 · answered Jul 18 '17 at 19:49

2

this is happening because your parent view is linear layout that's the reason ripple is being created on it use

app:cardBackgroundColor="?selectableItemBackground"

or

android:background="?selectableItemBackground"

or

android:foreground="?selectableItemBackground"

in the cardview layout and set you click listener to this cardview layout not on the parent ie. LinearLayout.

answered Jul 18 '17 at 19:49

Reyansh Mishra

1,879
1
14
26

The background tip didn't work. How do I set a listener on the card? In the moment, I have a listener `setOnItemClickListener` on a whole list. – Liglo App Jul 19 '17 at 06:41
I hope you are using custom adapter here are the reference how to set the click listener https://stackoverflow.com/a/12596403/5492047 and this one http://androidforbeginners.blogspot.in/2010/03/clicking-buttons-in-listview-row.html if it doesn't work let me know. – Reyansh Mishra Jul 19 '17 at 06:59
Thanks a lot! This helps. – Liglo App Jul 19 '17 at 07:00

score 0 · Answer 2 · answered Jul 18 '17 at 19:38

Maybe changin the LinearLayout width and height to wrap_content may solve the problem

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="16dp"
android:orientation="vertical">

ListView with CardViews strange behavior with margin & padding

2 Answers2