Xamarin.Forms abstracts different User Interface(UI) components across various platforms to a single interface by grouping similar UI components. However, some UI components are hard to categorize, because they are closely tied to the device hardware features. Indeed, most Galaxy Watches in the market have a round-shaped screen while most smartphones and some watches, which the Xamarin.Forms targets, have a square-shaped screen. Designers and developers want to create more aesthetic and effective UI controls that fit well in the hardware features of Samsung Galaxy Watch. Therefore, the Tizen.Wearable.CircularUI.Forms API provides a variety of UI controls to help developers easily create UIs for round-shaped wearables.
Using the CircularUI library
For our MySteps app, we'll now add a round-shaped progress bar that lies around the edges of the screen. Our goal is to visually show how many steps the user has walked compared to 6000 steps, which an average person walks a day.
Since we also have to add a Label object in the center of the screen to show the number of steps of the user, we would have to add the label on top of the CircleSurfaceView object. This requires using a layout that overlays its children on top of each other such as an AbsoluteLayout. Using an AbsoluteLayout, you can place its children on the layout by specifying the absolute or proportional position. For more information, you can see the AbsoluteLayout guide.
Change to AbsoluteLayout
We will first replace the current StackLayout to an AbsoluteLayout and place the Label object in the center of the screen. Take the following steps:
When proportional values are used, the width and height values of an element is proportional to its parent. In our case, the Label has a width half of its parent and a height 1/4 of its parent.
The anchor point is a representative point of the element. The default anchor point is at the top-left edge of the element. When proportional values are used, the anchor point's position is proportional to its element's width(for x anchor) and height(for y anchor), and is also proportional to its parent view's width(for x anchor) and height(for y anchor). It is a unique anchor model that makes positioning elements easier. For more information you can see the AbsoluteLayout guide.
First, ensure that FormsCircularUI.Init() is called after (Xamarin's) Forms.Init() to initialize Tizen Wearable CircularUI in the Main function. In this tutorial, it's located in the MySteps.cs as follows:
...
using Tizen.Wearable.CircularUI.Forms;
...
static void Main(string[] args)
{
var app = new Program();
Forms.Init(app);
FormsCircularUI.Init();
app.Run(args);
}
Now, return to StepCountPage.xaml and take the following steps:
You need to define a XML namespace(xmlns) declaration with a prefix to use the class types from the Tizen.Wearable.CircularUI.Forms namespace. This step requires you to fill out three things: the xmlns prefix, the clr-namespace name, and the assembly name. The xmlns prefix can be chosen arbitrary, for example, we've used w for the prefix to represent the word wearable. The clr-namespace name specifies the Common Language Runtime(CLR) namespace that exposes the class types to be used in XAML, in our case it is the Tizen.Wearable.CircularUI.Forms namespace. The assembly name is optional if the CLR-namespace is within the same assembly as the application code. In our example, however, MySteps references the types from another assembly named Tizen.Wearable.CircularUI.Forms. If you want to know more about declaring namespaces in XAML, see XAML namespaces.
Add the following XAML code above the Label element(between the <AbsoluteLayout> and the <Label> tags):
CircleProgressBarSurfaceItem has a background area and a bar area, the background area is a round-shaped ring and the bar area fills up the ring depending on the Value attribute.
The following image shows the meaning of the BackgroundRadius/BarRadius and BackgroundLineWidth/BarLineWidth. Note that the Galaxy Watch emulator has a 360*360 screen size, hence the values of the BackgroundRadius/BarRadius and BackgroundLineWidth/BarLineWidth attributes are chosen so that the CircleProgressBarSurfaceItem is placed at the edges of the screen.
Fix the UpdateData() method that so that the progress bar changes according to the number of steps.
Congratulations on completing the tutorial. Now you know the basics of Samsung Galaxy Watch application to develop more complex applications.
Manage Your Cookies
We use cookies to improve your experience on our website and to show you relevant
advertising. Manage you settings for our cookies below.
Essential Cookies
These cookies are essential as they enable you to move around the website. This
category cannot be disabled.
Company
Domain
Samsung Electronics
.samsungdeveloperconference.com
Analytical/Performance Cookies
These cookies collect information about how you use our website. for example which
pages you visit most often. All information these cookies collect is used to improve
how the website works.
Company
Domain
LinkedIn
.linkedin.com
Meta (formerly Facebook)
.samsungdeveloperconference.com
Google Inc.
.samsungdeveloperconference.com
Functionality Cookies
These cookies allow our website to remember choices you make (such as your user name, language or the region your are in) and
tailor the website to provide enhanced features and content for you.
Company
Domain
LinkedIn
.ads.linkedin.com, .linkedin.com
Advertising Cookies
These cookies gather information about your browser habits. They remember that
you've visited our website and share this information with other organizations such
as advertisers.
Company
Domain
LinkedIn
.linkedin.com
Meta (formerly Facebook)
.samsungdeveloperconference.com
Google Inc.
.samsungdeveloperconference.com
Preferences Submitted
You have successfully updated your cookie preferences.