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). note : you 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 note : you can also implement curved text on complications. 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 note : the sample project contains two bitmap fonts. 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.

galaxy watch learn about your options for developing apps for galaxy watch develop apps for galaxy watch, running on wear os powered by samsung to start creating an application for galaxy watch, click the button below to view the principles of development. get started watch face studio get acquainted with watch face studio, which lets you turn your ideas into wear os watch faces! learn more galaxy watch studio converter you can easily convert watch faces you’ve created with galaxy watch studio into wear os watch faces. try it now! get started play store asset creator create a professional-looking product detail page for play store using the asset creator, a photoshop template that is quick and easy to use. learn more develop apps for galaxy watch, running on tizen all the documents and data you need to develop galaxy watch apps for tizen get started community forums ask questions and find answers in our forums. watch face studio galaxy watch for tizen

one ui watch find the latest news on one ui watch and watch face studio design apps for galaxy watch, running on wear os one ui watch on a new unified platform will create an entirely new galaxy watch experience. to start creating an application for galaxy watch, check out the design principles and information on various interaction types. get started design principles watch face studio get acquainted with watch face studio, which lets you turn your ideas into wear os watch faces! learn more galaxy watch studio converter you can easily convert watch faces you’ve created with galaxy watch studio into wear os watch faces. try it now! get started design apps for galaxy watch, running on tizen understanding the basic approaches to design for the watch’s compact circular display. design principles galaxy watch studio for tizen galaxy store asset creator create a professional-looking product detail page for galaxy store using the asset creator, a photoshop template that is quick and easy to use. learn more

