During CodeRage 9 I had a session on Fire UI and the Multi-Device Designer. You can also check out my previous post on creating a custom FireUI view for the Moto 360.
Fire UI is made up of three parts:
Behavior Services – Runtime & design time platform design information
Multi-Device Designer – Unified project – Tweak UI for platforms
TMultiView Component – Adaptive layout
Behavior Services at Design Time
Examples:
TTabControl.TabPosition
Bottom on iOS, top otherwise
Font.Size & Font.Family
Many controls have Size.PlatformDefault = True
TMultiView mode
Behavior Services at Runtime
TBehaviorServices class in FMX.BehaviorManager.pas
var
DeviceBehavior: IDeviceBehavior;
begin
if TBehaviorServices.Current.SupportsBehaviorService(?
IDeviceBehavior, DeviceBehavior, Self) and
(DeviceBehavior.GetOSPlatform = TOSPlatform.iOS) then
// behavior specific to iOS
end;
Display metrics example
var
DisplayMetrics: TDeviceDisplayMetrics;
begin // self is a form in this case
DisplayMetrics := DeviceBehavior.GetDisplayMetrics(Self);
if DisplayMetrics.AspectRatio > x then
// AspectRatio specific behavior
end;
type
TDeviceDisplayMetrics = record
PhysicalScreenSize: TSize;
LogicalScreenSize: TSize;
AspectRatio: Single;
PixelsPerInch: Integer;
ScreenScale: Single;
FontScale: Single;
end;
XE7 is full of new features everywhere, but there are some really nice ones specific to Android. Here is a replay of my Skill Sprint session on New Android Features.
There are lots of other new features that are not specific to Android, but that will still help make your apps amazing for Android, iOS, Windows and OS X.
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.
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:
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.
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.
@echo off
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.
echo Wait a second for it to connect . . . .
pause
adb devices
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.
Here is the video replay, slides and resources from my Developer Skill Sprint on the new Multi-Device Designer in RAD Studio XE7. This is one part of the new FireUI, the evolution of FireMonkey.
The Multi-Device Designer is a new feature in Appmethod, RAD Studio, Delphi and C++Builder XE7 that makes it easy to maximize the reuse of your visually designed forms across devices, while also getting the most flexibility and customization as possible.
Design your UI once for Windows, OS X, iOS and Android, then customize it for different screen sizes: iPad, iPhone, Tablet, Google Glass, Surface Pro, etc.
One of the most common questions we get when we talk about new features in Delphi, C++Builder and RAD Studio is “What about Blackberry?” which is almost as common as similar questions about Windows Phone or Linux. iOS and especially Android rule the smartphone OS market, but Blackberry still has a place on most charts (unlike Symbian and some others).
Well, now RAD Studio XE6, Delphi, C++Builder and Appmethod support 96.8% of the shipping platforms thanks to the latest update to Blackberry 10 (10.2.1 or later), it now supports running Native Android APK apps without needing to port. I tested on a Z10 developer device, but it should work on Q10, Q5, Z30, or others. To be clear, Blackberry still runs their own OS, but that OS is able to run Native Android Apps.
Our IDE doesn’t recognize the Blackberry device, again because it is not running Android. But once you build your APK you can transfer it to the Blackberry device using whatever method is most convenient for you. I used Dropbox. Once you have the APK on the Blackberry you simply need to install it.
I built a few samples, including one that takes a picture, and they all more or less worked as expected. When the ShareSheet came up, the usual suspects like Facebook and Twitter were not there, but I didn’t have those set up yet on my test device, so that is to be expected.
You can take things a step further and repackage and sign your app to distribute through the Blackberry store, but that isn’t necessary. You can deploy your APK directly to the Blackberry, or distribute it through the Amazon App Store. Crackberry has a guide on installing APKs too, with a little more detail.
I substituted for David I. yesterday for Developer Direct Mobile Summer School on Lesson 5: Connecting Mobile and Desktop together using App Tethering. The Summer School landing page and David’s blog maintain a list of downloads for all the previous lessons, but here are the resources from my session in the meantime.
I’ll post the replay videos here when they are available too.
You can download my slides and code samples from Code Central. I believe I fixed the issue where some people were not able to download it.
There was some interest in the code sample that bypasses App Tethering’s autodiscovery to connect directly to a specific IP address. I’m working on getting that tested before posting it. Leave a comment if you are interest and I’ll see that you are notified when it is ready.
For my Developer Skill Sprint I was originally scheduled to show how to do a Google Glass Voice Trigger. That is pretty cool because it allows you to launch a Google Glass app with your voice, but I decided to expand on that to also show how the Google Glass app can be launched with the results of additional voice input, as well as how to take dictation and do text to speech everywhere else in Android.
Examine the createdex.bat file to make sure it refers to the correct location for your dx.bat utility and the fmx.jar & android-support-v4.jar files.
Run the createdex.bat file to create the classes.dex file which includes the two jar files above, plus the base64coder.jar file.
Double check that the Deployment Manager references the new classes.dex and not the old ones, and that the remote path is “classes\”
Notice that the android.JNI.Base64Coder.pas file wraps and exposes the methods of the base64coder class.
Run the app on your Android device and verify that it works as expected.
The Base64Coder.JAR is Android specific, so it will not work on iOS or Windows. Some additional notes from the Developer Skill Sprint: Some useful units for making JNI calls
Androidapi.Jni – Java Native Interface type definitions
Androidapi.JNIBridge – The JNI Bridge
Androidapi.JNI.JavaTypes – JString and other common types.
Androidapi.Helpers – JStringToString and other useful conversions.
FMX.Platform.Android– Useful platform methods like GetAndroidApp, MainActivity and ConvertPointToPixel
For more see: C:\Program Files (x86)\Embarcadero\Studio\14.0\source\rtl\android (Object Pascal) and C:\Program Files (x86)\Embarcadero\Studio\14.0\include\android\rtl (C++)
You will want to make use of Conditional Defines in Object Pascal and Predefined Macros in C++. In my blog post on Android Settings I showed how to make a JNI call with Object Pascal, but you can also look at the DeviceInfo Mobile Code Snippet in both C++ and Object Pascal. To create your own JNI Bridge wrappers, look at the source code in C:\Program Files (x86)\Embarcadero\Studio\14.0\source\rtl\android (Object Pascal) and C:\Program Files (x86)\Embarcadero\Studio\14.0\include\android\rtl (C++). You can also consider the following 3rd party utilities:
If you just want to include standard Android APIs then check out the FMXExpress (also an Embarcadero MVP) project on GitHub that includes all the Android APIs. Here is the video replay of my skill sprint
Also, check out Brian Long’s video on accessing the Android API with XE5
It should work with Delphi, C++Builder, Appmethod and RAD Studio on iOS, Android, Windows and OS X. I’d love to hear how it works for you and what you use it for!
For my Developer Skill Sprint I was originally scheduled to show how to do a Google Glass Voice Trigger. That is pretty cool because it allows you to launch a Google Glass app with your voice, but I decided to expand on that to also show how the Google Glass app can be launched with the results of additional voice input, as well as how to take dictation and do text to speech everywhere else in Android.