always-on in watch face studio always-on mode, also called ambient mode, is designed to display time and other information while using less battery life. because the always-on watch face uses less power, there are limits to how much of an always-on display surface can be used. samsung recommends a design that uses no more than 15% of the available pixels in always-on states. if your watch face uses significantly more than 15% of available pixels, it can be rejected. watch face studio (wfs) automatically generates an always-on version of your watch face. you can use the generated version in your final product or modify it. once you are happy with your always-on watch face, continue with the rest of your design by switching to normal mode. figure 1. normal and always-on design modes in wfs

build complications in watch face studio watch face studio (wfs) helps you to create and customize watch face complications that display additional information on a watch face. complications display data from a data source. this lets you display additional information on your watch face without needing to use extra code. adding complications to create a complication, select a complication slot from the add component button in wfs. you can allow users to customize the displayed data for each slot, as long as the data provider supports the data that the complication displays. figure 1. complication slots a complication slot consists of complication components and a slot bound. the components implement the layout, and the slot bound a cut-out through which the complication component appears, in a similar way to masking. the following table lists the available complication slots, their slot bound shapes, and the supported layout types for the shapes. complication slot slot bound shape supported layout types circle circle short text range value small image icon line rectangle short text small box rectangle short text small image icon large box rectangle long text range value small image table 1. complication slots and their slot bound shapes figure 2. slot bound shapes configuring complications you can configure various settings for a complication: editable or fixeded to allow the user to customize the complication data and provider, select editable. to limit the complication data and provider to the values you define, select fixed. figure 3. editable complication setting supported types select the layout types you want to show in the default provider list for your design. all layout types are selected by default. if you select multiple complication layout types, you can reorder the list by priority. in the following figure, short text is at the highest priority, so if an application provides ranged value and short text data, the complication slot shows the short text. figure 4. example of supported types and default provider for a circle complication slot default provider the default provider defines which data is to be displayed in the complication slot when the watch face is installed. it uses the selected layout type. managing complication layouts when you add a complication slot to your project, it contains 1 or more predefined layouts. the predefined layouts are optimized for the slot type, but you can modify them to suit your design needs. the supported layout types you define for the complication slot affect the available layouts. figure 5. predefined layouts for each layout type testing complication designs to check the size and placement of the data elements in your complication design, you can define test content, such as text or images, for each component in the complication. this test content is dummy content that is not shown on the actual watch face when you publish it. figure 6. test content for complication design

manage a watch face studio project a project in watch face studio (wfs) contains everything that defines your watchface, from assets to build configurations. when you start a new project, wfs creates the necessary structure for all your files. this guide provides an overview of the key components that make up your project. project management manage projects on the wfs landing page. the options include the following: my workspace: view the list of all projects stored on your local machine. recent project: view a list of projects you recently worked on. starred project: view the list of projects you previously starred. new project: create a new watch face project. open project: open an existing project. figure 1. wfs landing page each folder has a view type, sort option, and search box. you can view your folders in grid view or list view, and sort by last opened, date created, name ascending, or name descending. you can also use “move to my workspace” to move a project to a location that you have designated as a local workspace folder. sample projects provided with wfs are loaded with read-only options in the tool. to save your versions of these projects, select “save as”. project settings the following project settings are available in the settings window: general tab: you can set the default font. you can also set the bitmap font for the current project. the font you set here is also shown in the properties menu. health tab: you can define the step goal to be used for the daily step percentage calculation. it must be a value between 1 and 50,000. to use the step goal defined by the user on their device, select the sync to device option. figure 2. set step goal data tab: you can manage the text strings for style names, labels, and descriptions for the current project. each string has a unique text id and consists of a default text and, if defined, localized texts. this text id is used to display the text string on your watch face design. to facilitate reusing text strings, you can export and import the text strings in a format specific to watch face studio. figure 3. manage text strings if the text string supports multiple languages, select the enable localization option. for each supported language: define the language and region codes. language codes are based on iso 639-1, and country codes are based on iso 3166-2. enter the localized text. if the user selects a language not supported by your design, the text is displayed in the watch face’s default language. figure 4. localized text string preferences the following list describes the most important files and folders that configure the wfs environment: the general preferences include whether the launch screen defaults to showing recent projects or starred projects, and the location for your project files. the options section includes a feature to reenable all warnings and notice dialogs that were previously disabled. the layer settings include whether layers are named with their file names or with numbers. the appearance setting defines whether the watch face studio ui is in light mode, dark mode, or the system default theme. figure 5. appearance setting the view settings allow you to configure the grid, guidelines, and snap. the plugin preferences allow you to get mobile experience. please move on the plugin page. figure 6. plugin tab create a project to create a new project in wfs, follow these steps: from the wfs launch screen, select new project. if you already have a project open, select file > new project from the menu bar. confirm the width and height of your watch face. select ok. open an existing project to open an existing local project in wfs, follow these steps: select file > open project. in the open project dialog, navigate to the root directory of the project you want to open. select open. alternatively, you can open existing projects in the following ways: in wfs, select file > recent, then select your project. double-click a project file directly from a folder on your computer. wfs also supports importing gwd project files from galaxy watch studio. not all components and settings are necessarily imported because of operating system differences. encrypted gwd project files cannot be imported. to import your gwd file, select files > import gwd resource.

