Watch Face Studio 51

tutorials design, galaxy watch

Gyroscope Animations with Watch Face Studio

watch face studio offers a range of interactive features to elevate the design of watch faces for galaxy watch running wear os powered by samsung. the gyroscope is a particularly powerful tool, which enables the watch faces to react dynamically to wrist motions. by leveraging gyroscope-based interactions, designers can create immersive experiences that go beyond static watch faces. the article discusses two creative use cases for the gyroscope in a watch face. first, we change the scene when the user raises or lowers their hand. second, we try to implement a 3d like effect using only 2d assets, which is known as the parallax effect. these use cases show how watch face studio makes it easy to implement gyroscope-driven features without requiring advanced coding skills. you can download watch face studio from here. now let’s get started. noteplease ensure that your device is equipped with sdk version 34 or higher to run the project smoothly. changing the watch face based on wrist motion to follow along, download the sunset sample project. this project aims to demonstrate how different properties can be changed based on wrist movement and rotation. our goal is to create a dynamic scene where raising the wrist transitions into a daytime scene, and lowering it reverts the screen to a nighttime scene. you can start by following these steps: notewe only apply gyro effects to the x-axis. when the user raises or lowers their hand, they rotate the watch along its x-axis. open the downloaded project and from the layers list, hold ctrl/command and click on “sun,” “cloudleft,” “cloudright,” “daysky,” “palmtreeshadow” and “daywater” to select these components. figure 1: select elements in the properties tab, from the gyro section, click on “apply gyro.” in the x-axis section, set the range from -45 to 45 degrees. it is half of the total range, so the user only needs to tilt their wrist 45 degrees in any direction to see the effect. figure 2: apply gyro and set range now select “daysky” and “daywater.” set the opacity to 0% for both directions on the x-axis. since “nightsky” and “nightwater” are layers right below “daysky” and “daywater,” lowering the opacity of the day elements slowly reveals the night elements. figure 3: set opacity select “cloudleft” and in the x-axis section, set the displacement of x to -250px for both directions. figure 4: set displacement for the first cloud for “cloudright,” the displacement should be 250px for both directions. figure 5: set displacement for the second cloud from the layers list, select “sun” and drag the sun's pivot to the center of the watch face, which is (225, 225). this makes it look like the sun is going along the edges of the watch. figure 6: change pivot select “sun” and “palmtreeshadow” and in the x-axis section, set the opacity to 0% for both directions. set negative rotation to -70 degrees and positive rotation to 70 degrees. figure 7: set rotation and opacity select “palmtreeshadow” and drag the pivot to its root, set scale to 180% for negative rotation on the x-axis and to 130% for positive rotation. since the tree is slightly to the left, we stretch the shadow more when it falls on the right side. figure 8: set scale here is a preview of the watch face we just created: figure 9: preview of the first watch face 3d parallax effect using 2d images the parallax effect is a visual technique that creates the illusion of depth and motion by moving elements at different speeds. the closer the object is to the subject, the more it will move. we can follow this rule to create a watch face in the watch face studio. now let’s build another one: open the parallax sample project and from the layers list, select all the trees inside the “trees” group, “mountain front” and “mountain back.” in the gyro section from the properties tab, click on “apply gyro.” figure 10: select elements and apply gyro noteyou have to select each component individually inside the group instead of selecting the group itself. in the x-axis and y-axis sections, set the range from -45 to 45 degrees. figure 11: set range now only select the trees inside the “trees” group. go to the x-axis section and apply a displacement of 60px to x for negative rotation and -60px for positive rotation. go to the y-axis section and apply a displacement of -60px to y for negative rotation and 60px for positive rotation. figure 12: set displacement for the first element from the layers list, select “mountain front.” this must move less than the trees since it is behind them. now repeat step 3 for “mountain front” but this time, on the x-axis, set negative rotation to 40px and positive rotation to -40px. for the y-axis, set the negative rotation to -40px and the positive rotation to 40px. figure 13: set displacement for the second element select “mountain back” and repeat step 3. this time, on the x-axis, set 20px as the negative rotation and -20px as the positive rotation. for the y-axis, set -20px as the negative rotation and 20px as the positive rotation. figure 14: set displacement for the third element the final watch face looks like this: figure 15: preview of the second watch face you can add as many layers as you want. however, consider performance and battery consumption before adding a high number of layers. you may download the final projects from here: final_sample_project_sunset.wfs (417.1 kb) final_sample_project_parallax.wfs (497.0 kb) performance considerations when designing gyroscope-based watch faces, it is important to balance responsiveness with performance efficiency: battery consumption: excessive movement calculations may affect battery life. try to minimize unnecessary computations to reduce battery usage. smoothness & processing power: lagging can hinder user experience. test the interactions on real devices to ensure smooth performance. user comfort: ensure that motion effects enhance usability rather than causing distraction or discomfort. summary gyroscope-based interactions add an exciting dimension to watch face design, enabling dynamic animations, realistic depth effects, and improved usability. watch face studio makes it easy to incorporate these features, allowing designers to create engaging and interactive experiences for wear os users. if you have questions or need help with the information presented in this blog, you can share your queries on the samsung developers forum. you can also contact us directly for specialized support through the samsung developer support portal.

