Introduction

We are in an era where watches are being used for more than just an instrument to tell time.

Over the past decade, we have seen a radical transition of smart devices, and these smart devices have taken over in every sphere of our lives.

Wearable technology is booming in the market nowadays. Wearable devices are devices that can be integrated into clothing or devices that can be worn on the body as accessories. This blog focuses on wearable devices with a round shape.

It is estimated that the number of wearable devices, in the market will jump to almost 177 million by 2018. As shown in the following figure, the wearable sales number is predicted to scale up with increasing mobile users and high-speed internet connection:

(Image source: sitepronews)

Considering wearable as the most emerging trend in the future, Samsung has introduced the Circular UI to simplify app creation of wearable devices. With this feature, app developers can explore and create many different apps for wearable devices and be on par with the industry.

Why Circular UI?

According to research, the circle shape is considerably easier to pursue by human eyes. Our brains are capable of processing information within a circular shape a bit faster than an information inside a rectangle or a square shape. User experience enhances when we use comforting curves instead of sharp edges.

Current wearables typically consist of a touch screen, buttons, or both. Wearables with circular displays use interactive techniques such as swipes and multi-touch inputs.

Circular UI

Circular UI is a set of helpful extensions of Xamarin.Forms framework. Currently, circular UI works efficiently with Visual Studio 2017.     

Tizen Advanced UI Library (TAU) supports both rectangular and circular wearable devices. You need to add a media query to support a circular UI along with a rectangular UI. The following figure shows how the media query works on a rectangular and circular UI:

For a user-friendly experience, Samsung supports rotary events for user interaction on a wearable rotary device. The following figure shows the basic idea of a rotary event:

The circular UI along with the integration of the rotating bezel gives a user-friendly experience. Bezel interactions represent the rotation of the bezel to explore different available menu options on the wearable screen. Bezel interactions can adjust the values, answer or end calls, and check alerts. You can view this information by rotating the bezel clockwise or counterclockwise:                           

The Tizen Wearable Web UI framework provides rich Tizen Wearable UI Components. You can use the UI Components for CSS animation and rendering purposes. The wearable UI components are designed to allow the user to interact with a small touchscreen-equipped wearable device with rotary component parts.

The following table shows the various circular UI components, both in Native and in Web application:

Few examples of Native application:

Few examples of Web application:

In addition, UI components provide a wide range of UI controls to create an effective GUI. Following are the available UI controls:

• Check
• CircleDateTimeSelector
• CircleListView
• CirclePage
• CircleProgressBarSurfaceItem
• CircleSliderSurfaceItem
• CircleScrollView
• CircleStackLayout
• CircleStepper
• CircleSurfaceEffectBehavior
• TwoButtonPopup
• ContextPopupEffectBehavior
• IndexPage
• InformationPopup
• IRotationReceiver
• Radio 
• PopupEntry
• Toast
• TwoButtonPage

Few examples of Tizen wearable circular UI controls:

Conclusion

Wearables will be the “the next big thing,” and wearable app development is what you must go with.

With all these components and controls discussed in this blog, you can make an effective circular control. When this circular control is integrated with a rotating bezel, it gives a user-friendly experience.