How to Customize and Enhance Text Elements on a Watch Face
Most Fowziya Akther Houya
Engineer, Samsung Developer Program
Watch Face Studio (WFS) is an intuitive graphical tool that provides designers a means to design watch faces for the Wear OS smartwatch ecosystem without the need for coding. Basic information on a watch face is typically presented as text, and Watch Face Studio enables you to customize how the text is displayed.
This article introduces three features you can use to enhance the text on your watch face design:
-
Tag expressions
-
Curved text
-
Bitmap fonts
You can follow along with the demonstrations in this blog by downloading the sample project.
Tag Expressions
Tag expressions enable you to create watch face components for which the rotation, placement, and opacity changes based on tag values. The tag values represent watch data, such as the date and time, battery status, sensor and health data, moon phase, and mathematical operations.
For example, you can create a watch face that shows the date and time, and a progress bar that fills up each minute. This section describes how to implement this using tag expressions.
To implement the dynamic watch face:
-
Create a text component.
-
In the "Properties" panel, select the Text field text box.
-
Select the Tags button that appears.
Figure 1: Tags button
-
To add the hour text, from the tag list, select [HOUR_0_11], then select Done.
Figure 2: Tags list
-
Similarly, to add the minutes text, create a text component with the [MIN] tag.
-
To implement the progress bar for the seconds display:
a. Create a progress bar component.
b. Define its value as the [SEC] tag and set its maximum value to 60.
-
Create text components for the date-related elements: [DAY_WEEK_F] (day of the week), [MON_F] (name of the month), and [DAY_1_31_Z] (day of the month).
NoteYou can also display the weekday and month information as numbers, by using different tags. Keep in mind that in Watch Face Studio, Sunday is the first day of the week.
The following figure shows the progress bar on the watch face after some visual adjustments.
Figure 3: Seconds progress bar on watch face
For more examples of tag expression implementation, see the Tag Expressions Code Lab for Watch Face Studio.
Curved Text
You can place text around a curve by selecting from predefined angular ranges, or by defining a specific start position and distance. You can also easily set the text direction.
To place curved text around the top of the watch face:
-
Create a text component and define the text you want to display.
-
In the "Properties" panel, select Apply Curved-Text.
-
Select OK.
The curved text settings appear.
-
In the "Curving" fields, define the width and height of the circle or oval around which the text is to be placed. The width and height values are in pixels.
For this demonstration, set both the width and height to 436.
-
To place the text around the top of the watch face, in the "Range" section, select the upper half circle.
Figure 4: Configuring the curved text
The following figure shows the curved text on the watch face after some visual adjustments.
Figure 5: Curved text on a watch face
Bitmap Font
Bitmap fonts enable you to replace information on the watch face, such as digits, symbols, and day of the week, with customized images. Use different icons and images in the bitmap font to make your watch face more interesting.
To implement icons for the AM/PM tag:
-
Create a text component.
-
In the "Properties" panel, select the Text field text box.
-
Select [AMPM] from the tags list, and select Done.
Figure 6: AM/PM tag
-
In the "Text appearance" section, select Bitmap Font.
-
Open the "Bitmap Font Setting" dialog.
Figure 7: Bitmap font configuration
-
In the "Bitmap Font Setting" dialog, select the Other tab.
-
To add an image for a specific string, select + and browse to the image on your computer. Do this for both the "AM" and "PM" strings.
-
To close the dialog, select OK.
Figure 8: Adding a bitmap font image
The watch face displays the selected images in place of the "AM" and "PM" text strings.
-
A watch face can have multiple bitmap fonts. You can add another bitmap font from the dropdown menu and apply different bitmap fonts to different text elements.
Figure 9: Creating another bitmap font
Conclusion
Watch Face Studio provides various text options for the watch face. The text customization features described in this blog can help you create an eye-catching watch face.
Resources
For more information about Watch Face Studio, see the Watch Face Studio documentation. You can also visit the Samsung Developers Forums, an active and friendly community where you can ask for and receive help with your application development.
The Samsung Developers site has many resources for developers looking to build for and integrate with Samsung devices and services. Stay in touch with the latest news by creating a free account and subscribing to our monthly newsletter. Visit the Marketing Resources page for information on promoting and distributing your Android apps.
To learn more about customizing your watch face, see also the Design Complications Using Watch Face Studio blog.
