In Creating Bixby Views, we've seen how layouts are built from smaller components: cards, cells, and various text objects like titles and paragraphs. Let's go into more detail about layout components and their containers.
Input views can use layouts, layout macros, and layout components in certain places. However, input views have their own distinct set of components. For a discussion of input components, read the Input Views section, which links to further documentation on individual components.
section block can itself have just two child keys:
title: The title that will be displayed for the section. Unlike titles within other components, this title cannot be styled (although it can be a
template). This is optional, and only one is allowed for a
content: The actual components within this section.
layout block has only one
content block as a direct child; that content block can have multiple
section blocks that each have one
content block. So a layout with multiple sections would look like this:
// the match directive for the overall layout
match: Object (variable)
// content for first section
// content for second section
content block within a
section contains one or more view components, which are divided into the following types:
Be aware of which components you are adding to your layouts and layout macros, because different components are available under different views. If you call a layout or layout macro in a view and that layout specifies a component that the view does not support, Bixby Developer Studio will throw an error. Similarly, you should consider which layout macros are being called within a layout itself. The same layout macro invoked in one component might not be valid if used within a different component, as the list of supported child components could differ.
title-area: A container for titles and subtitles. A
title-areahas three slots that can contain either a
cell-area: An area that contains a cell, which displays information for a single subject. This has three child keys for slots (
slot3); see the discussion of slots below.
thumbnail-area: An area that contains a thumbnail image and a title area, displaying information with an image as a secondary component.
Areas are not tappable. They are typically only used to display information to users only.
paragraph: a paragraph of styled text.
single-line: a single line of text that can contain styled text, spacers, and images. A
single-lineblock may have one or more
spacerkeys within it; when it is rendered, they are concatenated into a single display line.
textis an interior container for styled text (see below) that can only appear inside other elements such as
single-line blocks seem similar, but they have different use cases. A
paragraph is a single unit of styled text that can be one or more lines, with wrapping left up to the display device. A
single-line always displays as a single line of text, but can include spacers and inline images, letting you build a more complicated line of data. Note that if a
single-line component generates more text that can be displayed on the device's screen in one line, it will be truncated with an ellipsis ("…").
Styled text blocks such as
text have two keys:
valueis the text the user sees. This can contain Expression Language functions.
styleis the name of a style for the text. See Styling Components for valid text styles.
A card is a representation of a single subject or result: for example, a hotel room being booked, or a calendar event. Cards should always have title text, and usually have detail text (for example, a description of the hotel room). In addition, they might have image backgrounds, solid color backgrounds, image thumbnails, and even maps with pins. Most cards can have
title-area components. In addition, all cards should have
on-click blocks that let you provide an
intent to be executed when the card's label is clicked or tapped.
title-card: a container that in turn contains a
cell-card: This cell/card hybrid is styled like a cell, and has the same three child keys for slots (
cell-areadoes. But, like other cards, it has an
image-card: similar to
title-card, but with an
image-urlto let you specify a background image for the card.
thumbnail-card: treats the image as a thumbnail that can be given a position on the card rather than as a background image.
map-card: a component that holds a static map in your view. Map card include a
on-clickaction, and also let you set
compound-card: a flexible component that includes a
contentblock (which can contain most of the non-transactional view components). (Also, see transaction properties, which are variants of cells that allow input for use with transactional workflows.)
These components allow the presentation of multiple images in carousel or list form. PNG or JPG image types are recommended.
image-carousel: a component for multiple images, specified as a type or subtype of Image, that can be swiped through horizontally by the user.
image-list: a single-line list of multiple images, specified as a type or subtype of Image. If there are more images than can fit on the screen, the user can scroll the list.
Additionally, you can add a standalone image in a section's content container or in a compound-card. If you want to add an image with some overlaid text, use an image card. You can also add inline images in a
single-line if you need the image to be in the same span as text.
partitioned component lets you present multiple rows or lines of data with visual separation between them. It can be used to present lists, tables, and grids.
partitioned: used for visually separated data. It contains an unstyled
contentblock can contain most of the non-transactional view components (e.g., cards, cells, titles, and text).
hbox: a "horizontal box" container. An
contentchild, which in turn can only contain one or more
vbox: a "vertical box" container. This contains controls for horizontal and vertical alignment and a
contentblock which can contain
vbox container must be inside an
hbox. You can think of an
hbox as a row and
vbox as an item in a column. The width of each column is determined by its content; Bixby will try to display the full content of each column. If there is not enough horizontal space to do so, left-aligned columns will be truncated with ellipsis marks (…); if there is still insufficient space, centered and right-aligned columns will be cut off (without the ellipsis to indicate truncation).
hbox blocks do not have to be inside a
partitioned block, and
partitioned blocks do not have to contain
Transaction properties are used within transactional workflows. They allow users to confirm actions and prompt for selections. For instance, a reservation confirmation for a restaurant might allow the user to change the party size and the reservation time.
input-cell: a cell wrapped in an
intent, to allow a selection prompt or an input form to be presented in a
split-input-cell: a container for two
split-input-cellhas two child blocks,
right, which each contain one and only one
cell-card components have columnar slots for their content, numbered
slot1appears as a square on the left side of a cell, and can only contain an image;
contentblock that has
secondarytext lines (this is not the same as a layout content block);
slot3appears as a square on the right side of a cell, and can contain an image and a label.
When you lay out a cell, you can choose to have one, two, or all three slots filled, but
slot2 must always be filled. So there are four possible display options:
Bixby Views offers limited styling of components that remain consistent with the rest of Bixby's design. All text blocks and titles can be given styles that control their size and, in some cases, a choice between normal and "soft" color. (The rendering of "Soft" styles is device-dependent, but generally has less opacity, giving it a dimmer or lighter look depending on its background.)
When styles affect size, they are listed from smallest to largest. All styling components will vary slightly on different devices and scale appropriately.
For images that are in-line with other content either horizontally (
single-line) or vertically (
vbox), image sizes can be set to any of the style names for Title and Detail. The image has the same height as the font size of the specified style. You should match image styles to the styles of their accompanying text, although the
_Soft suffix will not affect the image's display.
These ratios only apply to mobile. Image ratios on watch devices are fixed.
Additionally, you can change the position and alignment of some images using the following keys:
image-object-fitfor images in cards or
imagecomponents. This changes how your image fits within the confines of the component.
imagecomponents. This changes the alignment of the image.
If you need to make an image tappable and show it in lightbox mode, you can use the
lightbox-enabled key to indicate to the user that the image is tappable.
For a comparison of the shapes, see the
shape reference page.
You can specify the following aspect ratios for the
image-card. For a visual comparison, see the
aspect-ratio reference page.
You can add a
content child components in compound cards and in section
If you want to know which components to use during which moment in your conversation flow, you can read the Designing With Bixby Views guide.
If you want to know the design specifications of the various components or create mock-ups of your capsule's UI, you can download various files in the Design Resources topic to help you.