Appcelerator ImageView, changing image on android blinks / flickers <p>I have 20 images which I cycle through to show a fitness exercise. When updating the image (i.e going from frame 1 to frame 2) the entire imageView blinks. This only happens on Android, on iOS it works fine. </p> <p>Here is a video of it happening <a href="https://youtu.be/-CufuQErQ58" rel="nofollow">https://youtu.be/-CufuQErQ58</a> This is on emulator but its also happening on all android devices i've tested on. </p> <p>I tried changing the imageView to just a view with a backgroundImage, and this works without blinking however it runs very slowly and uses a lot more memory and often crashes.</p> <pre><code>exports.imagesWindow = function(exercise, noOfImages) { var win = new SS.ui.win('landscape'); var imgCount = 0; var header = new SS.ui.view(win, '10%', '100%'); header.top = 0; header.visible = true; header.backgroundColor = SS.ui.colors[0]; var cueText = new SS.ui.normalLabel(header, "some text", 7); cueText.color = 'white'; //var imgLeft = new SS.ui.responsiveImage({container:win, top:'10%', left:'2%', height: '75%', width: '30%', zoom: 0.3}); //var imgCenter = new SS.ui.responsiveImage({container:win, top: '10%', left: '35%', height: '75%', width: '30%', zoom: 0.3}); //var imgRight = new SS.ui.responsiveImage({container:win, top:'10%', left: '68%', height:'75%', width:'30%', zoom: 0.3}); if (noOfImages === 3) { imgLeft = new ImagePanel(win, '17%'); imgCenter = new ImagePanel(win, '50%'); imgRight = new ImagePanel(win, '83%'); } else { imgLeft = new ImagePanel(win, '30%'); imgRight = new ImagePanel(win, '70%'); } function updateImages() { cueText.text = (eval(exercise + "Cues"))[imgCount]; instructionNumber.text = (imgCount+1) + "/20"; if (noOfImages === 3) { imgLeft.image = '/images/instructionImages/' + exercise + "/" + exercise + '_front_' + imgCount + '.jpg'; imgCenter.image = '/images/instructionImages/' + exercise + "/" + exercise + '_side_' + imgCount + '.jpg'; imgRight.image = '/images/instructionImages/' + exercise + "/" + exercise + '_back_' + imgCount + '.jpg'; //SS.log("image updated: " + imgLeft.image + " " + imgCenter.image + " " + imgRight.image); } else { imgLeft.image = '/images/instructionImages/' + exercise + "/" + exercise + '_front_' + imgCount + '.jpg'; imgRight.image = '/images/instructionImages/' + exercise + "/" + exercise + '_side_' + imgCount + '.jpg'; } } //view.add(win); var homeView = new SS.ui.view(win, '12%', '30%'); homeView.center = {x: '5%', y: '92%'}; homeView.visible = true; var home = new SS.ui.dateButton(homeView, 'footer/home'); home.addEventListener('click', function(){ if (start){ clearInterval(start); }; win.close(); }); var footerView = new SS.ui.view(win, '12%', '30%'); footerView.center = {x: '50%', y: '92%'}; footerView.visible = true; var prevImg = new SS.ui.dateButton(footerView, 'footer/prevFrame'); prevImg.left = 0; //prevImg.height = Ti.UI.SIZE;prevImg.width = Ti.UI.SIZE; prevImg.addEventListener('click', goToPrev); var nextImg = new SS.ui.dateButton(footerView, 'footer/nextFrame'); //nextImg.height = Ti.UI.SIZE; nextImg.width = Ti.UI.SIZE; nextImg.addEventListener('click', goToNext); nextImg.right = 0; var stopPlayBtn = new SS.ui.dateButton(footerView, 'footer/playVideo'); //stopPlayBtn.height = Ti.UI.SIZE;stopPlayBtn.width = Ti.UI.SIZE; stopPlayBtn.addEventListener('click', stopPlay); var numberView = new SS.ui.view(win, '12%', '30%'); numberView.center = {x: '95%', y: '92%'}; numberView.visible = true; var instructionNumber = new SS.ui.normalLabel(numberView, (imgCount+1) + "/20", 5); updateImages(); var start; function stopPlay() { // start videos if (stopPlayBtn.image.indexOf('play')&gt;=0) { cueText.visible = false; start = setInterval(goToNext, 200); stopPlayBtn.image = '/images/footer/stopVideo.png';} // stop vidoes else { clearInterval(start); cueText.visible = true; stopPlayBtn.image = '/images/footer/playVideo.png'; } } function goToPrev() { if (imgCount &gt; 0) { imgCount--; } else { imgCount = 19; }; SS.log("imgCount: " + imgCount); updateImages(); } function goToNext() { if (imgCount &lt; 19) { imgCount++; } else { imgCount = 0; }; SS.log("imgCount: " + imgCount); updateImages(); } return win; }; var ImagePanel = function(viewToAdd, cX) { var imageView = Ti.UI.createImageView({ width: '30%', borderColor: 'white', center: {x: cX, y: '50%'} }); viewToAdd.add(imageView); //resize for tablets if(Ti.Platform.osname.indexOf('ipad') &gt;=0) { imageView.height = '45%'; imageView.borderWidth = 8; imageView.borderRadius = 12; } else { imageView.height = '65%'; imageView.borderWidth = 4; imageView.borderRadius = 6; } return imageView; }; </code></pre> <p>EDIT</p> <p>So after a bit more digging I found this article - <a href="http://docs.appcelerator.com/platform/latest/#!/guide/Image_Best_Practices" rel="nofollow">http://docs.appcelerator.com/platform/latest/#!/guide/Image_Best_Practices</a></p> <p>It seems on android that the image size is the limiting factor, and reducing the size of the images helped fix this, although it still blinks on the first cycle of images.</p>