Using Flexbox in Titanium for Responsive UI

Problem: Fixed‑Coordinate UI Breaks on Different Devices

\n

When you hard‑code left, top, width and height in Titanium, a layout that looks good on a 4‑inch phone can collapse on a 10‑inch tablet or flip when the device rotates. The core issue is that the UI is tied to absolute pixel values rather than to the available screen space.

\n

Solution: Enable Flexbox on the Parent Container

\n

To make the interface adapt, set the container’s layout property to 'flex'. Once Flexbox is active, each child can declare how it should grow, shrink or align relative to its siblings.

\n

Key Flexbox Properties in Titanium

\n\n\n\n\n\n\n\n\n\n\n\n

Property	Purpose	Typical Values
flexDirection	Primary axis (row or column)	'row', 'column'
flex	Weight for growth or shrinkage	Positive integer
justifyContent	Distribution along primary axis	'flex-start', 'center', 'space-between'
alignItems	Alignment along cross axis	'flex-start', 'center', 'stretch'
flexShrink	Allows a child to shrink when space is limited	0 or 1

\n

Worked Example: Two‑Column Layout That Stays Balanced

\n

Below is a minimal script that creates a window with a header, a two‑column content area, and a footer. Both columns grow equally and stay within the viewport on every device.

\n

// Run this in a Titanium project\nvar win = Ti.UI.createWindow({\n    backgroundColor: "#fff",\n    layout: "vertical"\n});\n\nvar header = Ti.UI.createView({\n    height: 60,\n    backgroundColor: "#444",\n    layout: "horizontal",\n    justifyContent: "center",\n    alignItems: "center"\n});\nheader.add(Ti.UI.createLabel({text: "Header", color: "#fff"}));\n\nvar content = Ti.UI.createView({\n    layout: "flex",\n    flexDirection: "row",\n    flex: 1\n});\n\nvar leftCol = Ti.UI.createView({\n    flex: 1,\n    backgroundColor: "#e0e0e0",\n    justifyContent: "center",\n    alignItems: "center"\n});\nleftCol.add(Ti.UI.createLabel({text: "Left"}));\n\nvar rightCol = Ti.UI.createView({\n    flex: 1,\n    backgroundColor: "#c0c0c0",\n    justifyContent: "center",\n    alignItems: "center"\n});\nrightCol.add(Ti.UI.createLabel({text: "Right"}));\n\ncontent.add(leftCol);\ncontent.add(rightCol);\n\nvar footer = Ti.UI.createView({\n    height: 40,\n    backgroundColor: "#444",\n    layout: "horizontal",\n    justifyContent: "center",\n    alignItems: "center"\n});\nfooter.add(Ti.UI.createLabel({text: "Footer", color: "#fff"}));\n\nwin.add(header);\nwin.add(content);\nwin.add(footer);\nwin.open();\n

\n

Testing the Result

\n

\n
1. Deploy the app to both an iPhone simulator and an Android emulator.
\n
2. Rotate the devices to portrait and landscape.
\n
3. Open the Titanium Debugger, navigate to the content view, and verify that calculatedWidth and calculatedHeight adjust correctly.
\n

\n

Common Pitfalls and Limits

\n

\n
• Nesting Depth: Every flex container adds a layout pass. Three or more levels can noticeably slow rendering on older Android phones.
\n
• Absolute vs. Flex: Mixing left or top with layout:'flex' on the same element causes the engine to ignore the absolute values, leading to unpredictable placement.
\n
• SDK Version: Flexbox support is stable from SDK 5.5 onward, but older releases may misinterpret justifyContent values on Android.
\n

\n

Rollback Strategy

\n

If a Flexbox change breaks the UI, remove the layout:'flex' declaration and replace flex properties with explicit width and height calculated via Ti.Platform.displayCaps.platformWidth and platformHeight.