Titanium JIRA Archive
Appcelerator Community (AC)

[AC-2366] Android App Crashes On Animation Involving Two Views With Background Images

GitHub Issuen/a
Resolution Date2013-03-20T22:38:15.000+0000
Affected Version/sn/a
Fix Version/sn/a
ComponentsTitanium SDK & CLI
Labelsandroid, animation, backgroundImage, opacity, view
ReporterItay Avtalyon
AssigneeMauro Parra-Miranda


*Problem description* I have a window with two views one under the other. Each has a background image. I have a simple animation that has the top view disappear (changing opacity) to reveal the bottom view. The app crashes on this animation. It doesn't crash if only one of them has a background image. *Workaround* Assign the bottom background image to the containing view. *Test case*
var mainWindow = Ti.UI.createWindow({
	height : Ti.UI.FILL,
	width : Ti.UI.FILL,
	fullscreen : true,
	exitOnClose : true,
	navBarHidden : true,
	backgroundColor : '#000',

var card = Ti.UI.createView({
	height : Ti.UI.FILL,
	width : Ti.UI.FILL,
	top : 0,
	left : 0,
	backgroundImage : 'KS_nav_ui.png'

var splash = Ti.UI.createView({
	height : Ti.UI.Fill,
	width : Ti.UI.FILL,
	backgroundImage : 'KS_nav_views.png',
	zIndex : 100,
	top : 0,
	left : 0

var closeSplash = function() {
		opacity : 0,
		duration : 750
	}, function() {
		splash = null;
	timer = null;

var timer = setTimeout(closeSplash, 5000);


  1. Ingo Muschenetz 2012-11-28

    Itay, can you please provide sample code?
  2. Itay Avtalyon 2012-11-28

    var mainWindow = Ti.UI.createWindow({ height: Ti.UI.FILL, width: Ti.UI.FILL, fullscreen: true, exitOnClose: true, navBarHidden: true, backgroundColor: '#000', }); var card = Ti.UI.createView({ height: Ti.UI.FILL, width: Ti.UI.FILL, top: 0, left: 0, backgroundImage: '/images/card/background.png' }); mainWindow.add(card); var splash = Ti.UI.createView({ height: Ti.UI.Fill, width: Ti.UI.FILL, backgroundImage: '/images/card/splash.png', zIndex: 100, top: 0, left: 0 }); mainWindow.add(splash); var closeSplash = function () { self.animate({ opacity: 0, duration: 750 }, function () { self.fireEvent('splash:close'); }); clearTimeout(timer); timer = null; }; var timer = setTimeout(closeSplash, 5000); -------------------------------------------------- That's pretty much the code I used. The more I work on this project, I think it could have something to do with the emulator. I tried the same code with the iPhone simulator so I know there are no major errors there. The app on the emulator keeps on crashing for some reason, so it may have something to do with the emulator on my machine (different variation of the code above where one the images is gone doesn't crash the app).
  3. Daniel Sefton 2012-11-28

    Almost there... What do you have defined as "self"?
  4. Itay Avtalyon 2012-11-28

    Ooops.... Sorry! self refers to the splash view. In the original code both views are Common.js modules, but only the splash view animates. The event handler at the end of the animation executes the following commands: var closeSplash = function () { mainWindow.remove(splash); splash.removeEventListener('splash:close', closeSplash); splash = null; };
  5. Daniel Sefton 2012-11-28

    I cannot reproduce this on Samsung Galaxy S2 2.3.6 TiSDK 2.1.2 GA, 2.1.3 GA, 2.1.4 GA or 3.0 CI. Please state your TiSDK version, Android version and whether it's the device and/or simulator. Can you try the code I added under test case?
  6. Itay Avtalyon 2012-11-29

    I tried the test case in a new project and tested in the emulator and it worked (Titanuim SDK 3.1 build from source (a while back). The errors I got were in the emulator. Only later when I relaize that the app on the emulator crashes a lot and for no apparent reason, I got a Samsung Galaxy 1 and to test on it and things started to work and not crash. Perhaps something is wrong the the project/emulator itself?

JSON Source