tutorials
Develop Galaxy Watch Apps using CircularUI
Jeongkyun Pu
Staff Engineer
Tizen .NET has three types of application models:
- Elmsharp
- NUI
- Xamarin.Forms
Each type has a different web UI framework. For more information, see Create an application.
This blog describes how to create a Tizen Xamarin.Forms app for Galaxy Watch, and deploy and launch the app on a wearable emulator. It includes information about the Tizen.Wearable.CircularUI, the Xamarin.Forms extension for Tizen .NET wearable apps, which was created for Galaxy Watch's small circular display. For more details, see Tizen.Wearable.CircularUI git and Tizen.Wearable.CircularUI guide.
Before you start developing Tizen applications, set up the development environment.
Create a Tizen wearable project
- Launch Visual Studio.
- From the Visual studio menu, select File > New > Project> Tizen 4.0.
Note: If you select Tizen 5.0 for your application, it can be installed in Tizen devices with platform versions of Tizen 5.0 or above. For optimal compatibility, we use Tizen 4.0 in this post. - Select the Tizen Wearable App template or the Tizen Wearable XAML App template when the Tizen Project Wizard popup window appears.
- We used Tizen Wearable XAML App.
- Define the project properties and click OK. Enter the project's Name, Location, and Solution name.
- Xamarin.Forms and Tizen.Wearable.CircularUI are added to the generated project.
Enhance the application with CircularUI
This section describes the use of CircleListView, Check, and CirclePage while using CircularUI controls. For more information, see the CircularUI guide.
Add CircleListView in CirclePage
The following example shows XAML code in the MainPage.xml
file, generated by the template. It has only one label in a StackLayout
.
<?xml version="1.0" encoding="utf-8" ?>
<c:CirclePage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:c="clr-namespace:Tizen.Wearable.CircularUI.Forms;assembly=Tizen.Wearable.CircularUI.Forms"
x:Class="TizenWearableXamlApp1.MainPage">
<c:CirclePage.Content>
<StackLayout>
<Label Text="Welcome to Xamarin.Forms!"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand" />
</StackLayout>
</c:CirclePage.Content>
</c:CirclePage>
How to add CircleListView in CirclePage.
- Remove the
Label
and add theCircleListView
. In this example,ListView
ItemSource
sets a list of strings. You can changeListView ItemSource
using Data Binding.- This
CircleListView
has 10 items and a header. - Each item's cell is a TextCell.
- The header layout is defined in
HeaderTemplate
.
BecauseCircleListView
inheritsListView
in Xamarin.Forms, almost all of the code is the same as inListView
, with one difference inCirclePage
:RotaryFocusObject
was set asCircleListView
's name. If theRotaryFocusObject
property is not set, the circular scroll bar on the right side of the display does not appear, andCircleListView
cannot receive bezel-interaction.
- This
Figure 1 shows a screen capture with RotaryFocusObject
set, and Figure 2 shows a screen capture without RotaryFocusObject
set.
Note: Some CircularUI controls (CircleListView
, CircleDateTimeSelector, CircleScrollView, CircleStepper, CircleSliderSurfaceItem) are set in RotaryFocusObject
in CirclePage
.
![]() |
![]() |
---|---|
Figure 1 | Figure 2 |
<?xml version="1.0" encoding="utf-8" ?>
<c:CirclePage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:sys="clr-namespace:System;assembly=netstandard"
xmlns:c="clr-namespace:Tizen.Wearable.CircularUI.Forms;assembly=Tizen.Wearable.CircularUI.Forms"
x:Class="TizenWearableXamlApp1.MainPage"
RotaryFocusObject="{x:Reference mylist}">
<c:CirclePage.Content>
<c:CircleListView x:Name="mylist" ItemTapped="OnItemTapped">
<c:CircleListView.ItemsSource>
<x:Array x:Key="array" Type="{x:Type sys:String}">
<x:String>Item 1</x:String>
<x:String>Item 2</x:String>
<x:String>Item 3</x:String>
<x:String>Item 4</x:String>
<x:String>Item 5</x:String>
<x:String>Item 6</x:String>
<x:String>Item 7</x:String>
<x:String>Item 8</x:String>
<x:String>Item 9</x:String>
<x:String>Item 10</x:String>
</x:Array>
</c:CircleListView.ItemsSource>
<c:CircleListView.Header>
<x:String>Header</x:String>
</c:CircleListView.Header>
<c:CircleListView.ItemTemplate>
<DataTemplate>
<TextCell Text="{Binding .}" />
</DataTemplate>
</c:CircleListView.ItemTemplate>
<c:CircleListView.HeaderTemplate>
<DataTemplate>
<Label
FontAttributes="Bold"
HorizontalTextAlignment="Center"
Text="{Binding .}"
TextColor="Red" />
</DataTemplate>
</c:CircleListView.HeaderTemplate>
</c:CircleListView>
</c:CirclePage.Content>
</c:CirclePage>
Create a custom cell using ViewCell and Check
In the above example, TextCell
is used to display text for each item, which is simplest way to display content in the ListView
cell.
This example shows you how to create a Custom cell using ViewCell and Check.
- All custom cells must derive from
ViewCell
. AddViewCell
inside aDataTemplate
, which is insideListView.ItemTemplate
. - Inside
ViewCell
, layout can be managed by any Xamarin.Forms layout. AddHorizontal
value toOrientation
to displayLabel
andCheck
horizontally. - Add
Label
to display text bindingItemSource
, and addCheck
control, which is a Tizen wearable-specificCheckBox
widget.Check
supports three DisplayStyle shapes (Default
,Onoff
, andSmall
). Each shape depends on the Tizen wearable device.
<c:CircleListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout HeightRequest="120" Orientation="Horizontal">
<Label
HorizontalOptions="CenterAndExpand"
Text="{Binding .}"
VerticalOptions="Center" />
<c:Check
DisplayStyle="Default"
HorizontalOptions="CenterAndExpand"
IsToggled="False" />
</StackLayout>
</ViewCell>
</DataTemplate>
</c:CircleListView.ItemTemplate>
The following screenshot shows this code deployed in a wearable-4.0-circle-x86 emulator. If you use a different emulator or a live target, Check
's shape will be different than shown.
Change CircleListView header style
In the previous example, the header's text size is smaller than the item's text, because CircleListView
has a fisheye effect. The center item is bigger than the item above and below it. To cancel the fisheye effect and add larger text, add CircleListView.CancelEffect
in the header's Label
and set the false
value (see the following example).
<c:CircleListView.HeaderTemplate>
<DataTemplate>
<Label
c:CircleListView.CancelEffect="True"
FontAttributes="Bold"
HorizontalTextAlignment="Center"
VerticalTextAlignment="Center"
Text="{Binding .}"
TextColor="Red" />
</DataTemplate>
</c:CircleListView.HeaderTemplate>
The following screenshot shows this code deployed in an emulator.
Add the bottom button in CirclePage
If you want to add a button such as Done or Cancel to the display:
- Use ActionButtonItem of the CirclePage.
ActionButtonItem
is placed at the bottom of the display and has a semicircular shape. - Use bind Command, which is invoked on activation after clicking the button.
<c:CircleListView.HeaderTemplate>
<DataTemplate>
<Label
c:CircleListView.CancelEffect="True"
FontAttributes="Bold"
HorizontalTextAlignment="Center"
VerticalTextAlignment="Center"
Text="{Binding .}"
TextColor="Red" />
</DataTemplate>
</c:CircleListView.HeaderTemplate>
</c:CircleListView>
</c:CirclePage.Content>
<c:CirclePage.ActionButton>
<c:ActionButtonItem Text="Done"/>
</c:CirclePage.ActionButton>
</c:CirclePage>
The following screenshot shows this code deployed in an emulator:
Build the application
In the Visual Studio menu, select Build > Build Solution. For more detailed information, see the Build the Application guide.
Deploy and run the application
To deploy and run the application on an emulator:
-
In the Visual Studio menu, select Tools > Tizen > Tizen Emulator Manager. Alternatively, click Launch Tizen Emulator in the Visual Studio toolbar to launch the Tizen Emulator Manager.
-
In Emulator Manager, select an emulator from the list and click Launch.
If no applicable emulator instance exists, go to this link for information on how to create one. -
Once you launch an emulator instance, you can deploy the application by clicking the emulator instance in the Visual Studio toolbar.
-
If the deployment is successful, the application launches on the emulator. The following figure shows the application on the wearable emulator.
Now that you've read this blog, try the helpful Tizen.Wearable.CircularUI extension of the Xamarin.Forms framework yourself to create watch face apps easily and efficiently.