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.
Areas are static components that display information to users. The following
*-area components are available, but no longer recommended. You can use a card when you need an area by using the appropriate card component without specifying the
on-click key. For example, a
cell-card without an
on-click looks and works exactly like a
title-area: A container for titles and subtitles. A
title-areahas five slots that can contain
single-linecomponent, depending on the slot.
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.
title-area key is also used within other components and should still be used as intended.
Text components display text to users.
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
If you want the card to be tappable, make sure to define an
on-click key within the card. When the user taps on the card, you can either execute an
intent, navigate to a new view with the
view-for key, or navigate to an external URL. If you do not define an
on-click, the card is treated like an area.
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 optional
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 includes a
title-areaand an optional
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 components, which are variants of cells that allow input for use with transactional workflows.
Make sure that you are following the App Punch-Out policies if your card's
on-click definition makes users exit Bixby.
Bixby Views has components to display a single image or multiple images in your view. PNG or JPG image types are recommended for all images.
For a single image, 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 an inline
image in a
single-line if you need the image to be in the same span as text.
For a collection of images, you can add these components that allow the presentation of multiple images in carousel or list form:
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.
Some images in your capsule, particularly icons, might not be visible or legible when set against a light background in Bixby's light theme. You can specify alternate images for the light theme by using the
light-theme sub key under
url (the image's default URL). There is also a corresponding
dark-theme key that can be used if the default icon or image is more visible/legible in the light theme.
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
Use transaction components 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, you can read more in the Design Components topic and play with the interactive demos available.