fx-tictactoe - A TicTacToe JavaFX application on Android

This post describes how you can install a JavaFX application on an Android device.

I recently created fx-tictactoe which is a simple tic tac toe game with a computer opponent. I wondered how easy it would be to port it to Android.

TL;DR: It is easy, you'll need the javafxmobile plugin.

To start from scratch, there would be two approaches to do something like this:

- implement game logic in its own module, create a dedicated android gui

- reuse almost everything from the original javafx based game and use javafxports to run it

The first variant is more conservative and more work: you have to partition your original implementation to a gui and backend layer and reprogram from scratch your gui layer in order to fit the android api's needs. I did something like that in the sudokufx application.

For fx-tictactoe, out of curiosity I used the second approach.

Ok, so what has to be done to get a JavaFX app to the android platform?

Step 0: Install Gradle

The javafxmobile-plugin demands a rather recent version of Gradle, so make sure you've downloaded and installed at least Gradle 2.2. You can download Gradle here.

Step 1: Setup gradle build

javafxports uses, like Javafx itself, Gradle as its build system.

Johan Vos and his team have been doing a remarkable great job in tooling support for JavaFX on Android, thus setting up a build system for a JavaFX project for Android is a rather easy task like you can see in the simple gradle.build script below.





At the time of writing, the javafxmobile-plugin was not yet published in maven central. To get things going, I had to check out the source code of the plugin from here and install it myself on my local machine (which worked out of the box).  If you want to do this as well, the only command which was necessary for this was

gradle install

Note: I saw that the 1.0.8-SNAPSHOT version already resides at the sonatype snapshot repository, so it won't take long until it is deployed as a release there I assume.

You can see that among other things I'm using the Gradle Scala plugin and the javafxmobile-plugin together. Luckily those two guys work together nicely, which whas my greatest concern for this blog post.

But back to the example javafx project I want to see on my android device:

The only thing which is necessary to add to the fx-tictactoe project in order to make it run on the android platform was the build.gradle file.

After creating the build.gradle (see gist above) file, all you need to do is type following command:

gradle android

And if you want to deploy the app to a (connected) device:

gradle androidInstall


This should deploy the apk with a debug configuration to your device.

Like stated in the official docs, the javafxmobile-plugin downloads everything what is necessary, which is great. I can't repeat often enough that it amazes me when I try out projects and they work without much hassle since I know that this very much work and some quality piece of engineering.

I would like to invite you to watch at the final result of my explorations, the video shows a working fx-tictactoe on Android:

These are the basic steps for a proof of concept that the application works on the android device. For deploying it to the app store, some more steps are required, optimizing the apk and wiping out stuff which is not used or needed is also a thing to remember. But for first experiments this should suffice.

As always, I've pushed the source code for the app to my github site.

AnimationTimer Example

This blog entry just shows a screenshot and the code for a little JavaFX AnimationTimer test I wrote.

AnimationTimer is a JavaFX class which comes in handy if you are in need of a callback hook which should be called on every frame. With this class it is possible to implement simple animations for example, but it could be used for various other things as well. The example code below shows how to make hundreds of circles wiggle.

A self contained project is available here. 

Sudoku Capturer Release 1.7

Hi everyone, I'm happy to announce a new release for my Android Sudoku Solver application.

This release is mainly a service release, I've polished the source a little bit and made it compatible with current developments on the underlying image processing library, OpenCV.

For this I had to update the application to API Level 21, which makes it incompatible with many devices. I'll see how things will develop here, with the current implementation you will need a rather recent phone with a high quality camera, which support this API level anyways. One advantage now is that I've managed to encapsulate the OpenCV API such that I can reuse it in other apps as well, which is a nice thing.

If you are interested in the details, have a look at the source code on github. The application is also an example how to develop image processing algorithms on a desktop environment (using JavaFX) and reusing the code then on a mobile device. Like this you save yourself much development time.

Give it a try and let me know what you think. You can download it for free on the google play store. 

Encapsulate OpenCV 3.1 as Android AAR

In this post I describe how to encapsulate OpenCV as an Android AAR package such that it is easier to include it as a maven dependency.

Disclaimer: Apparently there exist many other tutorials about OpenCV, my approach is a little bit unconventional. I also have to mention that there is a very well maintained library called JavaCV which does essentially the same.

The motivation for this blog post is that I want to have an convenient way to use OpenCV with my Android applications. Below I describe what I had to do to achieve this.

Step 1: Download the OpenCV library

On www.opencv.org there is a link to download the library for Android. Download it, unpack it.

If you've followed the post about compiling OpenCV yourself, you already have a directory in your
homedirectory somewhere:

opencv/
opencv/opencv-3.1/
opencv/build/

now, add the unpacked Android SDK:

opencv/
opencv/opencv-3.1/
opencv/build/

opencv/OpenCV-android-sdk-3/

You'll find the usual suspects in the directory, some samples, javadoc for the API, already pre build apk's:

