[TIMOB-19578] Android: Customize Touch Feedback

GitHub Issue	n/a
Type	Technical task
Priority	Medium
Status	Closed
Resolution	Fixed
Resolution Date	2016-09-29T08:40:07.000+0000
Affected Version/s	n/a
Fix Version/s	Release 6.1.0
Components	Android
Labels	android, material-design, touchfeedback
Reporter	Chee Kiat Ng
Assignee	Gary Mathews
Created	2015-09-25T03:08:57.000+0000
Updated	2018-08-06T19:38:15.000+0000

Description

Touch feedback in material design provides an instantaneous visual confirmation at the point of contact when users interact with UI elements. The default touch feedback animations for buttons use the new RippleDrawable class, which transitions between different states with a ripple effect. In most cases, you should apply this functionality in your view XML by specifying the view background as: ?android:attr/selectableItemBackground for a bounded ripple. ?android:attr/selectableItemBackgroundBorderless for a ripple that extends beyond the view. It will be drawn upon, and bounded by, the nearest parent of the view with a non-null background. Note: selectableItemBackgroundBorderless is a new attribute introduced in API level 21. Alternatively, you can define a RippleDrawable as an XML resource using the ripple element. You can assign a color to RippleDrawable objects. To change the default touch feedback color, use the theme's android:colorControlHighlight attribute. For more information, see the API reference for the RippleDrawable class.

Comments

Srikanth Sombhatla 2015-10-19

PR https://github.com/appcelerator/titanium_mobile/pull/7317 Tested with Kitchen sink suite and below test code

   var theWin = Ti.UI.createWindow({
   	layout:'vertical', 
   	backgroundColor:'#0093b4',
   	touchFeedback: true
   });
    
   var aButton = Ti.UI.createButton({
   	title : 'Button with default touch feedback',
   	backgroundColor: 'red',
   	touchFeedback: true
   });
    
   var changeRippleColorButton = Ti.UI.createButton({
   	title : 'Change above ripple color to green',
   });
    
   changeRippleColorButton.addEventListener('click', function() {
   	aButton.touchFeedbackColor = 'green';
   });
   
   var label = Ti.UI.createLabel({
   	text: 'View with touch feedback',
   	touchFeedback: true
   });
    
   theWin.add(aButton);
   theWin.add(changeRippleColorButton);
   theWin.add(label);
   
   theWin.open();

Srikanth Sombhatla 2015-10-22

[~hpham] Updated with code review changes. Please review https://github.com/appcelerator/titanium_mobile/pull/7317/
Srikanth Sombhatla 2015-11-06

[~hpham] Please review the PR.
Srikanth Sombhatla 2015-11-23

[~hpham] Please review resolved merge conflicts PR https://github.com/appcelerator/titanium_mobile/pull/7317/
Tim Poulsen 2015-12-07

Will this change enable developers to display touch feedback on ListItems? Or is there a related ticket to enable that functionality. Because the PR is related to the Ti.UI.View component, I suspect not. I'd really like to show touch feedback on a ListView because processing an itemclick, say to open a new window, can take a significant amount of time making for bad user experience.
Ashraf Abu 2016-07-11

The PRs need to be re-reviewed and also possibly rebased.
Hans Knöchel 2016-07-31

Updated PR (based on master): https://github.com/appcelerator/titanium_mobile/pull/8176 We can use the above demo-code to review. I also changed the since version to 6.1.0, added some docs-improvements and refactored some code-style. [~msamah] Can you proceed with the review then? After 6.0.0 branching I guess.
Hans Knöchel 2016-09-05

Some FT problems (tested on Sim so far): - When clicking the red button before changing the riffle color to green, I don't see a touch-feedback although touchFeedback is true already - I see touch-feedback on the default button to change the riffle color, so it might be a problem with (initial) custom colors that are not targeted correctly - I don't see any touch-feedback on both the view and the window, although touchFeedback is true there as well. Is it supposed to work there? I am not sure if that's intended behavior. I took over this PR from Srikanth, but maybe someone from the Android-team could rather help here. Thanks!
Gary Mathews 2016-09-28

[~hansknoechel] I reviewed and addressed the issues. master: https://github.com/appcelerator/titanium_mobile/pull/8446

Hans Knöchel 2016-09-29

Test-case:

    var win = Ti.UI.createWindow({
            layout: 'vertical',
            backgroundColor: '#A0E040',
            touchFeedback: false,
            touchFeedbackColor: '#FF0000'
        }),
        a = Ti.UI.createSwitch({
            style: Titanium.UI.Android.SWITCH_STYLE_CHECKBOX,
            title: 'ENABLE TOUCH FEEDBACK'
        }),
        b = Ti.UI.createButton({
            title : 'BUTTON',
            backgroundColor: '#40FFE0',
            touchFeedback: false,
            touchFeedbackColor: '#EE00FF'
        });
    
    a.addEventListener('change', function(e) {
        win.setTouchFeedback(a.value);
        b.setTouchFeedback(a.value);
    });
    
    win.add(a);
    win.add(b);

Samir Mohammed 2016-11-29

Verified, when the touch feedback was enabled the ripple effect was visible on the button; tested using the test case provided by [~hansknoechel]

    var win = Ti.UI.createWindow({
            layout: 'vertical',
            backgroundColor: '#A0E040',
            touchFeedback: false,
            touchFeedbackColor: '#FF0000'
        }),
        a = Ti.UI.createSwitch({
            style: Titanium.UI.Android.SWITCH_STYLE_CHECKBOX,
            title: 'ENABLE TOUCH FEEDBACK'
        }),
        b = Ti.UI.createButton({
            title : 'BUTTON',
            backgroundColor: '#40FFE0',
            touchFeedback: false,
            touchFeedbackColor: '#EE00FF'
        });
    
    a.addEventListener('change', function(e) {
        win.setTouchFeedback(a.value);
        b.setTouchFeedback(a.value);
    });
    
    win.add(a);
    win.add(b);
    
    win.open();

*Environement*

    Appcelerator Command-Line Interface, version 6.0.0
    Android 7.0 (Google Nexus 6P)
    Operating System Name: Mac OS X El Capitan
    Operating System Version: 10.11.6
    Node.js Version: 4.6.0
    npm: 4.2.8
    Titanium CLI Version: 5.0.10
    Titanium SDK Version: 6.1.0.v20161129071600
    Xcode: 8.0
    Appcelerator Studio: 4.8.0.201611121409

Carlos Henrique Zinato 2017-06-28

This is really awesome! Does anyone have an input on how to apply this for ListViews? Thanks!
Clément Blanco 2017-10-19

+1 for the ListView. Documentation says it supports it but it clearly doesn't work with ItemTemplates.

JSON Source