Export to GitHub

android-developer-preview - issue #297

CardView ripple effect


Posted on Jun 29, 2014 by Massive Camel

When using the android:foreground="?android:attr/selectableItemBackground" property on a CardView, the ripple originates from the center of the CardView, instead of from the touch origin.

XML:

<android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto&quot; android:layout_width="match_parent" android:layout_height="wrap_content" android:clickable="true" android:foreground="?android:attr/selectableItemBackground">

Comment #1

Posted on Jun 30, 2014 by Happy Rabbit

Fixed in master branch. Affects all non-background drawables.

Comment #2

Posted on Jul 1, 2014 by Grumpy Kangaroo

Will there be an OTA to push out this update and others like it?

Comment #3

Posted on Jul 7, 2014 by Massive Kangaroo

Thank you for reporting this issue. For us to be able to investigate this issue it would be helpful if you could provide the following additional information:

SDK version Which version of the SDK are you using?

Android build Which Android build are you using? (e.g. KVT49L)

Device used Which device did you use to reproduce this issue?

Steps to reproduce What steps do others need to take in order to reproduce the issue themselves?

Frequency How frequently does this issue occur? (e.g 100% of the time, 10% of the time)

Expected output What do you expect to occur?

Current output What do you see instead?

logcat output See http://developer.android.com/tools/help/logcat.html. Copy and paste relevant sections of the logcat output into this issue.

Android bug report Press the volume up, volume down, and power buttons simultaneously. This will capture a bug report on your device in the “bug reports” directory. Attach this file to this issue.

Alternate method: In developer settings, ensure that ‘USB debugging’ is enabled, then enable bug report shortcut. To take bug report, hold the power button and select the ‘Take bug report’ option.

Screen capture of the issue Press the volume down and power buttons simultaneously. The image will appear in your gallery. Attach the screenshot file to this issue.

Comment #4

Posted on Jul 7, 2014 by Happy Rhino

Comment deleted

Comment #5

Posted on Jul 7, 2014 by Happy Rhino

Comment deleted

Comment #6

Posted on Jul 7, 2014 by Happy Rhino

Comment deleted

Comment #7

Posted on Jul 7, 2014 by Happy Rhino

Android Build == "LPV79"

Device(s) == Nexus 5/Hammerhead (Device), Nexus 7 2013 (Emulator), Nexus 5 (Emulator).

Reproduce with the following code in XML layout:

<android.support.v7.widget.CardView
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/card_view"
    android:foreground="?android:attr/selectableItemBackground"        android:layout_width="480dp"
    android:layout_height="wrap_content"
    android:onClick="Method"
    android:focusable="true"
    card_view:cardCornerRadius="4dp"
    android:elevation="2dp"></android.support.v7.widget.CardView>

Although happens when in other/less parent view too.

Frequency: 100% of the time.

Expected output: Animate from the location the finger touch upon input.

Current output: Animates from the center of the card_view.

logcat output: null. (upon pressing the (card_view)button Logcat outputs nothing - No Filters set in Logcat).

Screen capture of the issue: Not available as is animated effect.

I apologise for not providing a bug report.

Comment #8

Posted on Jul 7, 2014 by Massive Kangaroo

Comment deleted

Comment #9

Posted on Jul 9, 2014 by Massive Kangaroo

Thank you for reporting this issue. We have passed this on to the development team and will update this issue with more information as it becomes available.

Comment #10

Posted on Nov 3, 2014 by Happy Horse

The development team has fixed the issue you have reported.

Comment #11

Posted on Nov 19, 2014 by Quick Elephant

Comment deleted

Comment #12

Posted on Nov 19, 2014 by Quick Elephant

@10 For some reason, I see this issue occurring on Android Lollipop, version 5.0, build LRX21T (Nexus 4) .

Will the fix be available for the next version/build ? Or was it supposed to be fixed even on this version?

Is there maybe a workaround for this issue?

Comment #13

Posted on Nov 19, 2014 by Quick Elephant

I've also noticed it happens with all views, and not just card views. It also occurs for the phone app, on the part of the "speed dial", with the contacts' photos.

Comment #14

Posted on Dec 30, 2014 by Quick Hippo

The fix is not included into 5.0.2 (Nexus 7 2012).

Comment #15

Posted on Dec 31, 2014 by Quick Elephant

BTW, when using this method of the foreground selection, on pre-Lollipop versions, the selection goes outside of the cardView content, so it looks bad.

For now, it's still better to use simple FrameLayout with your own drawables...

Comment #16

Posted on Jan 15, 2015 by Happy Bear

Anyone got a workaround for this? Am using cardview with recyclerview and can't get the ripple to originate from touch hotspot, but apps like gmail, pushbullet can somehow achieve this.

Not even the rippledrawable seems to work.

Also, I couldn't find any official sample that implements ripples.

Comment #17

Posted on Jan 15, 2015 by Quick Elephant

@16 you could put a FrameLayout with foreground property set for it as the one you wish to use.

Comment #18

Posted on Jan 15, 2015 by Happy Bear

^+1 though now the ripple 'leaks' onto the cardview shadows

Comment #19

Posted on Jan 15, 2015 by Quick Elephant

@18 True. You can mimic the card background and use a normal FrameLayout though.

Comment #20

Posted on Feb 4, 2015 by Helpful Rabbit

On my app, this bug appears only in one activity. I can't understand where is the difference between those two recyclerview/cardview...

Comment #21

Posted on Feb 25, 2015 by Massive Panda

android:foreground is wrong if the CardView is being used in a ListView or GridView (possibly Recyclerview too). Use android:drawSelectorOnTop="true" in the ListView or GridView.

Comment #22

Posted on Feb 25, 2015 by Quick Elephant

@21 So how would you define the selector for the CardView ?

Status: Fixed

Labels:
Type-Defect defect-16180650