A few months back I treated myself to a new watch, and I decided to finally try a smartwatch. I haven’t thought that I’d use it as much as I ended up doing, but I noticed that the Android device lacks a few features that I’d previously found on the Apple Watch, most notably a native stocks app that helps keep track of my portfolio. Granted, I don’t know why I’d like to see my life savings disappear in real-time, but I decided to try and write a simple stock tracking app for Wear OS devices just for the sake of it. However, this article discusses how to get started with writing a custom program for Wear OS devices.
Creating a new Project and Setting Up the Environment
You need to create a new Wear OS app before you can begin writing source code. Start by downloading and installing the most recent version of Android Studio. Then, use the “New Project” dialog to create a new Wear OS project. Select the project type on the right-hand side of the dialog, and then choose “Blank Activity”, which will create a runnable app framework for you:
Then, on the next screen, fill in the name and other details of your app:
I chose Java as the language, edited the default name, and made sure to uncheck the “Pair with Empty Phone app” checkbox, as I want this to be a standalone app that solely runs on the watch hardware.
Once the new project loads, make sure to head over to the device manager dialogue, which you can access from the drop-down menu next to the run button:
Doing so opens up a new side panel that lets you create a new device:
Clicking the button opens a pop-up window that lets you create a new device. In the new window, choose “Wear OS” and then select your target device. In my case, I’m planning to use a large round watch for testing:
Lastly, you need to download and install a system image. Note that you only need to do this the first time you set up a device or whenever there’s a system update available. Click the “download” link next to the version you want to install. Doing so opens up a pop-up window that will inform you of the installation progress:
Finally, you can choose the newly created device from the drop-down menu you used earlier to access the device manager. When you then run the app, an emulator window will show in the bottom-right corner of the IDE. You should see the watch boot up. Once it’s done, you can use it to access and test your app:
Customizing the Empty App Template
Once you verify that the emulator and app are running as expected, it’s time to build your custom app. Double-click the “activity_main.xml” file located in the “layout” folder. Doing so should bring up the app design view:
Start by deleting the “Hello World” text label from the component tree left of the app preview:
You can then select components from the palette to add to your app. Choose the “Layouts” category and drag and drop the “linear layout (vertical)” component into the existing frame layout:
This linear layout container will automatically stack the components you add in a vertical order. You can replace it with a scroll view container if you wish to add more elements than the screen can accommodate. However, I’ll keep the app simple for the sake of this tutorial. Next, add a button and a label to the linear layout container you just created:
As you can see, the layout container automatically stacks the elements in a vertical way. However, the IDE complains that the UI elements use hard-coded strings, which you should avoid for various reasons. Using placeholder values defined in an external XML file can make tasks such as localization much easier. Therefore, open the “strings.xml” file located in the “strings” folder. The first of the two files (without the word “round” added in parenthesis) defines the strings that will be used in the square app. The other “strings.xml” file contains the text values for the app displayed on round screens. For now, let’s add the same text to both files:
Next, head back to the visual editor and change the text attributes of both UI elements so that they use the data provided in the XML files instead of hard-coded string values:
You can scale down the text element a bit so that the entire label fits on the screen. That is not the preferred way of creating responsive UIs, but it’ll do for this simple tutorial. Next, give the two UI elements more meaningful names using the attributes panel. Scroll all the way to the top and edit the default name in the “id” field. In my program, I named the label “statusLabel” and the button “testButton”.
Then, you need to define an onClick action that the program can call whenever a user presses the button. Start by opening the “MainActivity.java” class and adding a new function:
Make sure to update the label name that was present in the template file. Then, add a new handler function. The name can be anything you like, but the function shouldn’t return anything, and it needs a View object as its only parameter. Within the function, I chose to update the text label’s text value. Note that I, again, used the XML file to create a new string resource which I utilized in the source code. Finally, you can then go back to the UI editor and type the method name as the onClick handler in the button’s attributes:
Running your First Custom Wear OS App
Once you’re done, stop the currently running session (if there is any) using the red stop button. Then, click the green start button in the top menu bar of the IDE to load up the emulator and open your app. You should see something like this:
Clicking the button should update the text label:
Where to Take it From Here?
Now that you got a first look at the process of working with Android Studio and creating your first Wear OS app, you can play around with various UI elements. Make sure to read up on the official documentation for further details.
You can then add multiple screens, UI elements, and your application logic applying the same principles demonstrated in this tutorial. Feel free to share your custom-made Wear OS app in the comments below!
nerdhut 
Nice
LikeLike