Cell

Cells are one of the foundational building blocks of our mobile apps. They can either exist as single elements or as a group of items.

Anatomy

Single Cell

A Cell always works as a navigational item, that either leads to a detail page or to another list of options, which can be presented in the form of cells again.

Rules For Android

The base layout is Cell, which has the basic layout with start and end content. Only use it for custom cells.
BasicCell supports most of the following use cases.
Both can be found in BasicCells.kt

Grouped Cells

Cells in a Grouped View must share similar properties, for example, if one cell of the group has a leading icon enabled, all of the cells need to make use of that property.

In addition, on iOS the cells of a group are separated by a thin divider. The divider is always aligned with the position of the Label, not with the leading icon. Android doesn’t use dividers in Simple Cell Groups.

Rules For Android

Use ContentGroup

Cell Group Header

There are two different Headers that can be enabled for any Cell Group: Section & Title.

Sections use a smaller font size and the section headline is aligned with the position of the labels in the cells. They can have an additional element on the right side to show the aggregated sum of the sections’ group.

Titles use a bigger font size and the headline is aligned with the container of the section. They can have an additional “action” element to their right, which can either be an icon or a text label.

Rules For Android

Use parameter sectionText and sectionTextStye on ContentGroup
Style can be SectionHeaderTextStyle.Title or SectionHeaderTextStyle.Default
For headers in a lazy list use ListSectionHeader in SectionHeader.kt

Tokens

Element	Token
group section	`color.text.primary`
group title	`color.text.primary`
section sum	`color.text.secondary`
title action	`color.state.active`
title icon	`color.state.active`

Cell Group Footer

The Footer of a cell group is a simple text element that can be styled in three different variants: default, info and error.

Rules For Android

Use FooterText
These styles are supported: FooterType.DEFAULT, FooterType.ERROR and FooterType.INFO

Tokens

Element	Token
footer default	`color.text.secondary`
footer info	`color.state.info`
footer error	`color.state.negative`

Cells vs. Cards

While Cards can be used as well to present content and to link to detail pages of the summarised content, they are never grouped in a list, instead they are always to be used as single, stand-alone items.

Rules For Android

For Cards use Material 3 Card.
See in Material 3 Spec
See code documentation

Basic Cell

This type of cell is the most common one, and is found in many views of George App.

Rules For Android

Use BasicCell

On iOS, a caret is shown at the very right to indicate that this item leads to a nested view. The indicator is omitted, if the cell can be interacted with on the same level (e.g. with a Icon- or Switch accessory)

Simple Cells have a limited set of properties:

Left Side Elements

Label
Mandatory property. Can be longer than 1 line, but should always be as short and precise as possible.

Rules For Android

Use parameter label in BasicCell

Icon
Optional property. Can be used to provide a visual identifier, to give a cell more prominence or to to make it easier to discover an item instead of relying on text alone.

Rules For Android

Use parameter iconPainter in BasicCell

Sub-Line
Optional property. Should be used to indicate a value that is set in the nested view, or to provide more explanation than the Label can provide.
Sub-Line cannot be used in combination with Top-Line.

Rules For Android

Use parameter additionalInfo in BasicCell

Top-Line
Optional property. Should be used like a “Key” in a typical Key-Value Pair.
Top-Line cannot be used in combination with Sub-Line.

Rules For Android

Set parameter toplineLabel in BasicCell to true to move the label to the top.
The value is the additionalInfo parameter.

Tokens

Element	Token
label	`color.text.primary`
icon	`color.fill.tertiary`
subline	`color.text.secondary`
topline	`color.text.secondary`

Right Side Elements

Action Icon
An icon that triggers an action directly from the cell - for example an info icon that opens up another view with additional information, or a delete icon that triggers a delete-action for the respective item.

Rules For Android

Use BasicTrailingIconCell in BasicCells.kt

Action Label
Similar to the icon, but instead of relying on the visual representation, a text-label is used. Keep in mind, that actions - just as the Labels of a Cell - should be as concise as possible.

Rules For Android

Consult with App GDS team.

Toggle / Switch
An element to change the status of a single item between two mutually exclusive states - like on/off or enabled/disabled.
In case there are multiple items that are related to each other, consider using a selection cell group instead.

