Bixby Views: Updates Vol. 2



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.

New Guide on How To Design With Bixby Views

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.

New Components!

We’ve added several new components for you to use in even more user interaction scenarios!

Progress Bar

The 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 0.0 to 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 0).


Duration Picker

The 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

The 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.


Headers

A 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.

For an input view, you can use a header at the top of a list you create with the selection-of key.


For a result view, you can use a header at the top of a list you create with the list-of key.


Section Spacers

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 split-input-cell:

Component Enhancements

In addition to new View’s components, we’ve also updated some of our existing components.

Image Controls

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

The 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 thumbnail-card.

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

The 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

The 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.

Colored Text

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 Amber, Blue, Greeen, or Red. The default (when no color is set) is white. This option is only valid if you do not use a *_Soft text style.


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:


Columns in Image Card Displays

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)



Initial Value Support in Calendar

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.

Learn More

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!

Blogs

Bixby Developers Chat with Roger Kibbe

Are you a voice developer or designer? Are you excited about the future of voice? Are you curious about an ambient computing future where our TV's, appliances, watches, phones, and more can talk with you to create new experiences? Join us on the Bixby Developers Chat to learn about Bixby and conversational AI. Join host Roger Kibbe as he talks with guests about voice, AI, Bixby, technology innovation and where the exciting Voice industry is going.
Read More
Blogs

Bixby's a breeze for Sonnar Interactive

Jarek Beksa and his team set their sights on new and ambitious projects for underserved markets. With Bixby being part of the plan, Jarek and the team were pleasantly surprised at how easy it was to make the jump.
Read More
Blogs

Introducing Training V2: A new and improved way to train your Bixby Capsules

Bixby Studio received a huge update which enhances a developer's NL Training experience. This video introduces Training V2 and demonstrates the differences between Training V1 and Training V2.
Read More