Develop Galaxy Watch Apps using CircularUI

tutorials

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 the CircleListView. In this example, ListView ItemSource sets a list of strings. You can change ListView 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.
  
  Because CircleListView inherits ListView in Xamarin.Forms, almost all of the code is the same as in ListView, with one difference in CirclePage:
  - RotaryFocusObject was set as CircleListView's name. If the RotaryFocusObject property is not set, the circular scroll bar on the right side of the display does not appear, and CircleListView cannot receive bezel-interaction.

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. Add ViewCell inside a DataTemplate, which is inside ListView.ItemTemplate.
Inside ViewCell, layout can be managed by any Xamarin.Forms layout. Add Horizontal value to Orientation to display Label and Check horizontally.
Add Label to display text binding ItemSource, and add Check control, which is a Tizen wearable-specific CheckBox widget. Check supports three DisplayStyle shapes (Default, Onoff, and Small). 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.

custom_cell

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.

header_no_fisheye

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:

bottom_button

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.