Rules For Android

Use SwitchCell

Disclosed Value
Instead of using the Sub-Line, you can also use the Disclosed Value accessory to show a selected status or value from the nested view.

Rules For Android

Use a Text for the parameter endContent

Editable Value
Similar to the Action Label, but instead of showing a generic name for the action, it shows a value that is the result of the action. A typical example is when the action opens a Date Picker, and the cell shows the selected date with this property.

Rules For Android

Use a Text for the parameter endContent with color and make clickable.
Check for minimum size of the text.

Tokens

Element	Token
action icon	`color.text.primary`
action label	`color.fill.tertiary`
toggle / switch	multiple states defined inside of component
discl. value	`color.text.secondary`
editable value	`color.state.active`

Selection Cell

George uses the platform-specific native controls for both Single- and Multi-Select.
Selection Cells must always be used as a group, i.e. you always need to have at least 2 items.

Both platforms allow to position the selection element on either the left (leading) or on the right (trailing) end of the cell.

Single select

Use a single select group if the user is asked to choose a single item from a list of options, and if you want to expose all available options (as opposed to dropdown menus or pickers)

Android & iOS do not use the same styling for single selects. The former uses the familiar radio-button design, while the latter uses a checkmark.

Do not use a single select to toggle an option on or off - use the Switch Accessory instead.

If the selection of an item automatically triggers a consecutive step, consider using a list of simple cells instead.

Rules For Android

Use StartSingleSelectionCell or EndSingleSelectionCell depending on which side the radio button should be.
See SingleSelectionCell.kt

Multi select

Use a multi select group if the user is asked to choose one or more items from a list of options.

Both platforms use a checkbox to represent a multi select, but Android uses a square shape, and iOS uses a round shape with a checkmark inside.

Rules For Android

Use StartMultiSelectionCell or EndMultiSelectionCell depending on which side the checkbox should be.
See MultiSelectionCell.kt

Tokens

Element	Token
label	`color.text.primary`
unselected border	`color.fill.tertiary`
selected fill	`color.state.active`

Info Cell

While technically not cells - as they cannot be interacted with - we use a variant of the cell component to render lists of read-only content in George.

This element is often used to render simple, text based information that is sent as an array from the backend.

The information can be presented in a typical Key-Value pair, or as a single Value without a Key;

Rules For Android

Use InfoCell

Vertical

The default configuration of Info Cell - the Key-Value Pair is stacked vertically.

Rules For Android

Use InfoCellStyle.Vertical

Horizontal

The Key is positioned on the left side of the cell, and the corresponding Value on the right.
A special version that must only be used if it can be ensured that both strings are relatively short, and don’t clash with each other.

Rules For Android

Use InfoCellStyle.Horizontal

Tokens

Element	Token
key	`color.text.secondary`
value	`color.text.primary`

Confirmation Cell BETA

The confirmation cell should be used whenever users are asked to give their consent or agree to terms & conditions etc.
There are currently many different implementations of confirmation cells to be found across various flows & features in George, and the available Figma component doesn’t cover them all.

Rules For Android

Use ConfirmationCell

Custom Cell

A cell that does not fit into one of the three main categories (Basic, Selection, Info) is called Custom Cell. The structure and content varies a lot depending on the use case, but there are a few basic rules that everyone must follow when designing and implementing a Custom Cell.

All content should have a padding of 16pt to the left and right, and a padding of 8pt or more to the top & bottom
If an Avatar is used, it should always be the first element on the left
Stick to the defined semantic type styles to render content

In addition, there are Figma components for some of the most important Custom Cells available:

Rules For Android

Base your custom cell on the component Cell or consult with the GDS devs.

Transaction Cell
Transaction Cells are similar to the Order List cells, but also contain a transaction or personal finance manager (PFM) label.

Rules For Android

TransactionCell is used in transaction list.

Order List
Contains a punched image, a topline, a label, a subline and an amount.

Bill Payment
Contains a punched image and a label. This cell is only used in bill payment.

Addressbook
Contains a punched image, a label (account name) and a subline (amount number).