Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-15882] Android: View changes size when animated with position change

GitHub Issuen/a
TypeBug
PriorityHigh
StatusClosed
ResolutionFixed
Resolution Date2013-12-11T07:16:50.000+0000
Affected Version/sRelease 3.1.3
Fix Version/s2013 Sprint 25, 2013 Sprint 25 API, Release 3.3.0
ComponentsAndroid
LabelsSupportTeam, module_animation, qe-closed-3.2.0, qe-testadded
ReporterThomas Reinberger
AssigneeSunila
Created2013-11-29T16:21:47.000+0000
Updated2014-07-29T20:02:28.000+0000

Description

Problem Description

When a View is animated (translated) using the simple Ti.UI.createAnimation(...) method AND the view contains a borderColor, the view changes its size during animation.

Test Code 

 
Titanium.UI.setBackgroundColor('#000');
 
var win1 = Titanium.UI.createWindow({
	title : 'Tab 1',
	backgroundColor : '#fff'
});

var slideView = Ti.UI.createView({
	//borderColor : "#d4d4d4", //comment out this line to make the example work
	width : 200,
	height : 250,
	right : 1,
	top : 1,
	backgroundColor : "#bbbbff"
});

win1.add(slideView);
win1.open();

setTimeout(function() {
	var resultAnim = Ti.UI.createAnimation({
		top : 200,
		duration : 500
	});

	slideView.animate(resultAnim);
}, 500);

Step to reproduces

1. Create a new project 2. Paste test code in app.js 3. Now run on android Emulator/Device 4. See screen, view animate ok 5. Now add borderColor property in “slideView” view 6. Run again

Expected result

View animation should be smooth and size will be same.

Comments

  1. Sunila 2013-12-05

    Use outerView instead of nativeView so that it works for view with border. https://github.com/appcelerator/titanium_mobile/pull/5064
  2. Neha Mittal 2013-12-11

    Verified with below environment and Test Code: Appcelerator Studio: 3.2.0.201312101708 SDK: 3.2.0.v20131210191510 alloy: 1.3.0-cr acs: 1.0.10 npm: 1.3.2 titanium: 3.2.0-cr titanium-code-processor: 1.1.0-cr Device: Nexus 7(v4.2.1)/Mac 9 Test Code: 
       Titanium.UI.setBackgroundColor('#000');
     
   var win1 = Titanium.UI.createWindow({
       title : 'Tab 1',
       backgroundColor : '#fff'
   });
   
   var outerView= Ti.UI.createView({
   	width : 200,
   	height : 250,
   	right :1,
   	top :1,
   	backgroundColor: "red"
   })
    
   var slideView = Ti.UI.createView({
       borderColor : "#d4d4d4", //comment out this line to make the example work
       width : 200,
       height : 250,
       right : 1,
       top : 1,
       backgroundColor : "#bbbbff"
   });
    
   win1.add(outerView);
   outerView.add(slideView);
   win1.open();
    
   setTimeout(function() {
       var resultAnim = Ti.UI.createAnimation({
           top : 200,
           duration : 500
       });
    
       outerView.animate(resultAnim);
   }, 500);
    Animation is smooth and of same size. Hence closing the issue.
  3. Neha Mittal 2013-12-11

    Reopening just to edit the above sample code.
  4. Neha Mittal 2013-12-11

    Closing as updated the code.

JSON Source