Titanium: I Got 99 Problems and a Grid Ain’t 1

A Grid View is pretty common in many applications nowadays, displaying images or a variety of image and text content to the user in repeated pattern cells in a vertical and horizontal layout. This component is highly favored over List Views and Table Views when wanting to compare similar data types as well as having a better visual comprehension that helps to distinguish the subsets of items.

However, when it comes to Titanium, they don’t have any reference to a Grid View. So what does that mean for our image-heavy applications that would like to display a list of images? You could use a list view if you are able to supply enough information that would allow the user to easily read and comprehend the list. But, if you have limited data or none at all it would be more visually appealing to display a Grid View. Which brings us back to the problem at hand, Titanium does not have any reference to a Grid View.

Let us explore our options:

Option 1:

If you know that your data won’t change you could just do some calculations to disperse your views across the screen in the XML. This would be good for navigation where each button would have separate functionality when clicked.

    <Window layout="horizontal" horizontalWrap="true" backgroundColor="white">
        <Button width="50%" height="50%" title="TopLeft"/>
        <Button width="50%" height="50%" title="TopRight"/>
        <Button width="50%" height="50%" title="BottomLeft"/>
        <Button width="50%" height="50%" title="BottomRight"/>


However, this may get a bit messy and annoying when you have to calculate for up to 20 or more views. Which brings us to

Option 2:

Let’s create a Grid View that has three columns and four rows.

// to fit in a 320-wide space 
var cellWidth = 92;
var cellHeight = 92;
var padding = 5; // padding between cells
var xGrid = 3; // how many cells wide
var yGrid = 4; // how many cells tall

 * This will create a 3 x 4 gridview of 12 images
 * you can do some math to determine how many rows will be needed for your data set

var tableData = [];

// array of team objects
var teams = [
    {name : 'Dragons', logo : '/images/dragon.png'}
    {name : 'Tigers', logo : '/images/tiger.png'},
    {name : 'Foxes', logo : '/images/fox.png'},
    {name : 'Dare Devils', logo : '/images/dare_devil.png'},
    {name : 'Cyclones', logo : '/images/cyclone.png'},
    {name : 'Majors', logo : '/images/major.png'},
    {name : 'Hawks', logo : '/images/hawk.png'},
    {name : 'Stallions', logo : '/images/stallion.png'}.
    {name : 'Knights', logo : '/images/knight.png'},
    {name : 'Pirates', logo : '/images/pirate.png'},
    {name : 'Crusaders', logo : '/images/crusader.png'},
    {name : 'Wolves', logo : '/images/wolf.png'},

var cellIndex = 0;


for (var y=0; y < yGrid; y++){

    var row = Ti.UI.createTableViewRow({
        className : "grid",
        layout : "horizontal",
        height : cellHeight + padding,
        selectedBackgroundColor : 'white'

    for (var x=0; x < xGrid; x++){
        // the cell that will hold the logo and the team name
        var view = Ti.UI.createView({
            teamID : teams[cellIndex].name + cellIndex.toString()
            left : padding,
            right : padding,
            height : cellHeight,
            width : cellWidth
        // image of the logo of the team
        var teamLogo = Ti.createImageView({
            image : teams[cellIndex].logo,
            teamID : teams[cellIndex].name + cellIndex.toString()
        // label of the team's name
        var teamName = Ti.UI.createLabel({
            font : {
            text : teams[cellIndex].name,
            touchEnabled : false,
            teamID : teams[cellIndex].name + cellIndex.toString()




var tableview = Ti.UI.createTableView({
    data : tableData

tableview.addEventListener("click", function(e){
    //teamId property set for each view will determine what view was clicked in the table
        Ti.API.info('Clicked: ' + e.source.teamID);

This option gives us a very faux Grid View by using Table View as a crutch by populating each row with several cells. This is a good option and simply by doing some math to determine the number of rows you’d need for your data set you can make this very flexible to allow for an undetermined data length. However, a problem with this approach is that a user may notice that the entire row shows feedback for being selected. This can be avoided by substituting the Table view for a Scroll View and instead of using Table Rows, just use a View that spans the entire width and adds the cell View accordingly.

Option 3:

Simply use a module. There are several good modules out there that not only make it very easy to add a grid to your project but they also add a lot of extra cool features to the Grid View like TiCollectionView and TiFlexiGrid

There are plenty of other ways to create a Grid View that isn’t mentioned above. Titanium allows for an immense of other possibilities for creating a Grid View and the only thing that you need is imagination and some problem-solving skills. So even though Titanium lacks a simple way to incorporate a Grid View within your app, that does not mean you can’t Jimmy Rig your own.

Shae Hazelwood

Shae Hazelwood

September 19, 2016

Shae is a mobile developer with a passion for producing business-focused applications and strategy-based mobile development. What began with home-grown app prototypes has turned into a career at Shockoe focused on Titanium and Android development as well as considering market deployment practices. When he’s not deep in code, Shae spends his time playing video games and listening to Hip Hop.

More like this delivered right to you:

Sign up for our Newsletter to get our latest posts plus invitations to our events and access to future whitepapers.

Related Posts

Seeing the Member Experience in a “User-Experience” World

Seeing the Member Experience in a “User-Experience” World

In the world of product development, we are often always saying “user” _______. User-centered design, user analytics, user personas, user journeys, etc, etc.It’s a term that holds importance because it is a genuine focus on the end-user experience.  It’s also often...

7 Tips for Utilizing Amazon Alexa to Engage with Customers

7 Tips for Utilizing Amazon Alexa to Engage with Customers

Amazon first released Alexa virtual assistant and smart speaker Echo in late 2014. An in-home virtual assistant is an impressive tool, but creating a seamless user experience with it can be a challenge. So how do companies overcome this challenge? What engagement can...

Ready to drop us a line?