Imrul Anwar

https://developer.samsung.com/sdp/blog/en-us/2025/06/04/gyroscope-animations-with-watch-face-studio

tutorials galaxy watch

Watch Face Studio: Theme Color Implementation Basics

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.

Most Fowziya Akther Houya

https://developer.samsung.com/sdp/blog/en-us/2023/04/05/watch-face-studio-theme-color-implementation-basics

tutorials galaxy watch

Design Complications Using Watch Face Studio

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.

Most Fowziya Akther Houya

https://developer.samsung.com/sdp/blog/en-us/2022/08/17/design-complications-using-watch-face-studio

tutorials galaxy watch

Testing Watch Faces in Remote Test Lab through Watch Face Studio

custom watch faces are a popular way for users to customize their smartwatches. watch face studio (wfs) is a universal gui tool that allows you to design watch faces for wear os devices. it supports various samsung galaxy watch features, such as styles, tags, sensors, and complications. although you can preview your watch face design and many of its features on the emulator included in wfs, some visuals and behavior can be different on a physical device. to ensure your watch face functions correctly on all the latest galaxy watches, remote test lab (rtl) enables you to test your applications on actual samsung galaxy devices without having physical access to them. advantages of testing your watch face in rtl include convenience and cost savings from having access to a range of galaxy watches without having to own them yourself, and the ability to test features that are not supported by the wfs emulator, such as watch face complications and launching applications from them. this article uses a sample watch face with some simple complications to demonstrate how you can make use of rtl to test a watch face created in wfs. the basic steps are to reserve and connect to an rtl device, link it to your computer through remote debug bridge (rdb), and then deploy the watch face to the device from within wfs. figure 1: sample watch face in wfs reserve a galaxy watch on remote test lab because rtl is a virtual credit-based time-limited service, to take full advantage of your credits and allotted time, make sure your project is ready to test before connecting to rtl. to reserve and connect to a remote device on rtl: sign in to the samsung developers website. in the “support” menu, select “remote test lab.” to view the device list, click “get started.” the device list shows all the available devices on rtl. to list the smartwatches only, select “galaxy watch” from the side menu. figure 2: available watches on rtl select the device you want to test the watch face on. select the physical location of the device you want to use and define the duration you want to reserve it for. figure 3: rtl device location and duration selection notereserving rtl devices consumes virtual credits. the cost depends on the duration of your reservation. the number of credits available on your samsung account is shown at the top right of the screen. to earn 10 credits once per day, click the “my credits” text. when you are ready, click “start.” the device launches in a new window. connect the computer to the remote device use the remote debug bridge (rdb) tool to connect the rtl remote device to your computer: from the sidebar of the rtl device window, select “remote debug bridge” and click “connect.” click “download” to download the rdb tool and “ok” to close the dialog. figure 4: rdb download in rtl extract the content of the downloaded file to a folder. run the “rdb.exe” application. a terminal window opens and listens for the rdb connection from the rtl server. figure 5: launching rdb return to the rtl window, select “remote debug bridge,” and click “connect” again. a connection is established between your computer and the rtl device. figure 6: adb connected to remote device through rdb the remote device is now connected to your computer. it responds to android debug bridge (adb) commands, such as “adb devices,” in the same way as if you had connected to a physical device in your possession. for more information on connecting your computer to devices on rtl, see connect to devices on remote test lab using rdb in android studio. noteto ensure adb commands work correctly, you must have adb already installed and added to your path environment variable. adb is included with your wfs installation. to add adb to the “path” environment variable on a windows computer: navigate to “start > control panel > system and security > system > advanced system settings > environment variables.” in the “user variables” section, select “path” and click “edit.” to add a new entry to the list, select “new.” enter the path to the “\tools\window” subfolder of your wfs installation folder, for example, “c:\program files\watchfacestudio\tools\window.” click “ok” and close the dialog. relaunch your terminal window. to add adb to the “path” environment variable on a macos computer: open a terminal window. enter the following command: “export path=$path:/applications/watchfacestudio.app/contents/tools/mac.” if your installation of wfs has a different location or application name, modify the command accordingly. relaunch your terminal window. deploy the watch face to deploy a watch face from wfs to the rtl device: in wfs, open the watch face project. click “run on device” at the top right of the screen. the “connected devices” window appears, listing the available devices. figure 7: remote device in “connected devices” list to deploy the watch face to the remote device, select the device from the list. deployment is complete when the “launch complete” dialog appears in wfs. your watch face is launched on the remote device. figure 8: watch face on the rtl device if the watch face does not launch on the remote device automatically, select it on the watch: to open the watch face menu, press and hold on the watch face home screen. swipe right until you reach the “add watch face” screen or a “+” button. tap the “+” button. to find the watch face that you deployed, scroll to the end of the watch face list. to select the watch face, tap the image of the watch face or the “download” button. figure 9: selecting the watch face test the watch face now you are ready to test the watch face on the rtl device. the following steps demonstrate testing watch face complications. to add a complication to the watch face: to open the watch face menu, press and hold on the watch face. select “customize.” the “styles” screen opens. scroll to the “complications” screen, which shows the available complication slots on the watch face. select a complication slot and confirm allowing the watch face to access watch data. figure 10: customizing complications select the complication you want to add to the watch face. in the following figure, the “chance of rain” and “battery” complications have been added. figure 11: custom complication on watch faces test the watch face in the same way as on a real device. for example, tapping a complication launches the appropriate application. when the battery widget is tapped, the battery application launches on the watch. the wfs emulator does not support this feature, showing only that the “‘complication slot’ is opened.” because the rtl device is a real device, you can observe the actual watch face behavior in real time. figure 12: custom complications on wfs emulator and on rtl device when testing is complete, disconnect rdb by selecting “disconnect” from the “remote debug bridge” menu and close the rtl window to end the rtl session. summary to comprehensively test your watch face, you can easily connect your computer to remote test lab devices and deploy the watch face to it through watch face studio. rtl allows you to test on a wide range of samsung galaxy watches without having physical access to them. because the rtl devices are real devices, you can also test watch face features that are not supported by the emulator. if you have questions or need help with the steps presented in this article, you can share your queries on the samsung developers forum. you can also contact us directly for more specialized support through the samsung developer support portal. additional resources to learn more about watch face studio, watch face complications, and remote test lab, check out the following links: watch face studio user guide design complications using watch face studio connect to devices on remote test lab using rdb in android studio troubleshooting common issues while using the remote test lab service