design a watch face with watch face studio this guide describes the main tools and ui in watch face studio (wfs). figure 1. watch face studio ui tools the wfs interface has a button bar that contains various tools. figure 2. wfs button bar add component: open a dropdown list of components you can add to your watch face. forward: move the selected component to the front of the canvas. backward: move the selected component to the back of the canvas. group: group multiple components together so they can be controlled as one component. ungroup: ungroup a group of components. mask: cover all or part of a group of layers based on the shape outline of the bottom-most layer in the group. publish: open the publication dialog to prepare your watch face files for uploading to the play store. run on device: scan for and connect to an actual watch device connected to the same wifi network as your computer, and preview the watch face on it. components add as many different components as you want to your watch face. you can also use a customized design source for your components. for example, you can display heart rate or step count data with a text component or add a custom image to launch an application. watch face canvas the canvas is the bottom layer of the watch face. you can set its background color. the canvas is cropped to a circle by default. to use a rectangular canvas, uncheck the apply circular crop option in the properties tab. in this case, the watch face shape is determined by the device on which it is installed. figure 3. canvas with circular crop figure 4. canvas without circular crop component types the following components are available for watch faces. text text fields hold normal text by default. normal text is static and does not change. in the properties tab for your text field, you can change the text field from normal text to data text. data text changes and is populated based on tags. for more information, see tag expressions. to create text that curves with the watch face, select the apply curved-text option. figure 5. creating curved text determine the curve of your text by setting the width (w) and height (h). changing w and h automatically changes the dimension of your text component. to determine the position of your text, select a range preset. you can also define a custom range by specifying the start point and angular distance. set the direction of your text to either clockwise (cw) or counter-clockwise (ccw). image import custom images. shape add various shapes, including rectangles, rounded rectangles and ellipses. progress bar add a progress bar to your watch face to track various activities. you can select from a linear or circular progress bar. to determine the position of your progress bar, select a range preset. you can also define a custom range by specifying the start point and angular distance. set the direction of the progress bar to either clockwise or counter-clockwise. animation to create an animation on your watch face using a sequence of images: create an animation sequence with a design program, such as adobe flash or adobe premiere. in wfs, select add component > animation. select the animation sequence images from the file browser, then select open. edit the animation by changing the order of the images, removing images, or adding images. figure 6. editing an animation to define when you want your animation to play, configure the trigger value. to start the animation as soon as the watch face is shown, set the trigger value to watchface on. you can also choose from other options, such as tap, every sec, every min, and every hour. you can also delay the start by a specific number of seconds. figure 7. defining the animation trigger you can also configure various additional animation options: auto replay immediately repeats the animation upon completion until an interruption occurs, such as turning the screen off. repeat delay sets a delay between iterations of the repeated animation. resume playback determines whether to resume the animation or start from the beginning when play is stopped because of an interruption, such as receiving a notification or a phone call. hide before playing determines whether to hide the animation until play is triggered. hide after finished determines whether to hide the animation when play is completed. multimedia to add an animated image file, such as an agif or webp image: in wfs, select add component > multimedia. select the file from your file browser, then select open. to define when you want your animation to play, configure the trigger value. keep in mind that the file size, image resolution, and number of frames in the multimedia image can affect device performance and battery consumption. multimedia images are loaded asynchronously during operation and can be delayed when playing, depending on the capabilities of the user’s watch and various characteristics of the image. analog hands add analog clock hands for hours, minutes, and seconds. figure 8. adding analog hands open the file browser to select an image file to import for each hand. analog clock hands have a “rotation” property, which has various options: sync with time zone rotate value movement effect figure 9. analog hand options to define the time interval or condition for the analog hand movement, configure the sync with option: hour in day minute in hour second in minute day of month month of year day of week day of year conditions: moon phase position, moon phase type when the hand is set to sync with second in minute (in other words, it is a second hand), the sweep movement effect is available. figure 10. sweep movement effect for second hand digital clock add a digital clock displaying the date or time. figure 11. adding digital clocks when adding a date display, you must also define the date format in a text component with date tags. the default display format for dates is day_week_s, mon_s day_1_31_z. when adding a time display, you must also define the time format in a text component with digital clock tags. the default display for digital time is hour_1_12_z:min_z:sec_z. component management manage your components using the wfs tools. you can add, group, ungroup, and order components on your watch face. add components add a supported component using the add component (+) button. figure 12. adding components when you add a component, it is placed in a default position on the canvas. the component is automatically selected so you can easily modify it. group or ungroup components a group is a combination of one or more components. all components can be grouped. groups can be ungrouped. figure 13. grouping components mask or unmask components when you use a mask group, 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 in the bottom layer and an image and an animation in the layers above it, the image and animation appear only through the square outline of the bottom layer. figure 14. creating a mask to create a mask group: select the layers you want to group. select mask from the button bar or right-click the layers and select mask. to unmask (release) the mask group: select the mask group. select unmask from the button bar or right-click the layers and select unmask. note:when the bottom-most layer of the mask group is deleted, the mask group is automatically released. preview area the preview area is your main working area when designing your watch face. add all watch face elements to the canvas in the preview area. on the canvas, drag elements into position and resize, arrange, and rotate them. figure 15. preview area layer list the layer list displays the components and groups shown in the preview area. each component has its own layer by default. figure 16. layer list within the layer list, you can: search: search for a layer by name. show or hide: show or hide layers, toggling their visibility in the preview area. theme color: toggle the theme colors. rename: rename a layer by double-clicking the layer name. note:by default, when you add a new component, a new layer is placed at the top of the list. layers added within a group are placed at the top of the group. by right-clicking a layer, you can: lock or unlock: lock the layer to its position on the canvas or unlock it so it can be moved. group or ungroup: group multiple components together so they can be controlled as one component or ungroups a group of components. mask or unmask: cover all or part of the other layers based on the shape outline of the bottom layer or remove the layer from a mask group. swap image: move the image file from one layer to another. only shown for images. layer color: define a color label for the layer to differentiate between layers in the layer list. conditional lines conditional lines let you show and hide components on a watch face and control the components' behavior. use conditional lines to change the appearance of your watch face in response to certain conditions, such as time, step count, battery, or event. when you add a component, the time condition is set by default. to adjust these conditions, click the condition icon on the desired layer. to set your conditional to repeat, right-click the frame area and select loop. figure 17. adding conditional lines keep in mind that layers that are not displayed do not reduce performance or affect battery life. you can set your watch face to respond to the time, step count, battery status, or an event, as described in the following sections. note:each layer responds to only one type of condition. for example, if a layer is set to change according to step count, any existing monitoring of other conditions stops. time your watch face can change dynamically based on time intervals. for example, your watch face can be bright during the day then gradually darken after a set time. you can set the time to be measured in hours, minutes, or seconds. to add a time condition: create the layers to be displayed conditionally. in the timeline, for each layer, set the time periods to control when each layer is displayed. click and drag the start and end handles to define a time range. to create another time range for the same layer, double-click and drag from the start time to the end time. to preview your changes, use the run panel and the time control slider. to display different watch faces for a 12-hour setting and a 24-hour setting based on the chosen setting on the user’s phone: add two digital clock components, the first component for the 12-hour version and the second for the 24-hour version. place them in the same position. add 12-hour and 24-hour conditions to the components' conditional lines. set time periods to show the first digital clock component for the 12-hour layer in the 12-hour format and to show the other layer in the 24-hour format. time control the time control slider lets you see your watch face in action. use this to preview how your watch face changes throughout the day. drag the slider to specific times or view your watch face animations by using the play and fast-forward buttons. figure 18. time control and preview step count you can design your watch face to change dynamically according to the user's step count. for example, you can create a watch face that changes based on the percentage of the daily step goal that has been achieved. battery you can design your watch face to change dynamically according to the watch's available percentage of battery life. event you can design your watch face to change dynamically according to the device state, such as low battery or unread notifications. to do so, select the desired event and the image or animation you want to display during that event. figure 19. event condition properties tab each component has a range of modifiable properties. for example, you can change the color of the numbers on a digital clock or choose whether the watch hands measure hours, minutes, or seconds. figure 20. properties tab action options the action options within the properties tab enable interaction with your watch face. for example, you can let the user tap a component to change images or open other applications. figure 21. action options color apply a specific color to your component or save a theme color for the watch face. for complications, the initial color theme is grayscale. image appearance modify an image's appearance using the following controls: hue controls the tone of the color. saturate makes the image color more or less vivid. lightness causes the image colors to be lighter or darker. note:because these functions replace the pixels of the added image, they are processed before the other color functions, such as apply theme color. text appearance use the text appearance options to define the text alignment and font style. to decorate the text, in the project settings, select add bitmap font. if you want to use the default font size among the bitmap fonts added to the project, select apply default font size. figure 22. modifying text appearance style tab use the style tab to modify the style of the selected layer. you can define image styles and theme color palettes that the user can choose from to customize their watch. figure 23. style tab image style styles can be added for image-based layers, such as image, multimedia image, index, and hand component layers. the watch face supports up to 10 image styles. to add an image style to the selected layer, in the style section, add a file of the same type as the existing image in the layer. theme color palette theme color palettes can be defined in the style tab. each palette can have up to 3 colors. the watch face supports up to 30 theme colors. you can assign the theme color for the selected layer in different ways: from the layer list, cycle through the 3 theme colors with the “apply theme color” icon. figure 24. assigning theme color from layer list from the properties tab, select “apply theme color” and define which of the 3 colors to apply from the theme color palette. figure 25. assigning theme color from properties tab customization editor the customization editor in wfs enables you to refine, organize, name, and preview the styles you have defined for the watch: you can combine components so that they change styles at the same time and define the order in which the styles appear on the device. figure 26. customization editor you can select the text id for the style name to be displayed on the watch. you can also create a new text id and select it. figure 27. defining a style name you can test your style combinations, style display order, and style name in the customization editor preview. run to preview how your watch face looks along a timeline, use the run panel in wfs. you can select a device shape and adjust the time, date, device battery level, user step count, user heart rate, and gyro values to test how your watch face looks in different circumstances. you can also adjust any other styles that can be set in the customization editor, including the number of unread notifications, tag expressions, or conditional lines. the run preview can be set to show the active or always-on (ambient) mode. figure 28. run panel and settings when previewing the always-on mode, wfs displays the current on-pixel ratio and provides an analysis tool that enables you to analyze each screen along a timeline. to open the run preview in a separate window, select the “preview watch face” button. figure 29. always-on mode preview for information on testing your watch face on an actual device, see test your watch face.