design a watch face using mask and moon phase tags objective design a watch face that shows the eight phases of the moon using the mask feature and moon phase tags in watch face studio. overview watch face studio is a graphical authoring tool that enables you to design watch faces for the wear os smartwatch ecosystem, including galaxy watch4 and newer versions. it provides easy and simple features, such as masking and tag expression, for creating attractive and dynamic watch faces without coding. masking is the technique of hiding or revealing parts of a layer based on the shape outline of the bottom layer. you can use it to enhance visual impact, create special effects, or draw focus to specific areas of an image. tag expressions are conditions in watch face studio that let you dynamically configure the movement and data of a watch face. what is moon phase? the moon completes its orbit for approximately 28 days, undergoing a singular lunar cycle from new moon to new moon. this lunar cycle is divided into eight distinct phases with 28 positions. the visible appearance of the moon, as observed from earth, is referred to as its phase. moon phase position (days) type of moon phase 0~0.5 new moon 0.5~0.65 evening crescent 7 first quarter 7.5~13.5 waxing gibbous 14 full moon 14.5~20.5 waning gibbous 21 last quarter 21.5~27.5 morning crescent 27.5~28 new moon set up your environment you will need the following: watch face studio galaxy watch4 or newer smart watch running on wear os3 or higher sample project here is a sample project for this code lab. download it and start your learning experience! moon phase sample project (1.41 mb) start your project download the sample project file, and click open project in watch face studio. locate the downloaded file, then click open. show grid, coordinate axis and rulers to set the different positions of the moon accurately and easily, you can utilize the coordinate system of the watch face studio. select the show grid, show coordinate axis, and show rulers options from the view menu. it will display a grid on the canvas, the x and y axis, and rulers for precise measurement and placement of components. the center placement of the entire watch face is (225,225). noteyou can change the grid's color from the preferences > view. create two mask groups when you mask two or more images, the shape of the bottom-most layer determines the visible area of the mask group. the layers above it appear only through the shape outline of the bottom layer. for example, if you place a square image on the bottom layer and an image in the layer above it, the image appears only through the square outline of the bottom layer. the sample project consists of two similar images of the moon (moon_qgf and moon_nc) and two different shapes as bottom layers (moon_qgf_layer and moon_nc_layer). using these components, create two mask groups to use for simulating eight major moon phases: select moon_qgf and moon_qgf_layer images and click mask. rename the mask group as moon_qgf_mask. it will cover five moon phases: the first quarter, waxing gibbous, full moon, waning gibbous, and last quarter. do the same for moon_nc and moon_nc_layer to cover the remaining moon phases: the new moon, evening crescent, and morning crescent. rename the mask group as moon_nc_mask. tipread use masks to get creative with watch faces to explore other possibilities of masking. add tag expressions to simulate different moon phases watch face studio provides tags to determine the moon phase's type (moon_ty) and position (moon_po). the corresponding tag values per moon phase are listed in the table below: moon phase [moon_ty] values [moon_po] values new moon 0 0~0.5 evening crescent 1 0.5~0.65 first quarter 2 7 waxing gibbous 3 7.5~13.5 full moon 4 14 waning gibbous 5 14.5~20.5 last quarter 6 21 morning crescent 7 21.5~27.5 new moon 0 27.5~28 using tag expressions, adjust the properties of each mask group and its bottom-most layer to dynamically show each moon phase in different placements. you can lay out the moon phases as below: gibbous, quarter, and full moon the moon_qgf_mask currently displays the full moon, and its placement coordinate is (195, 23). use the grid lines and rulers to determine the placement of the other four moon phases: the first quarter, waxing gibbous, waning gibbous, and last quarter. add tag expressions to the placement (x and y) and color properties of moon_qgf_mask: placement - x coordinate move the mask group to the left of the full moon for the first quarter and waxing gibbous and to the right for the waning gibbous and last quarter. replace each x with the distance (in pixels) between the x-placement of the full moon and the preferred x-placement of the other four moon phases. ([moon_ty] == 2)? -x: ([moon_ty] == 3)? -x: ([moon_ty] == 5)? + x: ([moon_ty] == 6)? + x : 0 placement - y coordinate move the mask group down. replace each y with the distance between the y-placement of the full moon and the preferred y-placement of the other four moon phases. ([moon_ty] == 2)? + y :([moon_ty] == 3)? + y :([moon_ty] == 5)? + y :([moon_ty] == 6)? + y : 0 color - opacity show moon_qgf_mask only if the mask group covers the current moon phase. otherwise, hide it. ([moon_ty] ==2) + ([moon_ty] ==3) + ([moon_ty] ==4) + ([moon_ty] ==5) + ([moon_ty] ==6)?0:-100 change the moon's appearance by adjusting the dimension and image placement of moon_qgf_layer using tag expressions: placement - x coordinate move the image to the right of the moon image for the first quarter and waxing gibbous and to the right for the waning gibbous and last quarter. replace each x with the length of the portion to hide. if the moon image is 50px and the quarter moon shows only half of it, then the portion to hide is ~25px. ([moon_ty] == 2)? +x: ([moon_ty] == 3)? +x : ([moon_ty] == 5)? -x : ([moon_ty] == 6)? - x: 0 placement - y coordinate move the image up for the first and last quarter. ([moon_ty] == 2)? -y: ([moon_ty] == 6)? -y : 0 dimension - height for the first and last quarter, adjust the height (h) to transform the image from a circle to an oval shape to simulate the appearance of a quarter moon. ([moon_ty] ==2)? h: ([moon_ty] ==6)? h: 0 crescent and new moon the moon_nc_mask currently displays the evening crescent, and its placement coordinate is (6, 110). changing its placement and dimension properties can show the rest of the moon phases: the morning crescent and the new moon. similarly, add tag expressions to the properties of moon_nc_mask: placement - x coordinate move the mask group slightly to the left of the evening crescent when the new moon's position is 0.5 or less. otherwise, move the mask group to the opposite side of the watch face; the same for the morning crescent. replace each x with the distance between the x-placement of the evening crescent and the preferred x-placement of the other moon phases. ([moon_ty] == 0)? ([moon_po] <= 0.5)? -x: +x: ([moon_ty] == 7)? +x: 0 placement - y coordinate move the mask group down for the new moon. replace y with the distance between the y-placement of the evening crescent and the preferred y-placement of the new moon. ([moon_ty] == 0)? +y: 0 color - opacity show moon_nc_mask only if the mask group covers the current moon phase. otherwise, hide it. ([moon_ty] ==0) + ([moon_ty] ==1) + ([moon_ty] ==7)?0:-100 change the moon's appearance by adjusting the image placement of moon_nc_layer using tag expressions: placement - x coordinate move the image slightly to the right of the moon image when the new moon's position is 0.5 or less. otherwise, move the image to the left. replace each y with the distance between the initial x-placement of the layer and the preferred x-placement; to hide portions of the moon image to simulate the appearance of the other moon phases. ([moon_ty] == 0)? (([moon_po] <= 0.5)? +y: -y): ([moon_ty] == 7)? -y: 0 test the watch face in the run pane, click the preview watch face icon. adjust the date to see the moon change from one phase to another. you can check for a complete lunar cycle from 18 july 2023 to 16 august 2023. to test your watch face on a smart watch, you need to: connect a watch device to the same network as your computer. in watch face studio, select run on device. select the connected watch device you want to test with. if your device is not detected automatically, click scan devices to detect your device or enter its ip address manually by clicking the + button. notethe always-on display is already set in the project. to run the watch face successfully, you may need to configure its always-on display to avoid any error when you run on device. you're done! congratulations! you have successfully achieved the goal of this code lab. now, you can use mask and moon phase tags for making a dynamic watch face in watch face studio all by yourself! if you're having trouble, you may download this file: moon phase complete project (1.87 mb) to learn more about watch face studio, visit: developer.samsung.com/watch-face-studio

