The Set as Button feature enables interaction with your watch face by allowing the user to tap a component to change images, open different apps, change time zone, change temperature units or update weather data.
Step 1: Click on a component
To make a button, select a component.
Step 2: Select Set as Button
Select Set as Button from the Properties tab. If the Set as Button option is disabled, that means Set as Button is not supported by this component.
Watch Index, Group, Animation and components that have tag expressions on Placement or Rotate are not supported as buttons. In AOD mode, all button actions are disabled.
Step 3: Edit the button properties
There are two tabs under Properties: Normal and Action. The Normal tab is the default found in each component. The Action tab is used for the Set as Button feature. You can use this tab to configure how a button interacts, as well as its action.
Step 4: Set Interaction
Select Interaction from the dropdown. In this example, the button works by tapping the component twice.
Step 5: Set Action behavior
There are different kinds of Action behavior for different components. Actions depend on the type of component. In this example, Change Image is selected.
All components do not support the same button action behavior, so it is necessary to know which component supports which button action. Galaxy Watch Studio supports the following button action behavior:
Preloaded App: All Galaxy Watches include a list of factory-installed apps. You can find this list from the Open App tab. Select any app to open after tapping on the button.
Custom: Add your own Tizen Wearable App ID or the App ID of any wearable app from the Galaxy Store. However, that app must be installed on the user’s watch; otherwise, the button won’t work.
For your app: The App ID can be found in the config.xml file of your Tizen project.
Any other app from Galaxy Store: Contact the app developer and request the App ID or use the App Switcher.
App Switcher: This option is enabled when the Interaction is set as Double Tap. It allows a user to choose any app that is installed on his or her watch by double-tapping on the component at any time. After choosing the app, the user can open that app by single-tapping and change the app by double-tapping.
To get an idea of how to use this feature, see How To: Create A Tap Reveal Button To Show Hidden Data.
Change Image: Change the image of a component by single- or double-tapping it. This option can be used for the following components: Background, Watch Hand, and Image.
Time Zone Selector: This action is available only for the Digital Clock component when Interaction is set to Tap. This action is not available on double-tap. From the dropdown, you can choose any default time zone along with Sync with Device.
Note that if you set the action to Time Zone Selector, then the Normal > Time zone option becomes disabled. So, you have to set the default time zone in the Normal Tab before setting the action to Time Zone Selector. See the Time Travel Is Easy With A Time Zone Selector Button blog for more information about using this feature.
If you are using Galaxy Watch Studio version 1.7.0, don’t select Sync with Device, because this option disables the button.
Buttons don’t work in AOD mode, so the Time Zone Selector won’t work in this mode. That means the default Time Zone is displayed.
If the action of a button does not exist, then no error message will pop up on the watch, and no action will occur. For example, you have set the button action to open a custom app. If that app doesn’t exist on a user’s watch, the app won’t open, nor will an error message appear.
When you make a custom image for a button, consider the tap area. You can set any image as a button, but the tap area of that button is always rectangular or square. After setting an image as a button, the entire area inside the red dotted lines is the part of that button (see Figures 1 and 2).
Keep the tap area of a component as large as possible.
Galaxy Watch Studio supports the concept of layers, which means a component on a higher layer takes precedence over components on lower layers. When you add a new component, it will always be added as the top layer. You can change the order of layers if you want. By default, the Background component is always the lowest layer, but you can move it to another layer if you desire.
A button action on a higher layer takes precedence over a button action on a lower layer. Let’s assume two components are buttons and the top-layer component covers the lower-layer component. In this case, the button action won't work for the lower-layer component (see Figures 3 and 4):
Three components in Figure 3 are buttons. Component 1 is the top-layer component, which covers component 2 and part of component 3. Component 3 can be divided into two areas: Area 1, which is covered by component 1, and Area 2, which is not covered by any other component.
If you tap component 1, the button action will work according to component 1. The button action won’t work on component 2, as it is fully covered by component 1. The button action of component 3 won’t work on Area 1, as this part is covered. But if you tap on Area 2, it will work according to component 3.
If component 1 (top layer) is not a button, then the button actions of component 2 and 3 will work according to their defined actions.
When you import any image as a watch hand, this image traverses a 360-degree area; therefore, watch hands cover the full 360-degree area. The tap area is the same as other components, which is the area inside the red dotted lines.
Let’s assume a lower-layer button is placed inside the watch hand area. This button won't work for the same reason as component 2 (the lower layer) in Figure 3. But if you place this component on a higher layer than the watch hand, then the button action will work. Figure 5 depicts the scenario where all components are buttons. In Figure 5, the black line is the tap area of a component, and the white index area is the covered area of the watch hand.
Component 1 and the Watch Hand:
Suppose component 3 doesn’t exist. The watch hand is on a higher layer than component 1. A watch hand traverses a 360-degree area, so it covers the whole circular area. Component 1 can be divided into two areas: A1 is inside the watch hand’s area, and A2 is the rest of the area of component 1. If you tap on A1, nothing happens. But if you tap on A2, the button action will work. The button action of the watch hand works normally.
Component 3 and the Watch Hand:
Component 3 is on a higher layer than the watch hand. Component 3 can be divided into two parts: A3 and A4. In this case, three scenarios can occur:
If you want to set the button action on more than two watch hands, then you should be careful about layering. The diameter of all watch hands shouldn’t be the same if their pivot points are the same. If the diameter is different, then the covered area of the watch hand will be different.
The idea is that a smaller watch hand should be on a higher layer than the larger watch hand. The disjoint area can be a tap area for a larger watch hand. However, if you keep the larger watch hand on top, the smaller watch hand will be covered and can’t be tapped (see Figure 6):
In Figure 6, the hour watch hand is smaller than the minute watch hand. Area 2 is the intersected area of these two hands, and Area 1 is a disjoint area of the minute watch hand.
If the hour watch hand is on the higher layer, Area 2 is the covered area for the hour watch hand. If you tap on the minute watch hand in Area 2, no action occurs. The button action of the minute watch hand will work in Area 1 only.