customize styles of a watch face with watch face studio objective learn how to easily customize the style of a watch face using the customization editor in watch face studio. know how to make your watch face respond to your step count using conditional lines. 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. the style in watch face studio allows you to modify the style of the selected layer. you can define image styles and theme color palettes that the user can choose from to customize their watch. the customization editor in wfs enables you to refine, organize, name, and preview the styles you have defined for the watch. conditional lines let you show and hide components on your watch face and control the behavior of the components. use conditional lines to change the look of your watch face in response to certain conditions, such as the time and event, such as unread notifications. 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! style customization sample project (385.30 kb) start your project download the sample project file, and click open project in watch face studio. locate the downloaded sample project, and then click open. add styles to the watch hands and index styles can be added for image-based layers such as icons, index, and hand component layers. the watch face supports up to 10 image styles. in the style tab, add a file of the same type as the existing image in the layer. select the watch hand named min_hand. click on the style tab. click the + button to add more minute hands. simply select the first three images. repeat the previous steps for the hour hand and index: create style sets go to the style tab and click on customization editor. select min_hand, hour_hand, and index_line. merge these by using right-click on your mouse. change the name of the style sets using text id. click on text id of the previously merged style set. then, click the add new button. set the id name to id_time and the default value to time. then, click ok. now, you can change the name of your style set. click again on the text id and search for the id name that you just set. here, the name and default value for your style set are changed: finally, repeat the same thing for the background. merge the other components to make a single background. using the text id, change the name of the style set to id_background and the default value to background. modify the theme color palette the theme color palette is a set of colors that you can use on a specific design component. each palette can have up to three colors. the watch face supports up to 30 theme colors. here, you add a new set of colors for the month component. go to the style tab. under the theme color palette, click the + button. choose a color from the palette. you can change the other two colors by clicking on the color box. preview your watch face using customization editor at this point, you have created custom styles for the watch hands and index, background, and color. you can use the run pane and customization editor to preview how the watch face looks like when changing different styles: open the run pane in a separate window and click customization editor. in the customization editor, you can see the three tabs: background, color, and time. go to each tab and preview the different custom styles that you’ve created. use conditional lines for step count use the conditional lines to make the step count on your watch face respond to certain conditions. here, you want to show different images depending on the step count percentage: 0% to 20%, 21% to 80%, and 81% to 100%. click on the + button and select steps as a conditional line. click on the steps icon to view the default conditional lines for all components. select the sc_initial component. then, double-click on the layer of its conditional line. a warning prompts you that any existing conditional lines will be overwritten, simply click ok. now, you can start changing the conditional line for the sc_initial component. drag the start of the bar to 0% and drag the end of the bar to 20%. this sets the condition that the sc_initial image visually appears on the watch face when the step percentage is from 0% to 20%. for the sc_moderate component, set the conditional line from 21% to 80%, and for the sc_good component, set it from 81% to 100%. this makes the sc_moderate and sc_good images to visually appear on the mentioned step count percentages. tipread apply conditional lines on watch faces to know more about conditional line. test the watch face in the run pane, click the preview watch face icon and you can run the created watch face with different custom designs: to test your watch face, 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. noteto run the watch face successfully, you may need to configure its always-on display to avoid any error when you run it on your watch. for more details about testing your watch faces, click here. you're done! congratulations! you have successfully achieved the goal of this code lab. now, you can create a watch face using style and conditional lines in watch face studio by yourself! to learn more about watch face studio, visit: developer.samsung.com/watch-face-studio

