I really like my Moto 360 watch. It looks fabulous, and does great as an extension of my Android phone, but of course the most important question is how to make an app for it. Turns out it just works with RAD Studio X7, Delphi or C++. Thanks to the new FireUI Multi-Device designer I can actually create a custom view in the UI to make designing the perfect user interface a breeze. Here are some of the details of what I discovered along the way, followed by a download of my sample and the custom view.
The bottom line is it just works, which really isn’t a surprise. Most new Android devices use ARMv7 and the NEON instruction set. (NEON is kind of like the MMX standard on the Intel platform. At first not everyone used those instructions, but once they caught on, everyone did.) So it is no surprise that the Moto 360 does too. Unlike some of the other watches, the Moto 360 does not have a micro USB port. So you have to use ADB over BlueTooth. This requires a few extra steps to setup, and is really slow to deploy over. So slow I canceled the first two deployments because I thought I set something up wrong.
First of all, the Moto 360 display is not perfectly round. It has a flat area on the bottom. If you look closely you can see the light sensor there. Not sure if that was why it wasn’t round, or if there was another design reason. In any case, the screen resolution is 320 x 290 pixels at 213 Pixels Per Inch. This means at design time you have a usable area of 240 x 218 pixels. This is the information we need to create a custom view. Just put the following code in a package.
TDeviceinfo.AddDevice(TDeviceinfo.TDeviceClass.Tablet, ViewName, // The Moto360 is 320x290 phyiscal and 240x218 logical with 213 PPI TSize.Create(320, 290), TSize.Create(240, 218), TOSVersion.TPlatform.pfAndroid, 213, True); // Exclusive
The Device class enumeration actually has a Watch class, but looking in the code that detects the class at runtime and it doesn’t know how to detect a watch yet. So it defaults to Tablet. It makes sense if you think about the fact that XE7 was released before the Moto 360. I imagine an update will address this. Interestingly there are also
The requirement to get the custom view to show up in the IDE is you need to update the XML file found at %AppData%\Roaming\Embarcadero\BDS\15.0\MobileDevices.xml to reference the new view. Inside the MobileDevices element, add the following:
<MobileDevice> <Displayname>Moto360</Displayname> <Name>Moto360</Name> <DevicePlatform>3</DevicePlatform> <FormFactor>2</FormFactor> <Portrait Enabled="True" Width="240" Height="218" Top="102" Left="29" StatusbarHeight="0" StatusBarPos="0" Artwork="C:\Users\jim\Documents\Embarcadero\Studio\Projects\HelloMoto360\Moto360.png" /> <UpsideDown Enabled="False" Width="240" Height="218" Top="0" Left="0" StatusbarHeight="0" StatusBarPos="0" Artwork="" /> <LandscapeLeft Enabled="False" Width="240" Height="218" Top="0" Left="0" StatusbarHeight="0" StatusBarPos="0" Artwork="" /> <LandscapeRight Enabled="False" Width="240" Height="218" Top="0" Left="0" StatusbarHeight="0" StatusBarPos="0" Artwork="" /> </MobileDevice>
You’ll need to update the path to that Artwork to point to the correct location of the PNG on your system. Or you can just leave it blank. Here is what it all looks like when setup in the IDE.
You’ll notice a red circle on the design surface. I added this to see where the corners are (since the display is round). At runtime you can just barely see the red if you hold the watch right. In production I’d hide this at runtime. I placed the TCircle at -1, -1 and set the size to 242 x 242. This way the circle follows the bezel and not the display area of the screen. I suppose if I bumped it out another pixel it would disappear completely at runtime.
To get the Moto 360 to show up as a target device you first need to enable Bluetooth debugging.
- Hold the side button in until Settings appears
- Swipe down to About and tap it.
- Tap on build number until it tells you that you are a developer.
- Swipe back to settings and then tap on Developer options.
- Tap on ADB Debugging until it says Enabled.
- Tap on Debug over Bluetooth until it says Enabled.
- On your paired phone, go into Android Wear settings (gears in the upper right)
- Enable Debugging over Bluetooth.
- It should show
- Host: disconnected
- Target: connected
- Target is the watch, Host is your computer.
- It should show
Then you connect your phone that is connected to the Moto 360 via USB and run the following commands (assuming ADB is on your system path) to connect via Bluetooth. I made a batch file.
REM optional cleaning up
adb disconnect localhost:4444
adb -d forward –remove-all
REM this is the connection
adb -d forward tcp:4444 localabstract:/adb-hub
adb -d connect localhost:4444
REM these lines are to see if it worked
echo Here is the forwarded ports . . . .
adb forward –list
echo Wait a second for it to connect . . . .
The ADB Devices list should show something like
List of devices attached 123456abcd device localhost:4444 device
Now the Android Wear app on your phone should show
- Host: connected
- Target: connected
Be sure that your Moto 360 app uses the unit that defines the Moto 360 device (from your package). This way your app can select it at runtime. If you do all that, you’ll see something similar to this with it running on the Moto 360:
My camera had a hard time focusing on it, but rest assured it looks fabulous! I tried C++ too, and no surprises, it works as well. More experimenting to do, but it is nice to know I have a tool that will take me everywhere I want to go.
If you don’t have a Moto 360, you can setup an Android emulator (AVD) instead. I did that before mine showed up. You need to download the Android 4.4W (API20) SDK Platform and ARM System image.
Then create an AVD with the new Emulator.
It actually gives you the rectangle screen with a round bezel. Also it is 320 x 320 (so completely round) and 240 PPI. This means the view I created (since it was exclusive) won’t work on the emulator. You’ll need to create a new custom view for the emulator, but I’ll leave that up to to.
you can download all of my code for the custom view, Bluetooth ADB batch file, and sample apps from Github. BTW, XE7 adds local Git support, which is another great new feature. Download the trial and check it out.