good lock plugin overview watch face studio (wfs) good lock plugins enable you to create custom skins for galaxy mobile devices. in the same way as creating a watch face, you can use wfs's intuitive interface to add images, watch elements, and watch movements to your custom skin. the plugins also allow you to test the custom skin on a connected galaxy mobile device. for information about using wfs, see watch face studio user guide. to customize an android-based galaxy mobile device, make sure that the plugin supports the device’s one ui version. the clock face plugin supports customizing cover screens for selected galaxy flip devices with one ui 5.1.1 or higher. plugin compatibility support for specific plugins and plugin versions depend on the wfs version. if your wfs version does not support a specific plugin version, wfs informs you when you try to install the plugin. to open and edit a project, your wfs must have a higher plugin version installed than the one used to create the project.

watch face studio is an intuitive graphical tool that provides designers a means to design watch faces without jumping into complex coding. complication design is a major feature of this tool, and layout is a vital property of complications. the layout enables you to place components as you wish to create eye-catching watch faces. to learn more about complications, see the design complications using watch face studio blog post. watch face studio has six complication types: short text monochromatic image ranged value long text small image large image each complication has a set of layout options. you can use the layout to present information in a coherent way and make important elements stand out. this article introduces three important behaviors that you must keep in mind when working with complication layouts. blank elements in the default layout some complication providers do not provide data for all the components on a complication. elements without data remain blank on the watch face. for example, figure 1a shows the default layout for the short text complication. it displays the icon, title, and text from the provider. the "step count" provider does not include an icon. if the default layout is used with the "step count" provider, the watch face is blank where the icon is normally displayed, as shown in figure 1b. (a) "icon + text + title" layout (b) no icon for step count figure 1: blank icon slot for step count specifying a single layout watch face studio provides four possible layouts for the short text complication. to implement one specific layout only, you must remove the unwanted layouts from the layout list. for example, if you want to use only the "icon + text" layout, select it and remove the others. (a) keep desired layout and remove others (b) "icon + text" layout on watch figure 2: setting a specific layout components moving between layouts as previously discussed, complication components appear blank when there is no data provided for them. to avoid displaying blank components, you can implement multiple layouts. in this case, the watch automatically selects the appropriate layout based on the complication provider. components changing position this section demonstrates an issue commonly faced when implementing multiple layouts. when the watch switches between layouts, the position of complication components can change undesirably. in figure 3, a short text complication has been selected. to visualize the original position of each component, rectangles have been drawn around them, matching the component boundaries. when the default provider is set to "sunrise sunset" and the default "icon + text + title" layout is selected, the run preview shows the icon and text displaying perfectly within the bounded area. figure 3: visualizing the positions of the default layout components figure 4 shows what happens when the layout is switched to "text + title." the components’ positions have changed and are no longer aligned with our rectangles. note : watch face studio allows you to select and preview any layout. on an actual watch, the user cannot modify or switch layouts. figure 4: complication components changing position between different layouts in figure 5, the watch face has been deployed. customizing the complication reveals that the components do not consistently display in the same location. for example, with the "bixby" or "barometer" providers, the components are in the appropriate positions. however, the components of "feels like temp." and "step count" are not in alignment. (a) bixby (b) feels like temp. (c) step count (d) barometer figure 5: complication components changing position between different layouts on an actual watch fixing the position of complication components this section demonstrates how to make the position of complication components consistent, where the end result is the fixed layout. this resolves the problem of components changing position between layouts. you can follow along with the demonstration by downloading the sample project. to fix the position of complication components: in watch face studio, add a short text complication. to create a rectangle, select add component > shape > rectangle. note : instead of a rectangle, you can also use an ellipse. adjust the position and size of the rectangle to fit the entire layout. set the opacity of the rectangle to 0%. the rectangle becomes invisible. note : in the sample project, for demonstration purposes, the rectangle’s opacity has been set to 20%. give the shape a descriptive name, such as “icon, text, title background.” add the rectangle to the short text complication layout, placing it beneath the icon component. figure 6: adding the rectangle to the layout add the remaining layouts ("text + title," "icon + text," and "text") to the complication. repeat steps 2 to 6 for each layout you want to implement. the following figure shows the result in watch face studio. figure 7: watch face studio view after adding background rectangle when the project is deployed to the watch, the complication components stay in the same place even when switching between layouts. (a) bixby (b) feels like temp. (c) step count (d) barometer figure 8: consistent component position between different layouts conclusion watch face studio provides various layout options for the watch face. the layout considerations described in this blog can help you create an effective layout that enhances and communicates your design to the user. resources for more information about complications, see build complications in watch face studio. you can also visit the samsung developers forum, 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.

