[TIMOB-23863] Item Template in List View blocks Android 5 ripple animation

GitHub Issue	n/a
Type	Bug
Priority	High
Status	Closed
Resolution	Fixed
Resolution Date	2017-08-25T18:22:16.000+0000
Affected Version/s	n/a
Fix Version/s	Release 6.2.0
Components	Android
Labels	android, api, defect
Reporter	Aleks
Assignee	Yordan Banev
Created	2015-08-23T10:27:13.000+0000
Updated	2018-04-06T18:42:05.000+0000

Description

A ListView does not allow the Android Lollipop ripple animation to play. When pressing on a list item no visual feedback is present by default. When a custom item template is made and its width is set to 50% we can see the animation play but click events do not fire. Not setting a custom template and therefore using the default template causes this problem as well. Problem occurring and identified on: Titanium SDK: 4.1.0.GA Platform & version: Android 5.0 Device: Nexus 5 5.1.1 Host Operating System: Windows 8.1 Appcelerator Studio: 4.2.0 Discussion: https://community.appcelerator.com/topic/730/ripple-effect-in-listview-on-android-lollipop/3

Attachments

File	Date	Size
rippleTest.zip	2016-08-04T15:27:20.000+0000	10473799

Comments

Duy Bao Nguyen 2015-11-12

+1
Jebun Naher 2015-12-03

Hello [~aleks] Please try building the project using latest appcelerator builds, also provide a reproducible test case that replicates the issue. Thanks.
Ray Belisle 2015-12-03

Using the latest 5.1.1GA, the problem still presents itself. I believe that the reproducible case is listed in the link to the discussion board above. I will reproduce here: "Below was just my experiment and not practical. It was just to get an idea that titanium ListView have ripple effect: Change width of the ItemTemplate to 50% It left remaining 50% space that you can click and BAMMM... You can see the effect. I think this have something to do with listview proxy in titanium. Hope it helps..." So essentially, the template 'covers' the listview row and so the template receives the user interaction and the effect is not shown. If you reduce the template width to 50% and click on the row outside the 50% template view, the effect is shown.
Sharif AbuDarda 2015-12-09

Hello [~aleskuklinek], Can you provide a test case which demonstrate the issue you reported? Ripple effect is something native to some android elements like buttons, Menu items etc. One way would be to use List View templates and in the template use buttons to show your list item. Check this [doc](http://docs.appcelerator.com/platform/latest/#!/api/Titanium.UI.ListView-property-templates). Look under the "List View with Custom Item Template" section. The example shows the use of Labels in the template for listItem, but I guess you can try the same with Button, which should give you the ripple effect. Let me know if this works. Or, Please provide a test case of your issue. Thanks.
Aleks 2015-12-14

Sorry I am currently overseas and away from my Appcelerator laptop so I cannot test the latest SDK builds. I don't know what kind of formal test you want me to write but I'll try explain when this issue happens: On Android 5.0+, any list item you click does not present any visual feedback when clicked. This issue occurs for every list view and list item by default and even with custom or built in templates. A button does not have the flexibility to modify its contents as well as a list item and this method seems a bit of a hack. Although there is a possibility to set the list items' selectedBackgroundColor to have a solid color appear when clicked. I do not understand what further information you require. I do not know how to make this issue any clearer as I have explained it as best I can and some helpful others in the community have explained it as well. Thanks.
Ray Belisle 2015-12-14

I will second the last comment. Not sure what 'other' test case you want/need. The way to show this is very clear from the information provided above.
Tim Poulsen 2015-12-15

They want a project, zipped and attached to this ticket or they won't look at your issue.

Ray Belisle 2016-07-23

You can see the issue by placing this into a view:

   <Alloy>
   	<Window id="listWindow" layout="vertical">
   		<ListView id="list">
   
   			<Templates>
   				<ItemTemplate name="half" height='60' width='50%'>
   					<Label bindId="labelName" id="title" text="Click left or righf of me" color = '#fff'></Label>
   				</ItemTemplate>
   			</Templates>
   			<ListSection id="accounts">
   				<ListItem image="images/checking_account.png" title="Checking"/>
   				<ListItem image="images/saving_account.png" title="Savings"/>
   			</ListSection>
   			<ListSection id='ripple'>
   				<ListItem template='half' ></ListItem>
   			</ListSection>
   		</ListView>
   	</Window>
   </Alloy>

When you click on the top two items, you don't see the ripple effect. On the third row, if you click to the left or right of the label, the ripple effect shows, but if you click on the label, no effect.

Ray Belisle 2016-08-04

Here is a project showing the behavior.
Douglas Alves 2016-11-29

It seems like a simple visual effect but in fact this is very important to Google. My app have recently been chosen to be featured on Google Play and they have reviewed it, and made a few considerations. One of these considerations is the ripple effect on listviews. If this doesn't work, they say you are not following the material design feedback guidelines.
Yordan Banev 2017-08-24

master: https://github.com/appcelerator/titanium_mobile/pull/9353 6_2_X: https://github.com/appcelerator/titanium_mobile/pull/9354
Lokesh Choudhary 2017-08-25

FR Passed for both master & backport PR.
Lokesh Choudhary 2017-08-25

PR's merged.
Lokesh Choudhary 2017-08-26

Verified the fix with SDK 6.2.0.v20170825165823 & 7.0.0.v20170825165854. Closing. Studio Ver: 4.9.1.201707200100 SDK Ver: 6.2.0.v20170825165823, 7.0.0.v20170825165854 OS Ver: 10.12.3 Xcode Ver: Xcode 8.3.3 Appc NPM: 4.2.9 Appc CLI: 6.2.3 Ti CLI Ver: 5.0.14 Alloy Ver: 1.9.13 Node Ver: 6.10.1 Java Ver: 1.8.0_101 Devices: ⇨ google Nexus 5 — Android 6.0.1 ⇨ google Pixel — Android 7.1.1

JSON Source