Jump to content

Using Xamarin.Form Shell on Galaxy Watch

Recommended Posts


What is Shell?

Shell is a container for an application, added as a major feature to Xamarin.Forms 4.0.0. It reduces the complexity of mobile application development by providing the fundamental features that most mobile applications require, including:

  • A single place to describe the visual hierarchy of an application.
  • A common navigation user experience.
  • A URI-based navigation scheme that permits navigation to any page in the application.
  • An integrated search handler.

In addition, Shell applications benefit from an increased rendering speed and reduced memory consumption.
For more details about Shell, check out Xamarin.Forms Shell documentation.

Shell on Galaxy Watch

Tizen .NET always tries to keep up with Xamarin.Forms, so Shell is supported on Tizen on Xamarin.Forms 4.1.0. Visit What's New for Tizen on Xamarin.Forms 4.1.0 to learn more about what's new for Tizen on Xamarin.Forms 4.1.0.
However, Shell cannot show its full ability, including flyout menu and tabs on wearable applications, as the Shell is not originally designed to fit on a small and circular watch screen. It is quite sad that watch applications cannot take advantage of Shell.

In order to make Shell powerful on wearables, we re-designed the UI of Shell just for wearables.
This picture shows how the Shell UI looks on Tizen Wearables. You can see how the Shell UI is changed and how the Shell UI looks on Tizen wearables.

tizen_blog_shell_xaminals.gif tizen_blog_shell_xaminals_mobile.gif

Above is a sample application called Xaminal which demonstrates Xamarin.Forms Shell.

Benefits of using Shell

Shell provides a common navigation experience, based on two-depth navigation.
It makes it easier to get started developing an application, and the application can benefit from navigation, performance, and extensibility improvements.
The following shows how the hierarchy of two-depth navigation works on wearables.

Shell Navigation with Flyout and Tab


Most major features of Shell are supported on Tizen wearables, so you can now definetly try using Shell in your application.
However, there are a few limitations:

  • SearchHandler is not supported yet.
  • Tabbar is not shown, but a user can swipe to move between the pages.

This post introduces how we applied Shell on our wearables and how you can use it.

How to use Shell on Wearables?

Shell UI for Tizen wearables is in Tizen.CircularUI, and it is provided in Tizen.Wearable.CircularUI 1.5.0-pre3 and later versions.

Note: Our future plan for Shell for wearables is to migrate it into Xamarin.Forms when it is stable and mature enough. Then, you would not need to do anything to use Shell for wearables.

If you've created your project using Tizen Wearable App or Tizen Wearable Xaml App templates, CircularUI will already be there in your project. You just need to make sure that the Tizen.Wearable.CircularUI version is 1.5.0-pre3 or later.

If you are new using Tizen.CircularUI:

static void Main(string[] args)
    var app = new Program();
   // Initialize CircularUI

Once you have referred to Tizen.Wearable.CircularUI 1.5.0-pre3 or later in your project, you are ready to experience the wearable Shell UI.
You can just use Xamarin.Forms.Shell in your project, then Tizen.CircularUI will do the rest to make the Shell UI fit in the circular watch.

Major Features

Let's see what major features of Shell are supported and how the UI looks different from Shell on mobile.

1. Flyout

Flyout is one of the Views for representing the root menu which provides top-level Navigation of the Shell Application.
It consists of FlyoutItems and MenuItems, and it shows a list of the items which navigate to each ShellContent.
On wearables, the user can open the Flyout by touching an icon or swiping the icon to the top of the screen.
Note: The icon will disappear while the user touches the app contents.


2. Tabs

TabBar is used for next-level navigation.

However, since TabBar is not supported on Tizen wearables, it has been replaced by the IndexPage in the Tizen.CircularUI.
If the ShellItem has more than one ShellContent, the number of ShellContents will be represented as the dots on the top of a screen.
Each dot indicates each ShellContent, and the ShellContent can be navigated by the user's swipe gesture.
Title and Icon properties are ignored on Tizen wearables.

3. URI-Based Navigation

Shell includes a URI-based navigation that uses routes to navigate to any page in the application.
Tizen wearables also support this naviagation. You don't need to create an extra navigation hierarchy.


Check out the sample applications used in this blog and learn more about Shell on Tizen wearables.

Wearable Shell UI is still evolving and we would be very happy to apply your valuable feedback to it.
Please feel free to give us any comments and sugesstions about the Shell UI for wearable. Our github page and an e-mail ([email protected]) are always open!

View the full blog at its source

Link to comment
Share on other sites

  • Replies 0
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Similar Topics

    • By Samsung Newsroom
      The beauty of Xamarin.Forms is that it provides a consistent API for creating cross-platform applications. When it comes to Tizen, this advantage includes creating a cross-device application.
      Tizen supports multi-device form factors such as TV, mobile, and Family Hub. Each of these device profiles has a different screen size, resolution and even a different UX. A Xamarin.Forms application running on Tizen looks suitable on each of these target profiles.
      This post describes how we have made Shell suitable for Tizen TV.
      Shell is one of the main features of Xamarin.Forms that helps developers reduce the complexity of their application development. We would like to bring this giant Shell experience into the TV application development.

      Shell is designed for mobile devices which means it is operated by the user's touch and gesture. However, on a TV, users have to use the remote controller to navigate the application, which uses limited movements like up, down, left, and right. Therefore, the user cannot directly press the desired UI control, such as a button. Sometimes it may feel difficult navigating the focus if the application is not designed intuitively.
      In addition, unlike the vertical display on mobile devices, a TV is horizontal. This causes other issues, such as the title bar on the top of the TV screen taking up too much space.

      For this reason, an optimized UX is required for TV so the user can easily navigate to all controls using the remote controller. In a similar case, we have a precedent of optimising Shell for a watch profile (see Shell on Galaxy Watch).
      Shell on Samsung TV
      This picture shows how the Shell UI looks on a Samsung TV. The most noticeable difference is that the title bar on top has been removed from the screen. Flyout is always visible on the left side of the screen to reduce using unnecessary space and imply to the user that they should move the focus to the left to open Flyout.
      Flyout always shows on the far left of the screen instead of having a specific button to show Flyout. Flyout is minimized while the user is browsing the ShellContent area.
      The user can open Flyout by moving the focus to the left using the remote controller or changing the IsPresented property to true in the code .

      Bottom tabs : Unlike mobile, there is no bottom tabs on a TV. Therefore, tab items will not be displayed on Flyout, if FlyoutDisplayOptions value is set to AsSingleItem. Top tabs : If a FlyoutItem or Tab item contains one or more ShellContent items, another navigation drawer is shown on the left side of the ShellContent area. Unlike Flyout, the second navigation drawer is not minimized while the user is browsing the content, because it is included within the ShellContent. These two drawers provide an easy and consistent navigation UX. The user can use the left and right buttons to move between navigation drawers and content area, and use the up and down buttons for browsing items in the drawers.

      To use this optimized Shell for TV, just update Xamarin.Forms to the latest version in your app.
      We would love to hear your feedback. Our e-mail is always open. You can also ask questions in the Samsung Developers forum or the Tizen.org forums.
      View the full blog at its source

  • Create New...