Mobassir Ahsan

https://developer.samsung.com/sdp/blog/en-us/2023/11/16/testing-watch-faces-in-remote-test-lab-through-watch-face-studio

tutorials galaxy watch

Connecting Galaxy Watch to Watch Face Studio over Wi-Fi

watch face studio (wfs) is a powerful watch face design tool for wear os-based smartwatches that allows you to test watch faces within the tool. however, since most designers prefer testing their watch faces on real devices, wfs also provides the "run on device" feature that deploys watch face projects directly to real devices. the connectivity policies have changed in wear os 4. this article describes how to connect a galaxy watch running wear os powered by samsung (running wear os 4 or later) to wfs over wi-fi both through the wfs interface and through the command line interface. prerequisites prepare the galaxy watch for connecting to wfs over wi-fi: disable bluetooth on the watch. enable wi-fi on the watch and connect it to the same network as your computer. the wireless network can be through a router or a mobile hotspot.to connect to a wi-fi network, go to settings > connections > wi-fi, check that wi-fi is enabled, and select the network to join. figure 1: wi-fi enabled on watch if you have not already enabled developer mode on the watch, enable it.go to settings > about watch > software information and tap the software version item 5 times. figure 2: software version item you receive a toast notification when developer mode is enabled. the “developer options” menu item now can be found below “about watch” on the “settings” menu. figure 3: “developer options” item in “settings” menu enable adb debugging.in the “developer options” menu, toggle the adb debugging switch on. figure 4: adb debugging enabled enable wireless debugging.in the “developer options” menu, toggle the wireless debugging switch on. figure 5: wireless debugging enabled retrieve the connection ip address and port.when wireless debugging is enabled, a menu item appears with the watch’s ip address and port. make a note of this information, as it is needed to connect the watch to wfs. figure 6: connection ip address and port retrieve the pairing code, ip address, and port.in the “wireless debugging” menu, select pair new device and note the pairing code and port number. you need this information to pair the watch with your computer. figure 7: pairing information you are now ready to connect the watch to the computer over wi-fi. notes although the connection and pairing ip addresses are the same, the port numbers are different. the pairing code and port number can change each time you connect the watch to your computer. use the watch face studio ui to connect your watch to wfs for deploying and testing your watch face: in the top right corner of your project in watch face studio, click run on device figure 8: “run on device” in wfs in the “connected devices” dialog, to add a new device, click the + button. figure 9: adding a device enter the connection and pairing information that you retrieved from the galaxy watch into the appropriate fields. figure 10: connecting galaxy watch using wfs click ok.the watch is added to the list of connected devices and your project can be launched on the watch. figure 11: watch connected to wfs use the command line you can also connect the watch to your watch face studio on your computer through the android debug bridge (adb) command line tool. adb is integrated into wfs, so a separate installation is not needed. to pair and connect the watch and computer over wi-fi using adb shell commands: open the command prompt or terminal on your computer. noteif you are using a windows computer and have not set the adb path environment variable, you must open the command prompt from within the following folder: “<your wfs installation folder>\tools\window.” navigate to the folder in windows explorer, right-click the window, and select open powershell window here. to pair the watch and computer, run the following command with the pairing ip address and port that you retrieved from the watch: adb pair <ip address:port> when prompted, enter the wi-fi pairing code. to connect the watch, run the following command in the terminal with the connection ip address and port that you retrieved from the watch: adb connect <ip address:port> figure 12: pairing and connection through command line in your wfs project, click run on device.the watch is in the list of connected devices and your project can be launched on the watch. summary this article has described how you can pair and connect galaxy watch running wear os 4 or later to watch face studio on your computer wirelessly through wi-fi. after connecting your watch, you can deploy and test your wfs project on the watch. if you have questions about or need help with the information in this article, you can share your queries on the samsung developers forum. for more specialized support, you can contact us through developer support.

