Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-27237] Android: Animating a Label or Button with borderRadius bugs the backgroundColor animation.

GitHub Issuen/a
TypeBug
PriorityCritical
StatusClosed
ResolutionFixed
Resolution Date2019-10-04T10:35:46.000+0000
Affected Version/sn/a
Fix Version/sRelease 8.3.0
ComponentsAndroid
Labelsanimation, borderRadius, button, engSchedule, label, titanium
Reporterremo.loaiza
AssigneeYordan Banev
Created2019-07-04T01:42:12.000+0000
Updated2019-10-04T10:35:46.000+0000

Description

Adding the property borderRadius to a label or a button and animating the backgroundColor makes it always go from white to the animated color instead of animating from the view background color to the new color. Test case: 
var win = Ti.UI.createWindow({
        layout : 'vertical',
        width : Ti.UI.FILL,
        height : Ti.UI.FILL
    });

    var label = Ti.UI.createLabel({
        width :Ti.UI.SIZE,
        font : {
            fontSize : 14
        },
        text : 'Should go from blue to black',
        textAlign : 'center',
        color : 'white',
        backgroundColor : 'blue',
        borderRadius : 20
    });
    
    label.addEventListener('click',function() {
        label.animate({
            backgroundColor : '#000',
            duration : 10000
        });
    });
    
    win.add(label);
    win.open();
The expected behavior is for the background to go from {color:blue}blue{color} to {color:black}black{color} but instead it goes from white to black. If you remove the borderRadius then it works as expected. A workaround is to wrap the label/button in a view.

Attachments

FileDateSize
1562230320886.JPEG2019-07-04T08:56:36.000+000012036
1562230320932.JPEG2019-07-04T08:55:58.000+000012490
1562408449852.JPEG2019-07-06T10:22:39.000+000017968
1562408449904.JPEG2019-07-06T10:22:39.000+000017502
ui_bug_brorderradius.gif2019-07-04T17:45:12.000+0000874772

Comments

  1. Rakhi Mitro 2019-07-04

    Hello [~remo.loaiza], Thanks for reporting this. Are you using SDK 7.5.1 for testing? It would be great if you can test on SDK 8.0.2.GA and let us know the result. To install SDK 8.0.2.GA please open terminal and type: *appc ti sdk install 8.0.2.GA*
  2. remo.loaiza 2019-07-04

    Hi Rakhi, I just tested in 8.0.2 GA and it's still there.
  3. Rakhi Mitro 2019-07-04

    [~remo.loaiza], We tested this on 8.0.2 GA(Android device Huawei y9 2018) and unable to reproduce this as a bug. This is working as expected. Check the outputs: *Before click:* !1562230320932.JPEG|thumbnail! *After click:* !1562230320886.JPEG|thumbnail! The expected behaviour is for the background to go from blue to black.
  4. remo.loaiza 2019-07-04

    Im sorry, I think I may not have explained the problem as I should. If you add a border radius the animation goes to white first then it goes to black. This is not expected, it should go from blue to black. Here's a GIF of the bug and new test code: !ui_bug_brorderradius.gif! 
           var win = Ti.UI.createWindow({
           layout : 'vertical',
           width : Ti.UI.FILL,
           height : Ti.UI.FILL
       });
    
       var label = Ti.UI.createLabel({
           top : 20,
           width :'80%',
           font : {
               fontSize : 14
           },
           text : 'Should go from blue to black',
           textAlign : 'center',
           color : 'white',
           backgroundColor : 'blue',
           borderRadius : 20
       });
       
       var label2 = Ti.UI.createLabel({
           top : 20,
           width :'80%',
           font : {
               fontSize : 14
           },
           text : 'Should go from blue to black',
           textAlign : 'center',
           color : 'white',
           backgroundColor : 'blue'
       });
       
       label.addEventListener('click',function() {
           label.animate({
               backgroundColor : '#000',
               duration : 10000
           });
           label2.animate({
               backgroundColor : '#000',
               duration : 10000
           });
       });
       
       win.add(label);
       win.add(label2);
       win.open();
  5. Jebun Naher 2019-07-06

    Hello [~remo.loaiza], Thanks for your update. I just tested the issue using ti sdk 8.0.2 GA on physical android device Huawei y9 2018. The issue does not reproduce on our end. The animation goes directly from blue to black, it doesn't go to white first. Please find the screenshots. !1562408449852.JPEG|thumbnail! !1562408449904.JPEG|thumbnail! Can you share your device / emulator details please?
  6. remo.loaiza 2019-07-08

    Ive tried and reproduced this on a HUAWEI P30 Android 9 device, Android 6 emulator, and on a Sony D6603 running Android 6. On all Ive tried both SDKs 7.5.1 and 8.0.2. I started a new project with 8.0.2 to test if it was not another setting i've put in and I can reproduce this still. However, by default a new project uses the dark theme so instead of starting from white it starts from black. Which leads me to think this is somehow related to Android themes.
  7. Sharif AbuDarda 2019-07-11

    Hello [~remo.loaiza], The issue occurs with the white window background. I was able to reproduce the issue using a white background. The issue is when using a border radius to the label. Clicking on it will first remove the background color(blue) and then the black background color starts to animate(from white to black). This is more visible in a white background. The expected behavior is shown in the second label. Where the animation turns the background color to black in 10s. Tested with SDK 8.0.2.GA in Android 9.0.1 device (Nokia 6). The issue is with both label and button. Working as expected in iOS. Moving to engineering. Thanks.
  8. Yordan Banev 2019-07-16

    PR (master): https://github.com/appcelerator/titanium_mobile/pull/11053
  9. Keerthi Mahalingam 2019-08-01

    FR Passed. Waiting for 8.1.0 GA release to merge PR.
  10. Yordan Banev 2019-08-19

    PR (8_3_X): https://github.com/appcelerator/titanium_mobile/pull/11158
  11. Keerthi Mahalingam 2019-08-19

    FR passed.Unit tests are failing .not able to merge PR
  12. Keerthi Mahalingam 2019-09-09

    PR merged on master.
  13. Sohail Saddique 2019-10-04

    *Verified fix* Test environment: Studio Ver: 5.1.4.201909061933 SDK Ver: 8.3.0.v20191003144543 Mac OS Ver: 10.14.6 Ti CLI Ver: 5.2.1 Node Ver: 10.16.3 NPM Ver: 6.11.3 Emulator: ⇨ Android 10 (Pixel 3 XL) Closing ticket.

JSON Source