create a watch face using tag expressions objective learn how to create a watch face that responds based on the date, time, step count, heart rate, and battery level using tag expressions in watch face studio. in this code lab, you will create a basic watch face with complications such as step count, heart rate, and battery level. later, you will improve its functionalities and make it visually dynamic using tag expressions. overview watch face studio is a graphic authoring tool that enables you to create watch faces for wear os. it offers a simple and intuitive way to add images and components, and to configure the watch movement without any coding. watch face studio supports watch faces for the galaxy watch4 or newer version, and other watch devices that run on the same platform. tag expressions are conditions in watch face studio that allows you to customize watch face through dynamic configuration of its movement and data. set up your environment you will need the following: watch face studio galaxy watch4 or newer any supported wear os watch start your project create a new project and input project name. a blank studio will show upon clicking ok. add analog hands and index watch face studio allows you to add components like text, image, shape, analog hands, and index in a watch face. for your watch to have the look and feel of an analog watch, add the following components: time > index time > analog hands > minute time > analog hands > hour notethe index and watch hand images used in this code lab are no longer included in the latest version of the watch face studio. however, you can choose a design for the index and watch hands from available images in the resources folder. you can also create and add your own design. you will see that the hands move automatically and in sync with the device time. select all the newly added components and click group. rename the group as group_analogtime. use a progress bar for seconds a component like a progress bar can be used to show how much of the process is completed and how much is left. in this step, you will use it to show how far or close the next minute is. to use a progress bar as seconds: click add component and select progress bar. rename the component to seconds. move seconds behind group_analogtime. in properties of seconds, do the following: a. adjust the dimension (width and height) to 395. b. align the component to the center. c. drag the background slider to 0%. d. make sure that the type is a circular progress bar; otherwise change it. e. in range setting, change value to 0 and click tags beside it to open the tags window. f. type in [sec]. it means that the value from 0 will increment as the value of the second increases. g. set max value to 59 since it is the maximum value of [sec]. notein this scenario, the progress bar disappears in the canvas as the preview only uses the base value, which is 0. however, the component is still present in run. format and position a digital clock in this step, you will learn how grouping works and affects its components. you will also learn how to format the date and time using tags. to format and position a digital clock, you need to: add a digital clock > time twice. rename them as hour and minute, respectively. add a digital clock > date and rename the component as date. put them in one group and rename it as group_digitaltime. go to the properties of hour and change the text appearance to 80. do the same for minute. adjust the text size of date to 15. adjust the y placements of the individual components to look like the image below. when you change a certain component, it won’t affect other components in the group. format hour to only show the time in hour: a. go to its properties and click the tags button in text field. b. replace text field value with [hour_0_23_z] to show the current hour with leading zero. do the same for minute but replace the text field value with [min_z] to show the current minute in an hour with leading zero. go to group_digitaltime placement properties and align it horizontally. after that, place it to the left. you will see the components adjusted as a group. utilize health features and battery level watch face studio also allows you to utilize data like step count, heart rate, and battery level. follow the steps below to show these real-time data using tags on texts or progress bar: battery level add a circular progress bar and rename the component as battery level. drag the background slider to 0%. go to value properties. replace the value with 0 and, in tags, input or choose [batt_per] to use the current battery percentage as the value. add a circle complication slot and rename it as battery icon. complications are a set of components that can be handled as one group. set the type to fixed and change the default provider to watch battery. select short text as complication type and choose icon + text for layout. select and move battery level and battery icon together to the bottom right. heart rate add a circular progress bar and rename the component as heart rate. drag the background slider to 0%. go to value properties. replace the value with 0 and, in tags, input or choose [hr] to use heart rate as value. set the max value to 240 since it's the maximum heart rate a person can have. add a text component and rename it as heart rate label. in the text field, input heart rate and change the text size to 12. change the y placement to 195. add another text component and rename it as heart rate text. in the text field, input [hr] and change the text size to 30. group heart rate, heart rate label, and heart rate text together. rename the group as group_heartrate. move the group_heartrate placement to the center right. step count add a circular progress bar and rename the component as step count. drag the background slider to 0%. go to value properties. replace the value with 0 and, in tags, input or choose [sc_per] to use the current percentage to the goal of step count. add a circle complication slot and rename it as step count text. set the type to fixed and change the default provider to step count. select short text as complication type and choose text + title for layout. it will now show "steps" as title and step count as text. place the step count text in the center horizontally. select and move step count and step count text together to the top right. select group_digitaltime, group_batterylevel, group_heartrate, group_stepcount, battery icon, and step count text. drag them behind group_analoghands and seconds. by doing this, the analog hands would overlap the components. make use of tag expressions you already have three progress bars that show data of battery level, heart rate, and step count. this time, you will make these features more functional by changing the progress bars' color to red using tag expressions. tag expressions are conditions that allow you to change the rotation, placement, behavior, and opacity of a component based on tag values. it can alter your watch face's appearance dynamically as the tag value changes. tag expressions support different types of operators – arithmetic, relational, logical, and ternary. for this step, you will apply tag expressions on the color opacity. but first, you will have to: duplicate all the circular progress bars (seconds, battery level, heart rate, and step count). move all the duplicates to a new group called group_colorchange. make sure that group_colorchange is behind all other groups. change individual component’s color to #ffffff or white. duplicate this group and rename it as group_background. move it behind group_colorchange. drag the background slider to 16% and remove tags in the value properties of each component of group_background. change group_colorchange color to #ff001e or red. group_colorchange will be used as components underneath when you set the opacity of the main components to 0 using tag expressions. group_background will serve as gap fillers of each progress bar. below are conditions that will trigger the opacity of the main components to become 0 and reveal the duplicated red components: change the color of the battery level to red if the battery level is equal to or less than 20% go to group_batterylevel and select battery level. navigate to color properties. check if the color opacity value is 100. this will serve as the base value. in tags, input [batt_per]<=20?-100:0 to subtract 100 from the base value of opacity if the battery level is equal to or less than 20. otherwise, the base opacity value remains the same. in the run pane, adjust the device > watch battery to 20% or less, and you will see how the color will change to red. change the color of step count to red if the goal hasn't been reached yet and the time is already 18:00 (6:00 pm) or beyond go to group_stepcount and select step count. navigate to color properties. check if the color opacity value is 100. this will serve as the base value. in tags, input ([sc]<[sc_goal])*([hour_0_23]>=18)?-100:0 to subtract 100 from the base value of opacity if the step count is less than the goal, and if the value of hour in a day is 18 or beyond. otherwise, the base opacity value remains the same. play with the time control bar in the run pane and health > steps data to see how the color will change from blue to red. change the color of the heart rate and seconds to red if the heart rate is below or above the normal go to group_heartrate and select heart rate. navigate to color properties. check if the color opacity value is 100. this will serve as the base value. in tags, input ([hr]<60)+([hr]>100)?-100:0 to subtract 100 from the base value of opacity if the heart rate is below or above the normal (60-100). otherwise, it remains the same. do the same for seconds. test it in the run pane by adjusting the health > heart rate to below 60 or above 100, and you will see how the color will change to red. prolong the battery life now that you already know what group and tag expressions are, it's about time for you to use both to your advantage. it is observed that the darker a watch face design is, the longer the battery life can be. to help the watch stay powered even when there’s a little battery left, you will need to decrease the opacity of the watch face when the battery level is equal to or less than 10%. to do this, you have to: select and combine all created groups and components, except for group analogtime, battery icon, and step count text, to a new group called group_watchface. go to group_watchface color properties and change the base opacity value to 20 in tags, input [batt_per]<=10?0:80 to add 0 to the base value of opacity if the battery level is equal to or less than 10. otherwise, it adds 80 to the base value, making the watch face 100% visible. adjust the device > watch battery to 10% or less, and you will see how most components' opacity decreased. choose components for always-on always-on display is a feature that allows your galaxy watch to show the time without checking on it by pressing a button or lifting your hand. in watch face studio, you can choose which group or component to display on the always-on by following these steps: go to the always-on tab, to see the same set of components you added and grouped. click the eye icon next to the group name to hide or make it visible. hide group_watchface, battery icon, and step count text. at this point, your always-on display will display a basic analog watch face whenever your watch is in idle mode. test the watch face to test your watch face, you need to: connect a watch device to the same network as your computer. in watch face studio, select project > run on device. select the connected watch device you want to test with. if your device is not detected automatically, click scan devices to detect your device or enter its ip address manually by clicking the + button. you're done! congratulations! you have successfully achieved the goal of this code lab. now, you can create and design a watch face using tag expressions by yourself! if you're having trouble, you may download this file: tag expression complete project (272.71 kb) to learn more about watch face studio, visit: developer.samsung.com/watch-face-studio

