Welcome back to our continuing series on Bixby Views. This blog entry helps keep you up to date on the latest and greatest changes on Bixby Views! We are continually listening to your feedback and regularly updating these Views for our developers. Bixby Views lets you create complex and interactive user interfaces in our declarative Bixby language! You can test out these views in several of our Sample Capsules.
We taught you how to implement different Bixby Views in the Building Views (UI) developer guide. Well now we added a whole guide on how to get the most out of Bixby Views with our Designing with Bixby Views guide! This new design guide goes into depth on how to design with Bixby Views, suggesting which components to use for the various conversation moments and how to put all the information you want to display in the most user friendly manner.
We’ve added several new components for you to use in even more user interaction scenarios!
progress-bar component let’s you inform users of the status of an action with a progress bar. This lets you create views that tell users where their food order is, how soon a flight will land, or how close to an event they are.
You can specify the progress bar within a
compound-card or a
section. The progress bar can have a value between
100.0, with higher values filling more of the bar. In the image below, the top compound card has a progress bar filled to
100, while the bottom compound card has an empty progress bar (set to
duration-picker component lets you ask users for a duration of time. This is useful if you need to add some kind of timer component to your capsule, such as setting a timer for a recipe or keeping time for exercise.
attribution-link component lets you quickly add a link at the bottom of your
section that users can click. You can specify what happens when they click this link – they’ll either be redirected to a web page or an app (using a URL) or a new intent is triggered for an action that takes them to a different capsule.
In the below example, which you can test with the Bixby Views Sample Capsule, the attribution link says “Open Bixby Developer Center” and has a small arrow symbol, indicating to users that they will be directed away from the current capsule. Clicking this link takes them to the Bixby Developer Center.
header lets you add a special area at the top of a list, both in input and result views. This header lets you anchor your users and can give additional context while selecting an option.
You can now add a
spacer in between a section’s content, to further customize the spacing in your view! The spacer is measured at 24 pixels and can be used to create larger spacing between components.
Here is an example of a partial view, with a spacer and then no spacer between an
image-card and a
In addition to new View’s components, we’ve also updated some of our existing components.
We’ve added a few more controls for displaying images in the various image-related components. Note that adjusting one of these properties could affect how another property handles displaying an image.
object-fit key (sometimes called the
image-object-fit key in certain components) lets you adjust how an image fits within a larger image component, such as a standalone
image, images in an
image-list, images in an
image-carousel, the image in an
image-card, or the image in a
If you set the
object-fit property to
Cover (which is the default), the image will stretch and crop to fit the entire image container:
If you set the
object-fit property to
Contain, the image will change size to fit the entire image within the container:
object-position key (sometimes called the
image-object-position key in certain components), lets you control where an image is anchored and aligned within a component.
background-color key (sometimes called the
image-background-color key in certain components) lets you control the main color behind your images.
If you specify
Transparent, which is the default, you will have a transparent background:
If you specify
White, you will have a white background:
The white background color is useful for situations where your transparent images are hard to see against Bixby’s background.
You can now choose between several
color options when adding text in a
single-line component or in
slot1 of a
title-area. Colored text is a great way to emphasize certain information in your view! You can choose
Red. The default (when no color is set) is white. This option is only valid if you do not use a
For example, if you want to see your bus’s arrival time in a transit capsule, you can use
Green to indicate the bus is on time,
Amber to indicate that the bus is delayed, and
Red to indicate that the bus is not running.
Another example is to indicate how well the stock market is doing:
If you have multiple image cards being displayed in a list (such as a
list-of in a result view or a
selection-of list in an input view), you can now choose how many columns of cards display using the
column-size key. If you don’t manually set this key, then the aspect ratio of the cards determine how many columns appear.
column-size(1) column-size(2) column-size(3)
You can now initialize a date or set of dates in the calendar using the
initial-value key. This makes the calendar component consistent with the other pickers and let’s you suggest an initial date to users.
You can read all about Bixby Views on our Developer Center! And be on the lookout for even new features and more improvements from our team!