build and upload from watch face studio to make a watch face available in the play store, you must upload both a package file and a watch face file. note:android requires that all apks be digitally signed with a certificate before they can be installed on a device or updated. for more information, see sign your app. preparing watch faces for publishing to prepare the publishable watch face files for uploading to the store: in watch face studio, select the publish button or go to project > publish in the menu bar. figure 1. publish button define the required information: package name: unique application id for your watch face, such as com.example.mywatchface. location: folder path on your computer where the watch face file is to be created. version: version number for the watch face as displayed to the user. version code: internal version number that must be incremented when the watch face is updated. it is not displayed to users. the value allowed must be an integer between 1 and 999,999. this value is used to generate the actual version code combined with the internal version code. for example, entering 77 generates the version code 10,000,077. publish type: package file types to be created. you can publish an aab file, apk file, or both. keystore path: folder path where your keystore is located. a keystore (.keystore) is a binary file that contains a repository of security certificates and private keys. if you do not have a keystore already, you can create one. keystore password: secure password for the keystore. key alias: identifying name for your key. key password: secure password for your key. app label: text id for the label to display when the user long presses to switch the watch face. if you have created localized versions of the label, the watch displays it in the device language. watch type: whether the watch face style is digital or analog. preview image: image to be displayed in the watch face preview. preview time: if you do not add a custom preview image, the time of day to show in the generated preview image. when you are ready, select ok. figure 2. publish dialog figure 3. create a new keystore uploading watch faces to upload your watch face to the play store: select project > upload in the menu bar. figure 4. project menu on the play store site, log into your account. if you do not have an account, you can create one. fill in the required information about your watch face. you must provide a screenshot of the watch face. start the upload.