test your watch face watch face studio (wfs) lets you test your watch face both within the tool and on a device. testing in watch face studio in wfs, preview your watch face in the run panel on the right side of the screen. capture your work from the preview window, you can take a screenshot of your watch face preview and save it as an image to your computer. you can use this as the preview image of your watch face when you upload it to the play store, for example. figure 1. watch face preview preview your always-on watch face when you preview the always-on version of your design, you can check the on-pixel ratio. keeping this ratio lower than 15% saves battery life. figure 2. watch face preview and always-on design analyzer, showing the on-pixel ratio preview on watch switch to the watch preview to show your watch face with a device and strap. click through the watch options to preview your watch face on various simulated devices. figure 3. previewing watch face on different watch bodies testing on a physical device it is often useful to test your watch face on a physical watch. to connect your watch and computer for debugging: enable debugging on the watch. ensure that the watch is connected to the same wi-fi network as your computer. in wfs, select project > run on device. in case of wear device running android 11 (api level 30), select + button and enter your watch’s ip address. in case of wear device running android 13 (api level 33) or higher, select + button and enter watch’s ip address, ip port, pairing code and paring port of paired device. select ok. wfs scans for and attempts to connect to the device. figure 4. enter ip address, ip port, pairing code and paring port of paired device

watch face design review thank you for your interest in becoming a galaxy watch face designer! for galaxy watch4 and later, you are no longer required to have a watch face design partnership with samsung in order to distribute watch face designs. starting with galaxy watch4, samsung switched the watch os from tizen to wear os powered by samsung and new watch apps developed for galaxy watch4 and later are distributed through google play store. if you are a first-time watch face designer or developer: welcome! you are not required to have a watch face design partnership with samsung in order to distribute your designs in play store. discover the options for developing apps for galaxy watch, including watch face studio and the play store asset creator. you can learn more about the principles of wear os development and distributing to wear os from the android developer web site. if you are a previous watch face designer or developer: on february 8, 2023, you will no longer be able to register new tizen-based watch apps in seller portal. instead, we ask that you create your new watch apps for wear os powered by samsung and distribute them from the play store for the latest galaxy watches. note that you can continue to update your existing tizen-based watch apps in seller portal. if you use galaxy watch studio for tizen, we provide some tools to help you transition to wear os powered by samsung, including watch face studio and the galaxy watch studio converter.

