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.


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

The healing power of sound

The Healing Sounds capsule features a music loop for 60 minutes to help you relax, meditate, and sleep. Nature Sounds capsule has different sounds like a thunderstorm, fireplace, sea, wind, and forest. The Rain Sound capsule plays a delightful rainstorm. These two capsules also feature a high quality one-hour audio loop. Our conversation with Adrian Risch, who created the therapy-to-our-ear capsules, gives us insight on his journey to becoming a sound healing pioneer and Bixby Premier Developer.
Read More
Blogs

SDC 2019: Bixby Delivers – No shortage of inspiration for AI voice assistants

On October 29 – 30, 2019, the Samsung Developer Conference hit home, hosting the world famous, yearly developer conference in San Jose, CA. The Bixby team delivered on the promise of new exciting tools, partners, and Bixby capsules being used on a larger Samsung device ecosystem.
Read More
Blogs

Fast Track Development Time with Bixby Templates

The voice ecosystem is a nascent, but rapidly growing industry with consumer adoption on the rise. Nearly 2 out of every 3 consumers use voice assistants on a weekly basis, according to a recent survey1. As a developer, now is a great time to explore building a voice interface for your application or service so that you can bring this new channel of potential customers to your business. Read More
Read More