apk/

samples/

sdk/

Now I want to discuss briefly the contents of those directories.

Directory apk: OpenCV Manager

OpenCV encourages you to use a separate application called OpenCV Manager which sole purpose is to make sure you have installed a compatible OpenCV library on your phone. This approach is fine but requires your users to install a second app on their phone. For the technical inclined this is no problem, but for end users this may seem a little bit awkward. I prefer to deliver a self contained app which has no apparent third party dependencies.

The apk directory contains this Manager application for environments where you don't want to use the OpenCV Manager from the play store.

Directory samples: OpenCV Android Samples

The samples directory contains several example apps which demonstrate various aspects of the OpenCV API for android.

./samples/example-15-puzzle.apk

./samples/example-camera-calibration.apk

./samples/example-color-blob-detection.apk

./samples/example-face-detection.apk

./samples/example-image-manipulations.apk

./samples/example-tutorial-1-camerapreview.apk

./samples/example-tutorial-2-mixedprocessing.apk

./samples/example-tutorial-3-cameracontrol.apk

I recommend to install some of the apk's on your device:

  adb install <example.apk>

This is the best way to get a feeling what can be done with the OpenCV Android API, so I suggest to play around with the samples. The source code for those samples is also included.

Directory sdk: Android OpenCV Java API

Here you'll find what you will need for your own app. There are  pre-built android libraries for various architectures and one java API to use the native code. The directory structure you'll find on the top of this directory looks like follows:

etc/ ... some configuration for special routines you could use 
java/ ... the java glue code you will program against
native/ ... prebuilt binaries for the android platform

Since I use maven for most of my projects and all of my open source stuff, I need some way to use the provided java glue code and the binaries in my projects. As long as you just use the default API for OpenCV, you can take the code provided almost off the shelf.

Create an OpenCV AAR ready to use with Maven

The following approach shows how you can create a maven module containing the OpenCV bindings - thanks to the android-maven-plugin it can then be used like a 'normal' maven dependency. The plugin will take care about including the AAR in the final APK, you just have to declare it as a dependency (see below).

For this to happen, I've restructured the source code in the following way:

Restructuring of the sdk subfolder

This is the default structure which works together with the android-maven-plugin and includes only code and binaries you'll need at runtime. The pom looks as follows:

pom.xml for an opencv aar

You can see that I'm referring to the standard android api of a certain version - this is needed in order to properly compile the OpenCV Java API.

In order to get the standard android api, you have to clone yet another project named maven-android-sdk-deployer and install the proper API level in your local maven repository. This can be done for
example by issuing following command:

mvn install -P 5.0

A prerequisite for this command to finish successfully is however that you have already installed the Android SDK itself.

Hint: It seems that the OpenCV 3.1 bindings for Android need at least API level 21, maybe you save some time by just downloading this API Level.

Anyway, if you look closely at the pom.xml you'll notice it is using a custom packaging method, namely 'aar' - this is possible since the android-maven-plugin provides the capabilities for maven to properly create such a file type.

Aar's are bundles which contain libraries (Java code, resources or native code) ready to use in Android Applications. Luckily, android-maven-plugin makes it possible to use aar's like normal maven dependencies.

By using this approach you can deploy the OpenCV bindings in your maven repository. OpenCV can then be treated like any other maven dependency, which is a nice thing.

To recap:

After a successful deploy or local install of this maven module (with mvn install) all you need is to include it in the dependency list of your main app, just like shown below:

dependency declaration for your homebrew opencv maven module

That's all there is to it - you should be able now to use OpenCV in your project. Of course, the maven coordinates change depending on which you've chosen before.

One nice aspect is that the download of the OpenCV Manager is not needed anymore. The drawback is of course that your apk is getting bigger - nothing comes without a price.

For a complete example have a look at the SudokuFX project. Thanks for reading.

fx-tictactoe - A TicTacToe App using JavaFX and Scala

This post describes fx-tictactoe, a tictactoe game written in Scala with JavaFX.

Screenshot of the TicTacToe application

I was inspired to write this application because I recently watched an old 80's film with Matthew Broderick called "War games". Moreover, I used this topic as an assignment for an introductory JavaFX / Scala course I held in autumn 2015.

To get a little bit into the mood for playing TicTacToe, you could watch one scene of this film on youtube, where the evil master program learns how to play the game.

TicTacToe is one of the games which is simple enough such that you can pre-calculate all possible game states. This "game tree" approach allows you then to choose one of the remaining moves which leads to a win.

To make the application a bit more interesting, it also shows some css wrangling which could be used for your experiments as well.

Here is a snippet of the source code which shows the relevant part of the solving algorithm.


Have a look at the self contained source code for the whole app on my github site.

Ps: For some readers the most interesting part maybe is the background photo, which shows a frozen lake on one of my last mountain hikes at about 2700 meters above sea level in the Austrian alps.