samsung galaxy watches run on wear os powered by samsung and have many features, including custom watch faces that you can create with watch face studio (wfs). wfs provides a "theme" feature that allows you to implement multi-color theme palettes to watch face components. theme colors enhance your watch faces by making them more expressive and attractive, and give users customization options. this article introduces the basic concepts of creating color themes for watch faces: defining theme color palettes applying theme colors to components using theme colors on different backgrounds to follow along with the demonstrations in this article, install watch face studio and download the sample project. defining theme color palettes to apply theme colors to watch face components, you must define a theme color palette. wfs enables you to add up to 30 theme colors to a project. to create a theme color palette: in your wfs project, select the “style” tab. click the “+” (plus sign) button next to “theme color palette.” use the color picker to define the color you want. click "ok" to set the chosen color. figure 1: adding theme colors each row in the “theme color palette” section represents a separate theme color palette. a theme color palette is initially created with a single color, but a palette supports up to three colors. the additional colors can be different shades of the main color or contrasting colors. to implement additional colors for a palette: in the “theme color palette” section, select the theme color you want to change. use the color picker to define the color you want. you can also check how the selected color compares to the original color. click "ok" to set the chosen color. figure 2: adding theme colors to a palette the following figure shows several multi-color theme palettes defined for the project. figure 3: multi-color theme palettes applying theme colors to components when you have defined one or more theme color palettes, you can apply the colors to the watch face components. to apply a theme color to a watch face component: select the component and go to the “properties” tab. unfold the “color” section. fill the “apply theme color” checkbox. from the dropdown menu, select whether to apply the first,second, or third theme color from the palette. figure 4: applying theme color to a component to quickly apply the theme color to components: select the components you want to apply the theme color to. in the “layer” tab, click the “apply theme color” icon to cycle through the first, second, and third theme color. the following figure shows the theme colors applied to the components in the sample project. the theme color is not applied to the step icon, battery icon, and progress bars. figure 5: theme colors applied to multiple components now that you have applied theme colors to the watch face components, you can preview the result on the "run" tab or the run window. you can use the selected theme color from the "run" tab of wfs and see the output in the preview window. figure 6: theme color preview note : note: icons and images on complications are converted to grayscale after theme colors are applied. consequently, theme colors can appear differently on them. for information about applying theme colors to complications, see design complications using watch face studio. using theme colors on different backgrounds to expand the customization options of your watch face, you can implement multiple backgrounds to complement the theme color palettes. users can combine their choice of theme color palette and background to suit their preference. to add a background to the watch face: add an image component and define the image as the background. if you want to add more background images, select the background component. in the “style” tab, click the “+” (plus sign) button and select the images to be implemented as backgrounds. you can use the customization editor to preview any combination of theme color palette and background: to open the customization editor, in the “style” tab, click the “customization editor” button. use the side menu to switch between the colors and backgrounds you want to preview. figure 7: customization editor you can also preview the theme colors from the “run” tab. the following examples demonstrate how the same theme colors can provide a different look and feel depending on the background. figure 8: theme colors against varying backgrounds finally, test your watch face on an actual watch or emulator. with up to 10 backgrounds and 30 theme colors, up to 300 background and color combinations are possible. figure 9: examples of sample project output additional resources for more information on designing watch faces with watch face studio, see create a watch face with watch face studio on the android developers site. discuss ideas with other expert developers at samsung developers forum and get tips, help, and answers to your development questions. learn more about watch face studio and other samsung sdks and tools from the samsung developers blog.

