Appcelerator ImageView, changing image on android blinks / flickers

Question

I have 20 images which I cycle through to show a fitness exercise. When updating the image (ie going from frame 1 to frame 2) the entire imageView blinks. This only happens on Android, on iOS it works fine.

Here is a video of it happening https://youtu.be/-CufuQErQ58 This is on emulator but its also happening on all android devices i've tested on.

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.

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')>=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 > 0) { imgCount--; }
        else { imgCount = 19; };
        SS.log("imgCount: " + imgCount);
        updateImages();

    }

    function goToNext() { 
        if (imgCount < 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') >=0) { 
            imageView.height = '45%';
            imageView.borderWidth = 8;
            imageView.borderRadius = 12;
        }

        else { 
            imageView.height = '65%';
            imageView.borderWidth = 4;
            imageView.borderRadius = 6;
        }


        return imageView;
};

EDIT

So after a bit more digging I found this article - http://docs.appcelerator.com/platform/latest/#!/guide/Image_Best_Practices

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.

Answer 1

Add a view (container-view) around the imageview and do something like this:

• add another view with the new image to the container-view
• once the image is loaded remove the imageview at level 0 from the container-view

you can even fade the new image in so it looks even nicer

XML

<View id="container"></View>

JS

// first image
var img = Ti.UI.createImageView();
$.container.add(img);

function changeImage(){
  // changing images and remove the old one
  var img = Ti.UI.createImageView();
  $.container.add(img);
  $.container.remove($.container.getChildren()[0]); // or fade out
}