How To: Create A Tap Reveal Button To Show Hidden Data
Tony Morelan
Senior Developer Evangelist
Looking to design a watch face that gives the user the ability to customize the look by revealing specific data? Creating a Tap Reveal button is a simple way.
Tap Reveal is when you have certain areas on your watch face that when touched, reveal something else. This can be useful if you would like to give the user the ability to display specific real-time data like heart rate, battery level, current speed or even the date. Giving the user this interactive control allows them to display certain data, and also gives them the ability to control the look of the watch face.
So how is this done? It’s actually quite simple. Galaxy Watch Designer (GWD) lets you program an imported image file to swap with a different image file when the user taps. The secret is to have the second image file be an empty transparent image so that the area below the cover graphic is now viewable.
Let’s Get Started In this example, there are 4 areas that can be tapped to display real-time user data: Heart Rate, Speed, Date, and Battery Level. The design of the cover images includes an icon that relates to each of the data components having the appearance as if the component is deactivated. What is layered below is the real-time data component along with an icon having the appearance of being activated. When the cover image is tapped, the empty transparent image loads, giving the ability to see the “activated” elements below.
Design Graphics & Tap Area Using your favorite graphics program, create a design utilizing layers for both activated and deactivated elements. Keep in mind that the data elements generated by Galaxy Watch Designer will not be part of your graphics, but added as a component within Galaxy Watch Designer.
To create the separate image files needed for the tap reveal buttons, you must first determine the tap area. If you have tap areas that are small, it may be difficult for the user to tap the exact spot. One trick is to make the canvas area of your image graphic larger, rather than cropping down to the edge of the pixels. Because the tap area is determined by the overall area of the image file and not the actual pixels, the tap area will be larger. Just be sure to not have overlapping tap areas because that will cause functionality issues.
It is best to create a rectangle layer that represents the tap area. Doing so allows you to easily select the area regardless of what layers are viewable. This technique comes in handy when you are displaying different layers to create the cover image and would like to quickly “select” what will be the tap area when cropping the image file. After making the selection of the rectangle layer, turn off the layer so that it is not viewable when cropping your cover image file.
Saving the Cover Image Files The best file type to use is PNG. Not only is the quality nice, but PNGs support transparent backgrounds, which allows you to create a cover graphic that is a custom shape. From your favorite graphics program save all of the cover images as transparent PNGs.
Saving the Empty Image File The file that is swapped out when the cover image is tapped is the “Empty” file. This is a transparent graphic that does not have any visible pixels. When GWD replaces the tapped image file with the empty file, it adjusts the height and width of the empty file to fit the area of the tapped image. Because the image does not contain any pixels, the dimensions are not important, GWD will conform it to fit. This also means that you only need one empty image file for all of your GWD projects.
Importing Graphics Once your base layer graphics and data elements are placed into GWD, it is time to import and program your cover buttons. To import you can either drag and drop your cover image PNG file onto the GWD workspace area, or use the dashboard Component button titled “Image” to then navigate your hard drive and select the cover image PNG file from the directory.
To position the cover image you can change the X and Y coordinates in the Properties window, use the arrows on your computer to move the selected item or simply click and drag the cover image to the proper position.
Because new images are positioned at the top of the layers, you might need to lower the cover image layer so that it does not appear above certain elements such as watch hands.
Programming the Tap Function With the cover image selected in your workspace, click the dropdown menu icon in the Properties panel and chose “Set as Button.” From the Actions tab within the Properties window set your “interaction” to either Tap or Double Tap and your action to Change Image. Clicking once on the circle plus icon lets you select what file is swapped out when the cover image is tapped. Navigate through your hard drive to select your empty PNG file.
If you would like the data components to initially be visible with the ability to deactivate, first import the empty PNG and program the button to swap the empty image with the cover graphic. This gives the user the experience of turning off or deactivating the data component when the watch face initially loads.
Testing the Tap Function To test the functionality of your Tap Reveal button, select the “Run” feature within GWD and click the cover button with your mouse. This is also a great way to see if your cover graphic aligns perfectly with the elements below.
Be Creative As simple as the Tap Reveal technique is, you can really make a complex interactive design. Maybe give the user the ability to show or hide the analog numbers of a watch face, specific date information like the day of the week, or even show the digital time on an analog watch face. The possibilities are endless.
Galaxy Watch Designer (GWD) is now Galaxy Watch Studio (GWS). Go to Install Galaxy Watch Studio to learn how to download and install GWS.