watch face studio is a graphic authoring tool that helps you to design watch faces for the wear os smartwatch ecosystem, including galaxy watch4 and galaxy watch5. it is an intuitive graphic tool which allows you to design watch faces without coding. watch face studio includes a notable feature known as a complication. using complications, the user can get a glanceable unit of information for their selected application on their watch face. the complications can display data, such as text, title, image, or icon, which is collected from the applications that provide such information. today, i discuss some complication features in this blog. i design a simple watch face to demonstrate these. for simplicity i add a digital time and a digital date. for complications, i add one short text complication and one ranged value complication. at the end, two different theme colors are applied. you can download this sample design from here and throughout this blog you can follow me. after deploying the watch face on a watch and customizing the complication, the watch face on the real device looks the same as figure 1. figure 1: the watch face demonstrated in this blog getting started to view and deploy the sample design from my blog, watch face studio must be installed on your pc. now , i create a new project and then add basic components for simplicity. i add time and date from digital clock and place them in the center. adding complications as i have said earlier, i use two different complications in this design. to add complications, go to the add component menu on the top middle. from the dropdown menu, add the "short text" complication. for more information about complications, visit this complication document. short text complication first, i add a short text complication. for design purposes, i adjust the complication placement as (x and y) 170 and 45. i leave the dimension and color as it is. however, you can resize the dimension and change the color of the components of the selected complication. now i set the properties of complication settings as follows: complication type: i set it as "editable" so that anyone can customize the complication from their watch. if the type is set as "fixed," then the complication cannot be customized from the watch and it remains the same as what is provided in the design. for example, i choose "sunrise sunset" from the default provider > dropdown menu (see figure 2a). if the default provider is set as > "empty," no complication is displayed in the run window. note : if the default provider is set as "empty," customization from the watch is still possible. complication layout: the layout for this complication is set to the default ("icon + text + title"), but the layout also can be changed to the designer's preference. in figure 2b, the other layout options for the short text complication are displayed. you can find more details about the complication layout from my things to consider when designing complication layouts blog. (a) default provider options (b) layout options figure 2: complication settings ranged value complication now, i add a ranged value complication and adjust the properties as displayed in figure 3. i select the default provider as "watch battery" for this complication. i set the complication type to "fixed" so that the customization from the watch is not possible. figure 3: ranged value properties, "watch battery" is fixed and cannot be changed on the watch for this complication watch face studio gives the opportunity to change the properties for every component of the complication. now, i modify the properties of the progress bar component of the ranged value complication. so, at first, i expand the ranged value complication. an example of this is displayed in figure 4. figure 4: expand the ranged value complication to change the properties, i click on the progress bar under the ranged value complication to display its properties. i change the color of the progress bar by following the steps below: a. click the color box in the color menu. b. select a color from the color picker pop-up window. c. click ok in the color picker pop-up window. figure 5: ranged value progress bar color change figure 6: ranged value complication added i have added two complications in two different positions on the watch face. keep in mind that currently, only one complication can be set in one spot. so only one complication must be set in the same area regardless of normal or always-on-display (aod). for example, i add two same or different complications in the same position. i set one complication for normal mode and another complication for aod mode. now, i can set two different complication providers and test them on the run window for the normal and aod modes. but it is not possible to customize both the complications on the watch as the complications overlap each other. therefore, it is better not to use two complications in one spot. adding a theme color to a complication now, i add two theme colors and apply one of them to the short text complication. the steps to add and apply a color are given below: a. go to the style tab. the tab contains the theme color palette menu to choose the theme color**.** b. add a color by clicking the "+" icon. c. the color picker pop-up window opens. select a color from the available options. d. click ok for confirmation. note : you can add as many colors as required by repeating steps a to d. e. now set the theme color for the short text complication. a "fill with color" icon is present for every selected component. click the fill with color icon for the short text complication title, text, and the icon. f. on the run window, the theme color menu is displayed which contains all the selected theme colors from the style tab. choose any color by selecting the checkbox and view the output in the run preview. g. for the short text complication, the theme color is set and the color for the title, text, and icon is changed. figure 7: add theme color for short text complication note : the theme color can be customized from the watch. theme color on a watch on the watch, i can choose a theme color from the available colors that i had added in the project earlier. the theme color is set on every component of the short text complication. however, in the case of the icon and image of the complication, the theme color is applied after converting the original color to grayscale. this is because we do not know the color that is provided by the complication provider. that is why it is converted into grayscale first, before applying the theme color. so be careful about setting the theme color while designing your watch face, as the icon and image colors may interfere with the theme color. for example, from the watch, if i set a short text complication as "sunrise sunset," the icon color of this complication is orange (for sunset). on the other hand, if i set the complication as "weather," the icon color is white. see figure 8 for better understanding. in figure 8a, the icon color for "sunrise sunset" is orange and this color is provided by the provider. therefore, if i apply the theme color on this icon, the icon color is not the exact same theme color as displayed in figure 8b. in another scenario, the provided icon color is white which is as displayed in figure 8c. in this case, if the theme color is applied on the icon, the color is perfectly changed as the theme color. in figure 8d, this case is displayed. (a) "sunrise sunset" complication icon without theme color (b) "sunrise sunset" complication icon after applying theme color (c) "weather" complication icon without theme color (d) "weather" complication icon after applying theme color figure 8: the icon color interference with the theme color deploying the design and customizing complications as your own our target components are added. to view the watch face featured in this blog, download this file and deploy it to your watch by following these steps: connect your watch to watch face studio. for information about connecting, see connection guideline. deploy the design on your watch using run on device. for more details on connection, visit this test guideline. note : as per faq 12, "debug over bluetooth" is not yet supported in galaxy watches with galaxy wearable. 3. customize the complications on the watch. figure 9: designed watch face on a watch figure 9 displays the customized complications. to learn more about complications, visit watch face complications. conclusion as you can see, using complications, you can get detailed information for the selected application on your watch. personalization is a key feature of galaxy watch. you can continue to enjoy customizing the look of your watch style as you develop your collection of watch faces. resources in the samsung developer forum, you can ask and get help for any issue. this is a very active and friendly community where developers discuss their issues. there are many blogs on different topics, including watch face studio, on the samsung developers site. please visit these galaxy watch tutorials to expand your knowledge about samsung galaxy watch and their special features. if you want to develop watch faces programmatically, you can use android studio. you can do more complex operations using the complication api.

