Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-28446] Android: Issues with touch feedback / ripple effect

GitHub Issuen/a
TypeBug
PriorityCritical
StatusOpen
ResolutionUnresolved
Affected Version/sRelease 9.3.1, Release 10.0.0
Fix Version/sn/a
ComponentsAndroid
Labelsn/a
ReporterHans Knöchel
AssigneeJoshua Quick
Created2021-05-13T18:15:09.000+0000
Updated2021-05-18T21:40:35.000+0000

Description

We have been advised by Google that we need proper ripple effects in our app. Unfortunately, Titanium does not cover these requirements so far: - Ripple effect on image views - Ripple effect on labels - Ripple effect on child views of other views (like a label inside a card view) Positive side now: Ripple effects inside list views / table views are working very well already - even with child views!

Comments

  1. Joshua Quick 2021-05-13

    First, let me clarify that "touchFeedback" is applied to a view's "background". It is not applied to a view's foreground components. We document this here... https://docs.appcelerator.com/platform/latest/#!/api/Titanium.UI.View-property-touchFeedback *Regarding ImageView:* If you display a completely *opaque* image in an ImageView via its "image" property (such as a camera photo), then you won't see the "touchFeedback" effect. This is not a bug. This is the expected behavior since touch feedback is applied to the background which is completely covered up. However, if you display the image via the "backgroundImage" instead, then you will see the touch feedback effect. The downside of using "backgroundImage" is it doesn't load images async and it ignores JPEG EXIF orientation. _(Note that if the foreground "image" had transparency, then you would see the ripple effect happening in the transparent areas which I know is the behavior some people want.)_ If you want touch feedback to be applied to the ImageView object's "image" property (which a foreground drawable), then this is really a feature request. We would need to add new APIs, such as "imageTouchFeedback" and "imageTouchFeedbackColor" so that Titanium will know to apply the native RippleDrawable to the foreground drawable. *Regarding Label:* Touch feedback does work on Ti.UI.Label. The below proves it.
       const window = Ti.UI.createWindow();
       window.add(Ti.UI.createLabel({
       	text: "\n   Hello World   \n",
       	touchFeedback: true,
       	touchFeedbackColor: "yellow",
       }));
       window.open();
       
    Although, if you're using Titanium 10.0.0, then I recommend you use Ti.UI.Button instead with it's [style](https://docs.appcelerator.com/platform/latest/#!/api/Titanium.UI.Button-property-style) property set to Titanium.UI.BUTTON_STYLE_TEXT. The material text-only button will show you the ripple effect for free and this constant is supported on iOS as well. This assumes you are simulating a text-only button to begin with of course. _(Why else would you want a touch feedback effect on a label?)_
       const window = Ti.UI.createWindow();
       const button = Ti.UI.createButton({
       	title: "Click Me",
       	style: Ti.UI.BUTTON_STYLE_TEXT,
       });
       button.addEventListener("click", function() {
       	alert("Button clicked!");
       });
       window.add(button);
       window.open();
       
    *Regarding Child Views:* By default, all Titanium view's have touch enabled. This means they will steal the native touch event from the parent hierarchy, preventing the parent from showing the touch feedback effect. You will have to set the "touchFeedback" property on the child views to false so that the parent can receive the native touch event needed to trigger the native touch feedback/ripple effect. Which leads to... *Regarding CardView:* See the code example for CardView with labels in ticket [TIMOB-28082]. This shows touch feedback in the CardView correctly working the way you want it. Note that all CardViews show the ripple effect by default and we do have to disable touch on the child labels so that the native event will pass through to the parent.
  2. Joshua Quick 2021-05-14

    I wrote up a feature request for a new "imageTouchFeedback" property for Ti.UI.ImageView. Please see ticket: [TIMOB-28447]
  3. Hans Knöchel 2021-05-14

    Most of the issues can be resolved by setting the "touchEnabled" property to "false". Thank you for that hint! The one critical issue remaining is that the click event handling seem broken if a child view (like a label) is inside a non-card-view parent. See the following case for reference:
       var win = Ti.UI.createWindow({
           backgroundColor: '#fff'
       });
       
       var childView = Ti.UI.createView({ backgroundColor: 'red' });
       var cardView = Ti.UI.Android.createCardView({ width: 300, height: 300, backgroundColor: 'green' });
       cardView.add(Ti.UI.createLabel({ text: 'Title', touchEnabled: false }));
       childView.add(cardView);
       
       childView.addEventListener('click', () => {
       	alert('Click on child view!');
       })
       
       var scrollableView = Ti.UI.createScrollableView({
           views: [childView]
       });
       
       scrollableView.addEventListener('longpress', () => {
       	alert('Longpress!')
       });
       
       win.add(scrollableView);
       win.open();
       
  4. Joshua Quick 2021-05-18

    [~hknoechel], I'm able to reproduce the "longpress" event issue. Thanks for the reproducible case. We're actually running into a similar issue mentioned below where taps are being registered as long-presses because we're not handling the initial down press in this case... but we don't want to return true via the GestureListener.onDown() listener because that would prevent the touch from being propagated to the parent which you need for the touch feedback/ripple effect to work. _(sigh)_ https://stackoverflow.com/questions/24326530/long-press-in-gesturedetector-also-fires-on-tap I just wrote up a custom "longpress" solution in Java. I'll see about getting a PR for this tomorrow once I'm done fully testing it. Alternatively, you could work-around this by using the Android-only [longclick](https://titaniumsdk.com/api/titanium/ui/view.html#longclick) event, but the downside to this event is it is fired as you drag within the view. That's the native behavior and you might not like it.
  5. Hans Knöchel 2021-05-18

    This is awesome news, thank you so much, Josh! :-)
  6. Joshua Quick 2021-05-18

    [~hknoechel], I made a separate ticket for the "longpress" issue. Please see: [TIMOB-28454]

JSON Source