Question

I am currently making a module, which does the hard work for you with scrollviews. When I run this code on the iPhone simulator, it’s perfect – no bugs. On the android emulator, I just see a blank screen?

Why do I only see a blank screen, and how do I fix it?
Here is my code:

window = Ti.UI.createWindow({
    backgroundColor : 'white'
});

function SuperScrollView(window) {
    this.scrollview = Ti.UI.createScrollView({
        showVerticalScrollIndicator : true,
        height : window.height,
        width : window.width,
        contentHeight : 'auto'
    });
    this.view = Ti.UI.createView({
        height : 0,
        width : window.width
    });
    this.addElement = function(element) {
        var height = this.view.height;
        var elementHeight = element.height;
        element.top = height;
        this.view.add(element);
        this.view.height += elementHeight;
        height = this.view.height;
        this.scrollview.contentHeight = height;
        alert(height);
    }
    this.scrollview.add(this.view);
    window.add(this.scrollview);
}

var scrollview = new SuperScrollView(window);
scrollview.addElement(Ti.UI.createView({
    width : 200,
    height : 500,
    backgroundColor : 'blue'
}));

window.open();

Answer 1

The problem is that you’re relying on window.width and window.height, and these evaluate to 0 on Android (whereas they work fine on iOS). This results in your view not having any size. It’s better to use Ti.Platform.displayCaps.platformWidth and Ti.Platform.displayCaps.platformHeight to get the dimensions of the screen. You’ll need to be aware that this will be different on each platform, and size your views accordingly, but then you’d always have that problem.

I’ve altered your code slightly so you can see it in action on both platforms.

window = Ti.UI.createWindow({
    backgroundColor : 'white'
});

function SuperScrollView(window) {
    this.scrollview = Ti.UI.createScrollView({
        showVerticalScrollIndicator : true,
        height : Ti.Platform.displayCaps.platformHeight,
        width : Ti.Platform.displayCaps.platformWidth,
        contentHeight : 'auto'
    });
    this.view = Ti.UI.createView({
        height : 0,
        width : Ti.Platform.displayCaps.platformWidth
    });
    this.addElement = function(element) {
        var height = this.view.height;
        var elementHeight = element.height;
        element.top = height;
        this.view.add(element);
        this.view.height += elementHeight;
        height = this.view.height;
        this.scrollview.contentHeight = height;
        alert(height);
    }
    this.scrollview.add(this.view);
    window.add(this.scrollview);
}

var scrollview = new SuperScrollView(window);
scrollview.addElement(Ti.UI.createView({
    width : 200,
    height : Ti.Platform.displayCaps.platformHeight + 500,
    backgroundColor : 'blue'
}));

window.open();

EDIT: The other thing you can do is wait until the window had opened, and then add the scrollview to it once the width and height have been evaluated:

window = Ti.UI.createWindow({
    backgroundColor : 'white'
});

function SuperScrollView(window) {
    this.scrollview = Ti.UI.createScrollView({
        showVerticalScrollIndicator : true,
        height : window.height,
        width : window.width,
        contentHeight : 'auto'
    });
    this.view = Ti.UI.createView({
        height : 0,
        width : window.width
    });
    this.addElement = function(element) {
        var height = this.view.height;
        var elementHeight = element.height;
        element.top = height;
        this.view.add(element);
        this.view.height += elementHeight;
        height = this.view.height;
        this.scrollview.contentHeight = height;
        alert(height);
    }
    this.scrollview.add(this.view);
    window.add(this.scrollview);
}


window.open();

window.addEventListener('open', function(){
    var scrollview = new SuperScrollView(window);
    scrollview.addElement(Ti.UI.createView({
        width : 200,
        height : window.height + 500,
        backgroundColor : 'blue'
    }));

});