watch face studio (wfs) is a powerful tool for creating custom watch faces for galaxy watches running on wear os powered by samsung. wfs has many features that enable you to create attractive watch faces, such as masking. masking is used to selectively hide or reveal specific parts of a specific layer. you can use it to enhance visual impact, create special effects, or draw focus to specific areas of an image. in wfs, a mask is defined by the bottommost layer of the layers to be masked. in other words, the lowest layer is a mask container that partially hides the layers above it. this article describes how you can use masks in wfs to create a simple watch face with a color-changing effect on the watch index and date. at the end of this blog, you will find a sample project which i am going to demonstrate here. color-changing watch index to create a watch index that appears to change color, define a watch index that selectively shows a rotating image. step 1: create a rotating image first, create an image for the colors of the watch index. to set the image to rotate each second, in the image properties, enter the following tag expression as the rotation angle: [sec]*60 figure 1: define the rotating image step 2: add the watch index next, add a suitable watch index, such as one consisting of digits. since we want the color image to show through the digits on the watch index, move the watch index layer below the image layer. the watch index layer will become the mask container. figure 2: watch index layer below image layer step 3: create the mask select both the image and watch index layers and click “mask.” figure 3: create the mask the image layer is now masked by the watch index. as the image layer rotates, the portion visible through the watch index changes, creating the appearance of a changing color background. figure 4: watch index with color-change effect color-changing date text a mask can also be applied to multiple layers simultaneously. combined with tag expressions, you can create effects such as colors that scroll across text. step 1: create and configure the color images create seven images in different colors on separate layers. to make each image move sideways every second, in the image properties for each layer, define the tag expression for image placement using the following formula: [sec] <= x ? 0 : ([sec] - x)*4 in the formula, replace “x” with “0” for the topmost layer, “10” for the second layer, and so on, incrementing by 10 for each layer. do not define a tag expression for the bottommost layer. figure 5: define tag expressions when the seconds value is equal to or less than x, the image is in its initial position. as the second value increments past x, each second the image moves 4 pixels to the right. to make it easier to work with the set of color images, select all of them and add them to a group. step 2: add the date component and mask create a digital clock date component and adjust its size to cover the color images. in a similar way to creating the mask for the watch index, move the date component to the bottom layer. select it and all the color images above it, then click “mask.” all the color image layers are simultaneously masked by the date text. figure 6: masked date component to complete the watch face, add watch hands to it. watch face preview when you have implemented both the watch index and date, you can preview the watch face in wfs. download the sample project from here and open it with watch face studio. click “run” and select “on watch” to see how the watch face looks on a real device. figure 7: watch face preview note : watch faces with multiple masks can affect device performance. conclusion image masking is a powerful technique that can be used to enhance or manipulate images in various ways. watch face studio makes it easy and intuitive to implement masked text layers in your design, enabling you to create unique and attractive watch faces. for more information about watch face studio, see the watch face studio documentation. you can also visit the samsung developers forum, an active and friendly community where you can ask for and receive help with your application development. if you face any issue regarding wfs, feel free to contact the developer technical support team. sample mask project (247kb) apr. 18, 2023