How to Write a Simple Android Wear OS Hello World Application

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:

Figure 1: Choose the correct type and app template from the new project dialog

Then, on the next screen, fill in the name and other details of your app:

Figure 2: Fill in the app details

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:

Figure 3: Access the device manager from the drop-down menu

Doing so opens up a new side panel that lets you create a new device:

Figure 4: Use the highlighted button to 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:

Figure 5: Select your target device

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:

Figure 6: Install the appropriate Wear OS version

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:

Figure 7: Use the drop-down menu to select the newly created watch device. Then, click the green start button next to the drop-down menu to start the emulation.

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:

Figure 8: Double-click the file highlighted in red. You can use the buttons in the top-right corner to switch between the visual and a text-based layout editor.

Start by deleting the “Hello World” text label from the component tree left of the app preview:

Figure 9: Delete the default label

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:

Figure 10: Add a new LinearLayout component and make it a child of the existing FrameLayout

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:

Figure 11: Add two elements to the linear layout container

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:

Figure 12: Add these string elements to both XML 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:

Figure 13: Make the UI elements pull the text data from the XML files

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:

Figure 14: Update the existing Java file and add a new onClick handler 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:

Figure 15: Change the highlighted attribute

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:

Figure 16: The emulator displays your custom Wear OS App

Clicking the button should update the text label:

Figure 17: It works!

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!

One thought on “How to Write a Simple Android Wear OS Hello World Application

Leave your two cents, comment here!

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.