# Choose a layout

> Pick one of the five layouts for screens of categories and rows (the settings screen is one), switch layouts while the game runs, and arrange layouts and...

Product: Rolly Save 1.0.0 | Sheet: guide | Updated: 2026-10-31 | HTML: https://rolly-docs.pages.dev/save/guides/layouts/

## The five layouts

Every layout works with a gamepad, a keyboard, a mouse and touch, in split screen and at every interface size. Dialogs and key capture centre in the player's part of the screen (with the Side Drawer, in the drawer).

| Layout (id) | What it shows | Made for |
|---|---|---|
| Tabs (`Tabs`) | The title, tabs between the keys that switch them, the list, the detail panel at the right (a strip under the list below 1600 units wide), the prompts at the bottom | Most games, PC first; the default |
| Side Rail (`Rail`) | A rail of categories with their icons at the left, the list under the category's name, the detail at the right. Two levels: focus starts in the rail, Accept or Right opens the list, Back returns to the rail. On narrow areas the rail becomes a switcher over the list (one level) | Many categories, RPGs, strategy and management, 21:9 and 32:9 screens |
| Centered Panel (`Panel`) | An 880-unit card over the dimmed game, 85 % of the area's height and at most 820 units: the screen's name, a switcher with the category and position dots, the list, a detail strip and the prompts, all in the card | Small sets of rows, pause menus, split screen, casual and mobile games |
| Couch Hub (`Hub`) | Big tiles with each category's icon and a live summary of its values, then a page per category: an "All settings" link, the category's name with its position ("1 / 7") and keys at the end of its line (on a line of their own under it, at the list's right edge, on every page where the longest category name, the header's actions and they do not fit one line), the list, the focused row's preview picture in a column on wide areas (only in a category with pictures; the list takes the width otherwise), and a description band. Large density by default | Console, TV and Steam Deck play, touch tablets |
| Side Drawer (`Drawer`) | A 560-unit drawer at the right (or left: **Drawer Side**) of the screen over the running game: the switcher, rows with the control under the name, a detail strip, the prompts. The game keeps running and is not paused; the player's input goes to the drawer. It has one level, so its Back prompt reads **Close** and closes the drawer. In split screen it docks to the outer edge of the player's part of the screen | Games that never pause, quick tuning while the change shows (brightness, field of view, volume, sensitivity) |