session wearable, design, android watch face studio's first journey and expectation for next a must-have to create beautiful watch faces! watch face studio (wfs) is now a little over a year old. hear the developers of wsh share the highs and lows of bringing the tool to life and meet the designers responsible for creating the eco watch face. this session is an insight into the year-long journey to create wfs – and the story of where we’re going next. speakers chulheon jeong samsung electronics related video video link video link watch face studio with dark mode create a beautiful watch face that is refined and provides a more comfortable viewing experience in low-light situations. code lab sdc22 apply conditional lines on watch faces learn how to create a watch face that responds to time and notification using conditional lines in watch face studio. 20 mins start sdc22 create a watch face using tag expressions 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. 60 mins start

customize flex window using good lock plugin on watch face studio objective learn to customize a clock face for your flex window using watch face studio's good lock plugin called clockface. overview watch face studio (wfs) is a graphic authoring tool that enables you to create watch faces for wear os smartwatches. using good lock plugins, you can also create a cover screen design for galaxy z flip4 and z flip5. wfs good lock plugins enable watch face studio to create customization elements for a specific good lock application. good lock is a family of applications that allows users to customize various aspects of their galaxy mobile device, such as the lock screen, home screen, and clock face. clockface plugin, one of the good lock plugins, allows you to create clock faces that you can use on a mobile device through the clockface module of good lock app. clockface enables users to customize the clock face on their mobile device's lock screen, always on display (aod), and cover screen. it is part of the good lock family of applications. for detailed information, see good lock plugin. set up your environment you will need the following: watch face studio (latest version) clockface plugin installation file galaxy z flip5 with good lock app installed clockface module installed within good lock app sample project here is a sample project for this code lab. download it and start your learning experience! flex window customization sample project (473.53 kb) initial setup from the main menu ☰, choose preferences. go to the plugins tab and click the install plugin button. you can click the download plugin button to download the installation file. locate the installation file and click ok after adding clockface plugin to plugins list. install the good lock app in galaxy z flip5. then, download and install the clockface module from good lock app. start your project to load the sample project in watch face studio: click open project. locate the downloaded file, then click open. the sample project is a premade watch face design with preloaded images, including a background, trees, clouds, and more. it also contains analog hands and a progress bar to represent step count. in the style tab, you can see the watch face's different theme color palette. you can see other options for background, analog hands, and color when you click the customization editor button. noteto learn how to create different watch face designs in one project, see customize styles of a watch face. create a rectangular clock face design from a circular watch face the usual shape of a watch face design that you can create in watch face studio is circular. using the clockface plugin, you can set the project type as coverscreen, which allows the creation of rectangular designs for galaxy z flip4 and z flip5's cover screen. the sample project is a circular watch face. to change the design to rectangle: click the watch face studio logo to go back to the dashboard. click the three dots menu next to the sample project you added to show additional options. select create project from. enter your project name, keep coverscreen as type, and select galaxy z flip5 for size. some features of a watch face design made for a smartwatch, such as showing step count data, might not work for the flex window. it is suggested to delete unsupported features when you modify the project. after clicking ok in the dialog box, you can now see a new project with a rectangle canvas. right-click on the step_count group and choose delete to remove all components related to step count. redesign the project for flex window you need to adjust some components of the newly created project to fit with the flex window. to do this: resize all images as a group. select the background group. hold down the shift key. move the mouse pointer over one of the corner handles, then click and drag the mouse to resize the images. or, you can change the dimension's width and height of the background group in the properties tab. adjust the x and y placements to reposition the images. replace analog hands with digital clock depending on your preference, you can display analog hands or digital clocks on your flex window. but for this code lab activity, change the time display with a digital clock: remove the time group, which includes analog hands and an index. click add component > digital clock > time. in text appearance properties, change font type and size. edit the tag expression in text field with [hour_1_12_z]:[min_z] to only show the current time in 12-hour format and minutes. to indicate whether the time is am or pm, add a text component and adjust font type and size. in text field, enter the [ampm] tag as value. lastly, move the month component anywhere in the canvas and adjust its text appearance. display the clock design on flex window to install and display the cover screen design on your flex window, you need to: connect the galaxy z flip5 to the computer using usb or wifi in watch face studio, select project > run on device. select the connected galaxy z flip5 you want to test with. if your device is not detected automatically, click scan devices to see your device or enter its ip address manually by clicking the + button. open the good lock app on your device and click the clockface module. choose cover screen as clock style and select your clock design. choose the edit button to customize the style or tap the check button to apply the design. you're done! congratulations! you have successfully achieved the goal of this code lab. now, you can customize a clock face for your flex window by yourself! to learn more about watch face studio, visit: developer.samsung.com/watch-face-studio