Shamima Nasrin

https://developer.samsung.com/sdp/blog/en-us/2023/11/14/connecting-galaxy-watch-to-watch-face-studio-over-wi-fi

tutorials galaxy watch

How to Customize and Enhance Text Elements on a Watch Face

watch face studio (wfs) is an intuitive graphical tool that provides designers a means to design watch faces for the wear os smartwatch ecosystem without the need for coding. basic information on a watch face is typically presented as text, and watch face studio enables you to customize how the text is displayed. this article introduces three features you can use to enhance the text on your watch face design: tag expressions curved text bitmap fonts you can follow along with the demonstrations in this blog by downloading the sample project. tag expressions tag expressions enable you to create watch face components for which the rotation, placement, and opacity changes based on tag values. the tag values represent watch data, such as the date and time, battery status, sensor and health data, moon phase, and mathematical operations. for example, you can create a watch face that shows the date and time, and a progress bar that fills up each minute. this section describes how to implement this using tag expressions. to implement the dynamic watch face: create a text component. in the "properties" panel, select the text field text box. select the tags button that appears. figure 1: tags button to add the hour text, from the tag list, select [hour_0_11], then select done. figure 2: tags list similarly, to add the minutes text, create a text component with the [min] tag. to implement the progress bar for the seconds display: a. create a progress bar component. b. define its value as the [sec] tag and set its maximum value to 60. create text components for the date-related elements: [day_week_f] (day of the week), [mon_f] (name of the month), and [day_1_31_z] (day of the month). noteyou can also display the weekday and month information as numbers, by using different tags. keep in mind that in watch face studio, sunday is the first day of the week. the following figure shows the progress bar on the watch face after some visual adjustments. figure 3: seconds progress bar on watch face for more examples of tag expression implementation, see the tag expressions code lab for watch face studio. curved text you can place text around a curve by selecting from predefined angular ranges, or by defining a specific start position and distance. you can also easily set the text direction. to place curved text around the top of the watch face: create a text component and define the text you want to display. in the "properties" panel, select apply curved-text. select ok. the curved text settings appear. in the "curving" fields, define the width and height of the circle or oval around which the text is to be placed. the width and height values are in pixels. for this demonstration, set both the width and height to 436. to place the text around the top of the watch face, in the "range" section, select the upper half circle. figure 4: configuring the curved text the following figure shows the curved text on the watch face after some visual adjustments. figure 5: curved text on a watch face noteyou 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 notethe 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.

