Customize styles of a watch face with Watch Face Studio
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! if you face any trouble, you may download this file style customization complete project 425 73 kb to learn more about watch face studio, visit developer samsung com/watch-face-studio