UI not completely populating on Android Emulator

So, I am working on this little weather app as an assignment for my class. We are using Titanium to do our work right now. The problem is that the app won't load into an android emulator properly. It will only display the first view that is attached to the window.

Here is my code:

// the exported function that build the UI
exports.build = function(weather) {

// setting variables based on the actual device height and width
var deviceHeight = Ti.Platform.displayCaps.platformHeight;
var deviceWidth = Ti.Platform.displayCaps.platformWidth;

// the main window for the UI
var mainWindow = Ti.UI.createWindow({
    backgroundColor: "#fff",
    layout: "horizontal"
});

// the title view
var appTitleView = Ti.UI.createView({
    top: 0,
    height: 60,
    backgroundColor: "#f5f5f5"      
});

// the actual title for the app
var appTitle = Ti.UI.createLabel({
    text: "Lightning Weather",
    textAlign: "center",
    font: {fontFamily: "Verdana", fontSize: "24", fontWeight: "Bold"},
    width: deviceWidth,
    height: 40,
    top: 20
});

// the label for the refresh link
var reloadPageLink = Ti.UI.createLabel({
    text: "Please tap to get most current weather data",
    color: "orange",
    textAlign: "center",
    font: {fontFamily: "Verdana", fontSize: "18", fontWeight: "Bold"},
    height: 60,
    bottom: 0,
    width: deviceWidth
});

// the scrollview for the actual content
// I went with this just incase there was a device that wouldn't be able to house everything on one screen
// this way the app is still able to be viewed in it's entirety
var windowScrollView = Ti.UI.createScrollView({
    height: deviceHeight - appTitleView.height - reloadPageLink.height, // setting the height based on the two static aspects
    layout: "horizontal",
    width: deviceWidth,
    contentWidth: deviceWidth,
    showVerticalScrollIndicator: true,
    top: 0
});

// the container for the current conditions
var currentConditionsBox = Ti.UI.createView({
    width: deviceWidth,
    layout: "horizontal",
    top: 30,
    height: Ti.UI.SIZE // setting the height of the container to the actual content inside of it
});

// the container that allows me to center the icon for the current conditions
var currentConditionsIconContainer = Ti.UI.createView({
    width: deviceWidth,
    height: Ti.UI.SIZE
});

// the current conditions icon
var currentConditionsIcon = Ti.UI.createImageView({
    image: weather.currentIcon,
    align: "center"
});

// the current temp
var currentTemp = Ti.UI.createLabel({
    width: deviceWidth,
    textAlign: "center",
    font: {fontFamily: "Verdana", fontSize: "36", fontWeight: "Bold"},
    text: weather.temperature + "\u00b0 F"
});

// the current location
var currentLocation = Ti.UI.createLabel({
    width: deviceWidth,
    textAlign: "center",
    text: weather.location,
    font: {fontFamily: "Verdana", fontSize: "24"}
});

// the label that titles the forecast
var forecastText = Ti.UI.createLabel({
    text: "Forecast:",
    textAlign: "center",
    width: deviceWidth,
    top: 100,
    font: {fontFamily: "Verdana", fontSize: "24", fontWeight: "Bold"}
});

// the parent container for the forecast UI
var forecastBox = Ti.UI.createView({
    top: 10,
    width: deviceWidth,
    layout: "horizontal",
    height: Ti.UI.SIZE
});

// the next for containers are child containers to the forecastBox, this enables easy setup for a clean look
var dayZeroBox = Ti.UI.createView({
    top: 0,
    width: "25%"
});

var dayOneBox = Ti.UI.createView({
    top: 0,
    width: "25%"
});

var dayTwoBox = Ti.UI.createView({
    top: 0,
    width: "25%"
});

var dayThreeBox = Ti.UI.createView({
    top: 0,
    width: "25%"
});

// here are the contents for all of the child forecast containers
var dayZeroName = Ti.UI.createLabel({
    text: "Today",
    top: 10,
    textAlign: "center"
});

var dayZeroIcon = Ti.UI.createImageView({
    image: weather.day0Icon,
    top: 30,
    align: "center"
});

var dayZeroHiLo = Ti.UI.createLabel({
    text: weather.high + "\u00b0 F / " + weather.low + "\u00b0 F",
    top: 80,
    textAlign: "center"
});

var dayOneName = Ti.UI.createLabel({
    text: weather.day1,
    top: 10,
    textAlign: "center"
});

var dayOneIcon = Ti.UI.createImageView({
    image: weather.day1Icon,
    top: 30,
    align: "center"
});

var dayOneHiLo = Ti.UI.createLabel({
    text: weather.day1Hi + "\u00b0 F / " + weather.day1Lo + "\u00b0 F",
    top: 80,
    textAlign: "center"
});

var dayTwoName = Ti.UI.createLabel({
    text: weather.day2,
    top: 10,
    textAlign: "center"
});

var dayTwoIcon = Ti.UI.createImageView({
    image: weather.day2Icon,
    top: 30,
    align: "center"
});

var dayTwoHiLo = Ti.UI.createLabel({
    text: weather.day2Hi + "\u00b0 F / " + weather.day2Lo + "\u00b0 F",
    top: 80,
    textAlign: "center"
});

var dayThreeName = Ti.UI.createLabel({
    text: weather.day3,
    top: 10,
    textAlign: "center"
});

var dayThreeIcon = Ti.UI.createImageView({
    image: weather.day3Icon,
    top: 30,
    align: "center"
});

var dayThreeHiLo = Ti.UI.createLabel({
    text: weather.day3Hi + "\u00b0 F / " + weather.day3Lo + "\u00b0 F",
    top: 80,
    textAlign: "center"
});
// end child container contents

// the function that will refresh the page and pull a new location and weather information
var reloadPage = function() {
    if (Ti.Network.online) {
        var loc = require("loc");
        loc.getLocation();
    } else {
        alert("You are not online.");
    };
};

// populating the UI
reloadPageLink.addEventListener("click", reloadPage);
appTitleView.add(appTitle);
currentConditionsIconContainer.add(currentConditionsIcon);
currentConditionsBox.add(currentConditionsIconContainer, currentTemp, currentLocation);
dayZeroBox.add(dayZeroName, dayZeroIcon, dayZeroHiLo);
dayOneBox.add(dayOneName, dayOneIcon, dayOneHiLo);
dayTwoBox.add(dayTwoName, dayTwoIcon, dayTwoHiLo);
dayThreeBox.add(dayThreeName, dayThreeIcon, dayThreeHiLo);
forecastBox.add(dayZeroBox, dayOneBox, dayTwoBox, dayThreeBox);
windowScrollView.add(currentConditionsBox, forecastText, forecastBox);
mainWindow.add(appTitleView, windowScrollView, reloadPageLink);
mainWindow.open();
};

Here is what it looks like on the emulator:

enter image description here

What am I doing wrong that is causing the entire UI to not populate?

Thank you!

Solution

Your main window layout is horizontal.

Try changing that to 'vertical'.

The second thing I've noticed is that you're trying to add several views to the parent view at the same time. According to the spec you have to add one view at a time.

so change your code to something like this:

mainWindow.add(appTitleView);
mainWindow.add(windowScrollView);
mainWindow.add(reloadPageLink);