Our thinking

Titanium: remove Tableview separators on Android

21 October 2013

With Titanium, setting a Tableview separator color to transparent won’t result in the same rendering on iOS and Android:

  • iOS: separators won’t be displayed
  • Android: separators will be transparent and so let appear the layer or color underneath the table view

This is an issue when developing cross platform application since the same code won’t render the same thing. This problem can easily be fixed by setting the same background color to the window and the cells, but in the case where the cells background color varies, this won’t do the trick.

Here is an illustration of the problem:

var window = Ti.UI.createWindow({
    backgroundColor: "#262626",
    windowTitle: 'Legend',
    orientationModes: [Titanium.UI.PORTRAIT]
});
var tableView = Ti.UI.createTableView({
    top: 0,
    backgroundColor: colors.purple,
    separatorColor: "transparent"
});

IMG_0082  Screenshot_2013-10-17-13-04-39

On Android the table view separators are showing the window background color. Those separators can be removed by using the AndroidZeroTableviewSeparator Titanium plugin developed by Exygy.

var androidzerotableviewseparator = require('com.exygy.androidzerotableviewseparator');
androidzerotableviewseparator.hideTableRowSepartor(tableView);

Screenshot_2013-10-17-13-06-42

The source code and the module are available on Github or on the Titanium marketplace.