![Tabs](https://rolly-docs.pages.dev/save/_files/Images/Layout_Tabs.png "Tabs: the tabs between their keys, the list, the detail panel and the prompts.")

![Side Rail](https://rolly-docs.pages.dev/save/_files/Images/Layout_Rail.png "Side Rail: the categories with their icons in a rail, the list under the category's name.")

![Centered Panel](https://rolly-docs.pages.dev/save/_files/Images/Layout_Panel.png "Centered Panel: everything in one card over the dimmed game.")

![Couch Hub](https://rolly-docs.pages.dev/save/_files/Images/Layout_Hub.png "Couch Hub: a tile per category with a live summary of its values.")

![Couch Hub page](https://rolly-docs.pages.dev/save/_files/Images/Layout_HubPage.png "A Couch Hub page: the category's list, its position and a description band.")

![Side Drawer](https://rolly-docs.pages.dev/save/_files/Images/Layout_Drawer.png "Side Drawer: a drawer at the edge over the running game.")

## Pick a layout

A screen takes the first layout it finds, in this order:

1. what the game set while it runs (below);
2. Project Settings > Plugins > **Rolly Save Core UI** > **Layout**;
3. the theme's **Layout** (in its Look category), which is Tabs unless you change it.

**Density** follows the same order: Compact (x0.9), Standard, Large (x1.3), or Auto, which takes the layout's own (Large for the couch hub). It multiplies text, the spacing inside components and component sizes, for a desk or a couch.

Switching while a screen is open keeps the category, the focused row, its scroll position and every change that waits for Apply.

### Blueprint

Get the **Rolly Save Core UI Theme Subsystem** and call **Set Layout** with an id (`Tabs`, `Rail`, `Panel`, `Hub`, `Drawer` or one of your own), or **Set Density**. Empty goes back to Project Settings. The choice lasts for the session and applies to every local player.

### C++

```cpp
#include "Templates/RollySaveCoreUILayouts.h"
#include "Theme/RollySaveCoreUIThemeSubsystem.h"

if (URollySaveCoreUIThemeSubsystem* Themes = URollySaveCoreUIThemeSubsystem::Get())
{
	Themes->SetLayout(FRollySaveCoreUILayouts::Hub); // Large density comes with the hub unless one is chosen
}
```

## How a layout fits the area

Layouts sort the area they get into size classes: widths of 1600 units and more are Wide, 1100 to 1599 Regular, 700 to 1099 Narrow and below that Tiny; heights of 800 and more are Tall, 440 to 799 Short and below that Tiny.

- Content lays out in a centred region at most 21:9 wide (the backdrop fills the rest), so a 32:9 screen keeps a readable width, while each player of a horizontal split keeps the full width.
- Under 800 units high (split screen one above the other) the title goes, the margins shrink and a split-screen player's badge moves to the footer.
- Below 1600 units wide the detail becomes a strip or a band.
- Rows narrower than 640 units put their control under the name (switches stay beside it).
- A long name wraps to a second line before it reaches the value, and a value too long for its column ends with an ellipsis; the detail says it in full.
- A question's buttons wrap to a second line when their labels do not fit.
- Tabs scroll, with the keys that switch them kept in view at both ends; a 48-unit fade covers a tab cut at either side, and the selected tab scrolls fully into view. The hub shows the tile columns that fit.
- Prompts wrap to a second line, then the least important ones go: Reset first, then Revert Changes, Category and Apply; Accept and Back always show. On Tiny areas they keep to one line, so the list keeps its room.
- Below 640 x 360 units (a 4-player split at 150 % interface size) the screen lays out at 640 x 360 and scales down to fit, the only case where text gets smaller.

**Nothing moves while a screen is open.** Changing category, focus or a value never moves or resizes a part of the screen; sizes change only with the area (a window resize, split screen, Interface Size, density or a layout switch):

- The Centered Panel's card keeps its height, and a short category leaves empty list space above the detail strip.
- A detail strip keeps two description lines and a line of facts; a Couch Hub page's band keeps its title line and its description lines, even for a row with a shorter description. A longer description ends with an ellipsis, and narration reads it in full.
- Every prompt the screen uses keeps its place at its widest label ("Next Option", "Toggle", "Change Key"); a prompt that cannot act now dims instead of going. Prompts dropped for room stay away while the screen is open.
- The count of changes waiting for Apply keeps its room while the screen has a setting that waits for Apply, unless it would cost a prompt or a one-line footer its line; then it stays out, and the Apply prompt and the rows' dots show what waits. The header keeps room for the entries it can show.

Dialogs and toasts still size to their content, since they arrive as new things.

**Lists and the pointer.** Resting the pointer on a row focuses it without scrolling its list, so the list stays where the player left it. The wheel, a drag, the scroll bar, the keyboard and the pad scroll as before, keeping a row of look-ahead. To scroll the list to the hovered row as well, tick Project Settings > Plugins > Rolly Save Core UI > Lists > **Scroll Lists on Hover**.

**Couch Hub pages on short areas.** A page shorter than a Tall area at its density (800 units at Standard, 1040 at Large) is compact, so its list keeps room for rows: the category's name moves to the Title role, the "All settings" link shows only for touch (Back leads there), the band keeps one line without facts, the prompts keep one line and the gaps between them halve. Where the longest name, the header's actions, the position and the keys do not fit one line, the name ends in an ellipsis rather than the position and keys taking a line of their own. On Tiny heights a page also drops its title (the switcher keeps the position), shows a strip instead of the band, lays its rows on the backdrop without a panel, drops the option dots under choices, keeps a quarter of the gaps, and its Back prompt reads "Back", so a row with its control under the name still shows whole.

## Screens with one category

A screen whose class defaults tick **Hide Single Category** (category Screen) and that has one category shows no category navigation, no Category prompt and one level, in every layout, and its Reset prompt reads **Reset All**:

| Layout | With one category |
|---|---|
| Tabs | No tab row and no keys at its ends; the list starts 24 units below the title line |
| Side Rail | No rail: the title over the list, the list and the detail sharing the width, the search field at the end of the title line; Back closes the screen |
| Centered Panel and Side Drawer | The screen's name in the Title role on the switcher's line, without chevrons, keys or position dots |
| Couch Hub | No tiles: the page opens at once, without the link to the tiles, the position or the keys; Back closes the screen |

With two categories or more, or with the box unticked, each layout shows its category navigation.

## Add to a screen of categories

A screen of your own derived from `URollySaveCoreUICategoryScreen` (see [Open screens on the screen stack](https://rolly-docs.pages.dev/save/guides/screen-stack/)) can add these pieces; each one is off until you use it.

- **Prompts of its own.** Override `CollectProductPrompts` with entries of an Id, a gamepad and a keyboard key (second keys do the same), a label, whether it can act now and a Priority. They show after Accept in your order; a key, a click or a tap runs `HandleProductPrompt`, and one that cannot act stays in its place, dimmed, and plays the Error sound. When the footer runs out of room the lowest Priority goes first, against Reset (10), Revert (20), Category (30) and Apply (40); Accept and Back never go. The footer takes six (`MaxProductPrompts`); an entry past them, one without an Id, one with the Id of a core prompt (Accept, Category, Apply, Revert, Reset, Back, Delete, Space) and one listed twice are left out with a setup message. So is an entry with a key the screen or the core takes, and the message names the key and who takes it. Always taken: Back, Close, Accept, the keys that move focus (arrows, Tab, Home, End, Page Up, Page Down, the D-pad and the left stick), the category keys (with one category too), the pad's search key (with search off too) and the left stick button, which repeats or stops menu narration; then the keys of Apply, Revert and Reset where the screen offers them, and the keys of an earlier product prompt. With the default keys a pad keeps only the triggers and the right stick's directions free on a screen with Apply and Reset, and a keyboard every key but the arrows, Tab, Home, End, Page Up, Page Down, Enter, Space, Escape, Q, E, F, R and Backspace. Call `RefreshFooter` when what they say or allow changes.
- **Chips in the header.** A **Rolly Chip** among the header's actions (`GetHeaderActions`, then `RefreshHeaderActions`) shows an icon, a label (a sort order, a profile's name) and the key of the player's device, none for touch. Its keys work from anywhere on the screen, and a key, a click or a tap fires **On Chip Activated** once; a key the screen or a product prompt uses stays theirs, and the chip is reported in the Message Log. It keeps the width of the widest of its **Reserved Labels**, so it never moves; a label wider than **Max Label Width** (240 units) ends with an ellipsis. **Set Compact** keeps the icon and the key. It takes no focus unless **Set Chip Focusable** turns it on: then Up from the list's first row reaches the first such chip, Left and Right move along them, Accept activates one and Down goes back to the row.
- **A line in the list's place.** **Set List Message** shows a text with an icon or a spinner (**Busy**) and an optional button (**Action Label**, such as Try Again) where the list is: why it is empty, that it is being read, or that reading failed. A long text wraps within the list's width. A busy line shows only after **List Message Busy Delay** (category Screen, 250 ms by default, 0 to 5 seconds), so a quick read never flashes; one that replaces a line already shown takes its place at once, and the same busy line set again while it waits keeps its wait. Each time a line comes or changes, its button (if any) takes focus, Accept presses it, the detail names the category instead of a row and narration reads the line; a line without a button leaves focus on the screen, and the hidden rows do not move with Home, End or paging. **On List Message Action** fires when the button is pressed; **Clear List Message** brings the list back with the row the player was on.
- **A picture in the detail.** In `CollectDetail`, `PreviewTexture` shows a texture you hold (a save's thumbnail) as it is, cut from its middle to **Preview Aspect Ratio** (category Screen: 16:9 by default, 4:3 or 1:1 for pictures of that shape, 1 to 4: a square is the tallest picture the detail panel holds above its facts at 1920 x 1080, so a portrait picture shows its middle square; the Couch Hub's column shows a picture taller than its page smaller, whole), and never loads anything; `PreviewIcon` stands on a Surface Sunken placeholder while there is no picture. The screen keeps a weak reference, but the preview's brush holds the texture while it shows: hold it yourself while it should show, call `RefreshDetail` when it arrives, and expect it collected only after the detail moves on.
- **Rows at work.** A row whose `GetRowBusyText` says something ("Saving") shows a spinner and that text in its value's place, keeps its size, refuses Accept, steps, clicks and taps, and narration reads the text. Call the row's `Refresh` when it starts and ends.
- **Pictures on rows.** `SetLeadingPicture(Texture, PlaceholderIcon)` puts a picture before the row's name at the row's **Leading Picture Size**, 96 x 54 units at Standard density (125 x 70 at Large) by default, 8 to 512 each way; the texture is cut from its middle to that shape, so 72 x 54 suits 4:3 pictures. A placeholder with the icon shows until the texture comes, then the texture fades in over 100 ms (at once with Reduce Motion). The row keeps its height, and an unavailable row dims the picture to 45 %. `ClearLeadingPicture` takes it and its room away. A row makes the picture's and the busy state's widgets the first time it needs them.
- **Names for the levels.** `GetCategoriesLabel` says what Back and a Couch Hub page's link to its tiles read at the list level of a two-level layout: "Categories" in the Side Rail and "All settings" on the Couch Hub's pages unless you name your categories ("Groups"). It is asked only where the template names that level: on a Tiny hub page Back reads "Back" whatever it returns.

## Arrange a layout of your own

A layout template is a user widget with named slots: Backdrop, Header, Navigation, Content, Detail, Footer and (the hub) Preview. The screen puts its parts into them.

1. Create a Widget Blueprint whose parent class is one of **Rolly Tabs Template**, **Rolly Side Rail Template**, **Rolly Centered Panel Template**, **Rolly Couch Hub Template** or **Rolly Side Drawer Template**.
2. Arrange the Named Slots in the designer.
3. In Project Settings > Plugins > **Rolly Save Core UI** > **Template Classes**, add it under a built-in id (`Tabs`, `Rail`, `Panel`, `Hub`, `Drawer`) to replace that layout, or under a new id (for example `Codex`) to add a layout that Layout, the theme's Layout and Set Layout can pick.

The template still decides how the parts behave for each area through its traits (the navigation, the detail form, what Back and Reset say, option dots under choices). They come with the parent class you pick, never with the id. Templates named here are always cooked.

## Replace a piece with a layout of your own

Every screen and piece is an ordinary user widget whose default layout is built in C++. A Widget Blueprint subclass with a layout of its own keeps it: the C++ code drives the widgets whose names match its parts, and a part the layout leaves out only turns its feature off. Each part's tooltip (in the class's variables) says which widget type it needs and what the code sets on it; the [class reference](https://rolly-docs.pages.dev/save/reference/classes/) lists every class's parts. A layout of your own adapts to split screen in **On Area Changed**. Without a layout, a subclass keeps the built-in one and can still change its class defaults. All of this works in Blueprint, without C++.

| Piece (parent class) | Where you pick your subclass |
|---|---|
| Dialogs (**Rolly Save Core UI Dialog**) | Project Settings > Plugins > **Rolly Save Core UI** > **Dialog Class** |
| Toasts (**Rolly Toast**) | Project Settings > Plugins > **Rolly Save Core UI** > **Toast Class** |
| Tabs and prompts (**Rolly Tab**, **Rolly Prompt**) | The class defaults of your screen subclass, category **Parts**; the screen hands them to its tab strip and prompt bar |
| Rail items and tiles (**Rolly Rail Item**, **Rolly Tile**) | The same category **Parts**: **Rail Item Class**, **Tile Class** |
| The tabs row and the footer prompts (**Rolly Tab Strip**, **Rolly Prompt Bar**) | Your screen's layout: a widget of that class, or of a Blueprint subclass of it with a layout of its own, named TabStrip or PromptBar |

When the Tab Strip's TabScroll part (or TabFade around it) sits in a Horizontal Box, the strip sizes it to its tabs while they fit and lets it shrink and scroll when they do not. The Prompt Bar's PromptPanel wraps its prompts when it is a Wrap Box. Classes named in Project Settings are always cooked; one that cannot be loaded in the game falls back to the built-in one with a setup error.

## Limits

- Layouts are laid out for left-to-right languages; right-to-left languages were not checked.
- Touch is covered by automated tests with simulated fingers; the layouts were not yet tried on a phone or tablet, where the platform's DPI scale decides the area a layout gets.