Design a watch face with customizable edge complication slots and digital clock
design a watch face with customizable edge complication slots and digital clock objective learn how to add customizable edge complication slots and a digital clock on your watch face using watch face studio overview watch face studio is a graphical authoring tool designed to help users create watch faces for the wear os smartwatch ecosystem, including the galaxy watch4 and its newer versions it offers intuitive and user-friendly features for designing visually appealing and customizable watch faces without requiring coding skills with watch face studio, users can incorporate various components into their watch faces, such as digital clocks these clocks can be designed with different variations and further customized through the galaxy watch interface in addition to digital clocks and other watch face components, users can integrate complications into their designs complications display information from data sources, such as battery indicators or step counts, directly on the watch face you can display additional information on the watch face by adding a complication slot a complication slot consists of complication components and a slot bound the components implement the layout, while the slot bound acts as a cutout through which the complication component appears there are five types of complication slots circle, line, small box, large box, and edge this code lab focuses on adding edge complication slots to your watch face starting from watch face studio 1 8 7 beta , users can define all supported font styles for digital clocks that can be customized on the physical watch the studio also added a feature allowing users to design watch faces with edge complication slots set up your environment you will need the following watch face studio latest version galaxy watch4 or newer smartwatch running on wear os api 34 or higher sample project here is a sample project for you to start coding in this code lab download it and start your learning experience! customizable edge complication and digital clock sample project 363 7 kb start your project to load the sample project in watch face studio click open project locate the downloaded file and click open the sample project includes a background image that you can customize by adjusting the hue, saturation, lightness, or opacity to suit your preference add edge complications to the watch face there are two types of edge complication slots that you can add to the watch face duo and quadrant both appear along the edge of the watch face duo edge complication slot - composed of right and left edge complications quadrant edge complication slot - composed of right top, right bottom, left bottom, and left top edge complications you can only select one type per project to fit the design of the sample project, add a quadrant edge complication slot click add component then, in the complication slot section, select edge > quadrant noteyou cannot change the placement, dimension, or rotation angle of an edge complication slot however, you can delete or hide unused complications from the layer list, expand the quadrant edge complication layer select the right top edge complication and the left bottom edge complication right-click and choose delete notealthough you have already deleted a complication slot, it can still be restored to do this, right-click on the quadrant edge complication layer in the layer list and select the option to add the previously deleted complication back configure complications after adding the edge complication slots, you can configure its settings from the layer list, click the right bottom edge complication to edit its properties in the properties pane, go to complication settings and choose the following type fixed default provider watch battery complication type range value range value complication layout progress bar + icon + text notesetting the complication as fixed limits the data and provider to the values you defined customization of this complication on the physical watch or wearable app is not possible to test the complication, go to the run pane and adjust the watch battery slider the bar indicator updates based on the value of the watch battery next, go to the properties of the left top edge complication and choose the following for complication settings type editable supported types short text default provider step count short text complication layout icon + text + title to test the complication, go to the run pane and adjust the step count slider the complication text changes as you change the value of the slider you can also adjust the properties of each complication component for example, when you open the properties of title, you can change its text color add a variable digital clock there are two ways to display a digital clock on watch faces using a variable digital clock and a non-variable digital clock to understand the concept of these two types, start by adding a variable digital clock component to display hours and a colon go to add component > digital clock > variable select colon and h h for the hour adjust the placement and rotation angle of both components to complement the design with a variable digital clock, you can customize each subcomponent creatively for example, you can make the font of the first digit of the hour h10 bigger than the second digit h or place them in different positions adjust the properties of the first and second digits of the hour to have the same font size but with slightly different color tints h10 color #f5f680ff font size 70 h color #fde997ff font size 70 on the other hand, a non-variable digital clock is less flexible but acts as a single component, making it ideal for simpler watch faces to add a non-variable digital clock to display minutes go to add component > digital clock > mm adjust its placement, rotation angle, and text color to complement the design use bitmap font for minutes watch face studio supports the use of truetype and bitmap fonts by default, all text-based components, such as digital clocks, use truetype fonts truetype is the most common font format, utilizing vector-based outlines to define characters bitmap fonts, on the other hand, consist of fixed-size, pixel-based representations of characters, which have smaller file sizes and render directly as pixels, offering faster performance on low-power devices in watch face studio, bitmap fonts are used to replace predefined dynamic content, such as dates, time, and weather, in text and digital clock components this allows you to incorporate custom visual elements that align with your creative vision while maintaining functionality to use bitmap font on your watch face, follow these steps select mm from the layer list go to properties > font setting and select bitmap font click the gear icon to open the bitmap font setting for bitmap font 1 set the default font size to 50 click the + icon to add and assign bitmap images for each digit locate your bitmap images, select the image for the corresponding digit, and click open once you're done adding and assigning bitmap images for each digit, click ok to display the bitmap font as minutes noteyou can also add more bitmap fonts by opening the dropdown menu and selecting add bitmap font make the font style of the digital clock customizable to make the digital clock more customizable, you can apply styles use the style tab to define font styles for a digital clock layer this provides users with more customization options for their watch face noteyou can apply styles to digital clock fonts and image-based layers for detailed information, refer to the style tab documentation from the layer list, choose variable_hh > h10 and go to the style tab click the + button in truetype font to add font styles add fonts with bold font weights such as montserrat-bold, oswald-bold, and roboto-bold then, click the customization editor button in the style set pane, click the text id button beside id_system_style_set click the add new button to add a new text id then, input the following id id_h10_font default value 1st digit hour font then, select the newly added text id this helps users identify which components they are changing when customizing the style on a physical watch repeat the same process for h, and this time, add fonts with a medium font weight for the text id, input the following id id_h_font default value 2nd digit hour font next, add styles to a layer that uses a bitmap font select mm from the layer list and go to the style tab click the + button in bitmap font, then select add bitmap font to add and assign bitmap images for each digit set default font size to 50 click ok and input the name of your bitmap font then, click the customization editor button and modify the text id of the newly added style set using the following values id id_mm_font default value minute font to test the font styles you set, go to the run pane and choose font styles from the dropdown menu this allows you to preview how the selected styles will appear on the watch face tipyou can merge the styles by navigating to the customization editor select the style sets you want to merge, right-click, and then choose merge set test the watch face in the run pane click the preview watch face icon move the step count and watch battery sliders to see data changes in the edge complications as previously mentioned, to observe changes in the digital clock, adjust the time slider and select the font styles from the dropdown menu in the style section to test your watch face on a smartwatch, you need to connect your watch to the same network as your computer in watch face studio, select run on device select the connected watch you want to test with if your watch is not detected automatically, click scan devices to detect your device or enter its ip address manually by clicking the + button when the watch face is launched, touch and hold the watch screen to access the edit mode tap customize to choose font styles and complications notethe always-on display is already set in the project to run the watch face successfully, you may need to configure its always-on display to avoid any error when you click run on device you're done! congratulations! you have successfully achieved the goal of this code lab now, you can design a watch face with customizable edge complication slots and digital clock using watch face studio! if you’re having trouble, you may download this file customizable edge complication and digital clock complete project 420 8 kb to learn more about watch face studio, visit developer samsung com/watch-face-studio