Most Fowziya Akther Houya

https://developer.samsung.com/sdp/blog/en-us/2022/11/01/how-to-customize-and-enhance-text-elements-on-a-watch-face

tutorials galaxy watch

Things to Consider when Designing Complication Layouts

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. notewatch 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. noteinstead 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. notein 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.

Most Fowziya Akther Houya

https://developer.samsung.com/sdp/blog/en-us/2022/09/20/things-to-consider-when-designing-complication-layouts

tutorials galaxy watch, design

Use Masks to Get Creative with Watch Faces

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

Jakia Sultana

https://developer.samsung.com/sdp/blog/en-us/2023/04/18/use-masks-to-get-creative-with-watch-faces

announcement mobile, galaxy watch

Unpacking Galaxy Unpacked for Developers

galaxy unpacked brought exciting new product announcements for galaxy watch4, galaxy z fold3, and galaxy z flip3. in this post, we'll go into more detail on how you can create delightful experiences for these devices in your own apps and watch faces. galaxy watch4 / one ui watch the new galaxy watch4 announcement shines the spotlight on the new collaborative wearable platform from samsung and google. this change from tizen to wear os opens doors for developers and designers to create exciting new designs. as with earlier generations of galaxy watch models, designers can create beautiful work without coding. for galaxy watch4, we've introduced watch face studio. designers who built for tizen-based devices using galaxy watch studio will recognize how this new tool works. for creators with existing designs built with galaxy watch studio, there is also a tool to convert from the tizen .tpk format to the wear os .aab format. this tool is called galaxy watch studio converter. as there are differences between tizen and wear os, some functions are not supported in the conversion process. for support on these tools, please visit the samsung developer forums for watch face studio and watch face studio converter. developers who are interested in creating applications for the new wearable platform can find more information at the android developers site. galaxy z series galaxy unpacked brought news of two exciting evolutions of samsung phones with the galaxy z fold3 and the galaxy z flip3. for mobile developers, these devices provide opportunities to bring a first-class experience to users of their apps by utilizing unique features of the z series hardware and software. possibly the most notable addition to the galaxy z fold3 is the s pen, which had previously been available to owners of galaxy note and galaxy tab devices. developers can integrate the s pen remote and air actions into their apps. code labs with samples are available to get you started. to check if s pen is available on a device, this block of code can be used. spenremote spenremote = spenremote.getinstance(); if (!spenremote.isconnected()) { spenremote.connect(getcontext(), new spenremote.connectionresultcallback() { @override public void onsuccess(spenunitmanager manager) { } @override public void onfailure(int error) { } }); } another feature of the galaxy z fold3 that developers can access is the inner display, activated when the device is opened. developers who want to provide a premium experience for these devices should ensure their apps provide continuity across the displays while interrupting their users as little as possible. samsung provides a code lab and sample code to ensure that your apps provide the best experience possible. the galaxy z fold3 and galaxy z flip3 also provide a unique featured called flex mode. flex mode is activated when a user opens the z fold3 or z flip3 screen half-way. in this configuration, apps are notified to alter their appearance to give the best experience. as with other new features, a code lab with samples is available on this site. follow up even though galaxy unpacked could not be experienced live, it brought new and exciting product announcements that improve our lives. we hope you enjoyed galaxy unpacked and use this information to make incredible experiences for your users. this 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 or by subscribing to our monthly newsletter. visit the marketing resources page for information on promoting and distributing your apps. finally, our developer forum is an excellent way to stay up-to-date on all things related to the galaxy ecosystem.

Samsung Developers

https://developer.samsung.com/sdp/blog/en-us/2021/08/25/unpacking-galaxy-unpacked-for-developers

tutorials galaxy watch

Using Animation to Create Dynamic Watch Faces

