Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-25661] Android: Glitchy rotation animation occurs with views with borders in Android 7.0 and above

GitHub Issuen/a
TypeBug
PriorityMedium
StatusReopened
ResolutionUnresolved
Affected Version/sn/a
Fix Version/sRelease 7.1.0
ComponentsAndroid
Labelsn/a
ReporterMotiur Rahman
AssigneeJoshua Quick
Created2018-01-11T09:54:30.000+0000
Updated2020-08-17T19:12:38.000+0000

Description

I am using Circular progress widget(https://github.com/manumaticx/circularprogress), in that as per my project requirement I need to rotate the view for that I have added the below code: 
var animation = Ti.UI.createAnimation({

duration : 0,

transform : Ti.UI.create2DMatrix().rotate(-90)

});

$.container.animate(animation);
this is working fine in all the Android and iOS devices except Android OS version 7. Please see the attachment file, Android 7 should work as like that. If I just add this property *autoreverse : true* then the Circular view is showing but not the correct position. *Actual Behaviour:* Android v7.0.0 Circular view and animation is not working properly. *Expected Behaviour:* Need's to support the Android 7.0.0 as well. Test Code: I have attached the "App" folder please run it on Android 7.0.0 and other devices for the difference. Let me know if you need anything else.

Attachments

FileDateSize
actual.png2018-01-18T21:31:03.000+000052393
app.zip2018-01-11T09:51:27.000+00009301158
expected.png2018-01-18T21:31:03.000+000058423
Screen Shot 2018-01-11 at 3.26.00 PM.png2018-01-11T09:43:41.000+000042079
Screen Shot 2018-01-11 at 3.30.06 PM.png2018-01-11T09:43:54.000+000049428

Comments

  1. Gary Mathews 2018-01-18

    master: https://github.com/appcelerator/titanium_mobile/pull/9751
  2. Gary Mathews 2018-01-18

    7_0_X: https://github.com/appcelerator/titanium_mobile/pull/9752
  3. Lokesh Choudhary 2018-01-18

    FR Passed. Waiting for merge to get enabled.
  4. Lokesh Choudhary 2018-01-19

    Master PR merged.
  5. Lokesh Choudhary 2018-01-24

    Backport PR merged.
  6. Lokesh Choudhary 2018-01-24

    Verified the fix with SDK 7.1.0.v20180124063413 & 7.0.2.v20180123170142. Closing. Studio Ver: 5.0.0.201712081732 SDK Ver: 7.0.2.v20180123170142, 7.1.0.v20180124063413 OS Ver: 10.13.2 Xcode Ver: Xcode 9.2 Appc NPM: 4.2.11 Appc CLI: 7.0.1 Daemon Ver: 1.0.1 Ti CLI Ver: 5.0.14 Alloy Ver: 1.10.10 Node Ver: 8.9.1 NPM Ver: 5.5.1 Java Ver: 1.8.0_101 Devices: ⇨ google Pixel --- Android 7.1.1 ⇨ google Nexus 5 --- Android 6.0.1
  7. Joshua Quick 2018-01-31

    This is a Google bug that was introduced in Android 7.0 (aka: API Level 24): https://issuetracker.google.com/issues/37123819
  8. Joshua Quick 2018-02-01

    We are reverting the above code change in Titanium 7.0.2.GA. We're doing this because it's causing large views with borders to disappear (ie: fails to render) for other Titanium developers, such as the issue mentioned here: [TIMOB-25733] We have discovered that this is a bug on Google's end which was introduced as of Android 7.0 and it hasn't been fixed yet (as of the time of this comment). The Google bug report can be seen via the link below. It's an issue with circular clipping and animation. https://issuetracker.google.com/issues/37123819 [~morahman], I recommend that you use Titanium's Ti.UI.createActivityIndicator() feature instead. That will display the native animated circular progress indicator. 
       var window = Ti.UI.createWindow({ backgroundColor: "gray" });
   var indicator = Ti.UI.createActivityIndicator(
   {
   	visible: true,
   //	message: "Optional message goes here.",
   	style: Ti.UI.ActivityIndicatorStyle.BIG,
   });
   indicator.show();
   window.add(indicator);
   window.open();
  9. Joshua Quick 2018-09-05

    Note that we've added radial gradient support on Android as of Titanium 7.1.0. The radial gradient feature can be used to draw a solid circle or ring, which is what the app developer wants. This is a better solution than using rounded borders to "clip" the view into a circle, because the rounded clipping is what's buggy on Google's end. Also, radial gradient is hardware accelerated and can render faster as well. See... https://docs.appcelerator.com/platform/latest/#!/api/Titanium.UI.View-property-backgroundGradient
  10. Srinivasan Pulipakkam 2018-10-17

    Fixed in 7.1.0

JSON Source