Platform-Specific Styles in Titanium Alloy Without Duplicate Views

A button sits too high on Android but looks right on iOS. You are building a cross-platform app with Titanium SDK and Alloy, the official MVC framework bundled with Titanium that compiles XML views, TSS stylesheets, and JavaScript controllers into Titanium classes at build time. The tempting fix is to copy the entire view into an Android-specific folder and maintain two copies forever. A better approach is to keep one shared view and override styles in platform-specific stylesheet folders.

The practical takeaway: use Alloy’s platform-specific TSS folders for visual differences, keep structural markup in a single view, and always inspect the generated output under app/alloy after changing styles.

How Alloy Organizes Platform Styles

Alloy separates interface markup from logic. Views live in app/views as XML, styles live in app/styles as TSS (Titanium Style Sheets), and controllers live in app/controllers as JavaScript. During compilation, the Alloy compiler reads these files and emits Titanium source code under app/alloy, which the Titanium CLI then packages into native binaries.

For platform differences, Alloy supports OS-specific folders such as app/styles/iphone and app/styles/android. Styles placed in app/styles/iphone apply only when building for iOS; styles in app/styles/android apply only for Android. Shared styles belong in app/styles without a platform subfolder.

Worked Example: Button Spacing and Color by Platform

Suppose app/views/index.xml defines one button:

<Alloy>
  <Window>
    <Button id="saveButton" title="Save" />
  </Window>
</Alloy>

The shared style in app/styles/index.tss sets the size:

"#saveButton": {
  width: 200,
  height: 50
}

To move the button and change its color only on iOS, create app/styles/iphone/index.tss:

"#saveButton": {
  backgroundColor: "#007AFF",
  top: 20
}

For Android, create app/styles/android/index.tss:

"#saveButton": {
  backgroundColor: "#6200EE",
  top: 16
}

Run the build from the project root. You need the Titanium CLI and Alloy CLI installed; no elevated permissions are required for a local build.

ti build -p ios
# or
ti build -p android

Expected check: the build completes and installs to the simulator or connected device. The button should use the iOS values when building for iOS and the Android values when building for Android. If the button still shows the shared style, the platform stylesheet may not have been recompiled.

Verify What the Compiler Generated

Because Alloy adds a compilation layer, the file you edit is not the file that runs. After editing TSS, inspect app/alloy to confirm the compiler regenerated the controller and style output.

ls app/alloy
ls app/alloy/styles

You should see generated files corresponding to your views and styles. If app/alloy is missing or stale, run ti info to confirm the installed Titanium SDK version, then clean and rebuild. Do not assume a style change took effect just because you saved the TSS file.

Risks: editing app/alloy directly is pointless because the compiler overwrites it. Always edit the source in app/views, app/styles, or app/controllers. Also, older Alloy widgets may not support recent Titanium SDK releases, so check widget compatibility before upgrading.

Trade-Off: Debugging Through Generated Code

The main limitation is that stack traces and runtime errors often point to generated Titanium code in app/alloy rather than your original TSS or controller. When an error occurs, you may need to map the generated line back to your source file manually. This makes Alloy less transparent than plain Titanium for small apps where an MVC layer adds little value.

A practical way to check the result: build both platforms, interact with the styled element on each, and compare against the values in your platform TSS files. If they match, the platform split is working. If they diverge, inspect app/alloy and the build log before changing the source again.

Closing Checklist

• Keep one shared view in app/views unless the structure differs by platform.
• Put visual overrides in app/styles/iphone or app/styles/android.
• Run ti info before SDK upgrades and note the version in tiapp.xml.
• Inspect app/alloy after TSS changes to confirm regeneration.
• Never edit generated files under app/alloy directly.

Platform-specific stylesheets let you handle iOS and Android differences without duplicating views. Treat the app/alloy folder as build output, verify it after each style change, and you can maintain one codebase for both platforms without the maintenance burden of parallel views.