add a new dimension to your watch face and bring it to life using animation. with watch face studio (wfs), it’s easy to add animations to watch faces without coding. you can use animations in various formats to create aesthetic and beautiful, yet optimized watch faces for smartwatches that run on wear os. wfs also enables you to configure animations to respond to user interaction. this tutorial introduces various animation features that can be configured in wfs and tips for creating visually enchanting experiences on the watch face canvas. despite the limited space, the possibilities are endless! animation types watch face studio supports implementing animations in several formats: image sequence of png or jpg frames the png and jpg image formats support millions of colors. higher resolution images result in higher quality animation, at the cost of file size. animated gif used for simpler graphics, the gif format is lossless and supports 256 colors. animated webp webp is a popular image format that supports millions of colors in a compact file size. follow along with the demonstration in this tutorial by downloading the sample project. the watch face in the sample project includes a rainbow that appears when the watch face turns on, clouds that drift continuously across the sky, a pinwheel that spins when tapped, and blowing bubbles that emerge at regular time intervals. implementing animations you can use any design tool to create your animation as a sequence of images, animated gif, or animated webp file. notethe animation frame rate in wfs is fixed at 15 fps. animated image sequence to create the pinwheel animation from a series of images: in wfs, select add component > animation > image sequence. figure 1: add image sequence the file browser opens. select the images to include in the sequence and click open. figure 2: select images for the sequence the selected files are added to a single sequence layer in the watch face project. to modify and preview the animation, select the image sequence from the layer list. figure 3. edit image sequence edit the animation: to change the order of the images, remove images, or add images, select import image. to make the animation slower, increase the frame number of any image. to preview the animation, click play. tipif the same image is used repeatedly, increase the number of frames for that image. this optimizes memory usage and reduces the file size of your watch face. figure 4: import additional images, define number of frames, preview animation multimedia file i have created three more animations, “rainbow.webp,” “cloud.gif” and “bubble_up.gif,” using a design tool and will add them in this demonstration. you can follow the steps below to add these multimedia-type animations. in wfs, select add component > animation > animated gif/webp. the file browser opens. select the desired animation file to import and click open. figure 5: open multimedia file tipto implement multiple animations that users can select from, add animation files in the “style” tab. for more information, see style tab. figure 6: add multimedia in style tab triggering animations you can define a trigger for each animation. triggers are conditions that define when and how the animation is played. play when watch face on to play the cloud animation continuously whenever the watch face is on, in the “properties” tab for the animation, define “watchface on” as its trigger and enable “auto replay.” figure 7: continuous play when watch face on to play the rainbow animation only once when the watch face turns on, stopping on the last animation frame, define “watchface on” as its trigger, but enable “resume playback.” figure 8: play once when watch face on play when tapped to play the pinwheel animation whenever the pinwheel image is tapped, define “tap” as its trigger. define the animation to start playing with a 1 second delay, and enable the “auto replay” and “repeat delay” options. figure 9: play animation when tapped play at time interval to play the bubble animation each minute, define “every min” as its trigger. make the bubbles disappear at the end of the animation by enabling “hide after finished.” figure 10: play at defined time interval watch face preview to preview the watch face in the sample project, open the project in watch face studio, click “run,” and select “on watch.” figure 11: sample project watch face performance tips when designing watch face animations, bear in mind the following concepts to ensure optimal performance: battery consumption animated elements can consume battery power more quickly than static graphics. consider the balance between animation complexity and images in your watch face design. processing power complex animation may require more processing power so hardware limitations of the watch may lead to laggy or choppy performance resource efficiency the greater the animation file size, image resolution, or number of frames, the more resources are needed to display the animation. optimize your graphics to avoid sluggish performance. user experience choppy or jarring animations can disrupt the user experience. for example, since multimedia images are loaded asynchronously, there can be delays in starting animations. summary animations can increase the user’s engagement with your watch face design and enhance their time-keeping experience. despite the limitations of watch hardware, watch face studio gives you tools to unlock your creative potential and easily implement and configure optimized animations for your watch face designs. if you have questions about or need help with the information in this tutorial, you can share your queries on the samsung developers forum or contact us through samsung developer support.

Jakia Sultana

https://developer.samsung.com/sdp/blog/en-us/2023/11/02/using-animation-to-create-dynamic-watch-faces

1
2
3
4
5
6

Didn’t find what you were looking for?

FAQ

Search frequently asked
questions
by keywords.

Join the Forum

Visit the Forum to ask
questions and exchange
ideas with other developers.

Get Support

Submit a 1:1 Support request
and receive a response
within 2 business days.

Manage Your Cookies

We use cookies to improve your experience on our website and to show you relevant advertising. Manage you settings for our cookies below.

Essential Cookies

These cookies are essential as they enable you to move around the website. This category cannot be disabled.

Analytical/Performance Cookies

These cookies collect information about how you use our website. for example which pages you visit most often. All information these cookies collect is used to improve how the website works.

Functionality Cookies

These cookies allow our website to remember choices you make (such as your user name, language or the region your are in) and tailor the website to provide enhanced features and content for you.

Advertising Cookies

These cookies gather information about your browser habits. They remember that you've visited our website and share this information with other organizations such as advertisers.