Skip to end of metadata
Go to start of metadata

This page discusses how to implement different custom cell templates and apply it according to the index of the table. For example, you can create a stylish list with different background colors based on even and odd indexes. With the new cell template selector API, you can now easily add as many custom cell as you want which can be seamlessly manipulated from the ViewController and Activity. This eliminates the need to redraw the layout/styles which may introduce performance overhead.

The cell template selector is a very useful API to create a compelling application design that address many business scenarios. One of the best scenarios that would fit this approach is a simple messaging application. To learn more about Custom Table Cell, see this article: Customizing Cell Styles.


Applies to:

  • Crosslight 4.1 or higher

On this page:

Using CellTemplateSelector in iOS

To add CellTemplateSelector inside your TableViewController, first you need to change your cell styles to Custom:


Remember to prepare your custom cell templates first, please read this article to see how to make one: Create Custom Cell Template for iOS UITableView.

In this example, we will be using two types of custom cell templates, the first to show the left detail, and another to show the right detail.

Next you can easily add new UIViewTemplateSelector object in OnViewIntialized where you can specify name of cell template and conditional it based on index and item's data. Here's an example how to implement it.


After saving all the changes, you should see the result similar to the following image.

Using CellTemplateSelector in Android

Similar to iOS, to add CellTemplateSelector inside your ListActivity, you can easily add new ViewTemplateSelector object in OnViewInitialized, inside the method you can specify name of cell template and the conditions based on the index and item's data. The only difference is you don't need to specify your cell styles, but instead you have to provide your custom AXML layout for the alternating styles.


Here is the code:


After saving all the changes, you should see the result similar to the following image.


The sample code for this article can be downloaded from our Git server: