Cross-Platform Applications in iOS and Android Stores with Qt

Published Tuesday December 10th, 2013 | by

With Qt you can develop truly cross-platform applications that will work on desktop, embedded and mobile platforms. Qt 5.2 introduces full support for Android and iOS platforms and thus enables the creation of cross-platform mobile apps that are packaged and deployed to both Google Play and App Store from one code base. Instead of writing two versions of the same code with two different technologies, you can write it once with Qt!

Using Qt Creator IDE 3.0 which comes with Qt 5.2, you can develop, deploy and debug your application on Android and iOS devices as well as on the simulators.

You can do all of your iOS development in Qt Creator thanks to the experimental iOS plugin. After creating the project and testing it on devices/emulators, you need to launch XCode for creating the archive, inputting the store related details (like icons) and finally to deploy it to the App Store.

For Android versions, you can do pretty much everything from within Qt Creator, which creates and signs the Android APK package for Google Play deployment.

For details, see the Tutorial video: Getting Started with Qt for Mobile.

To give you a couple of nice examples to play around with Qt 5.2, we are introducing two Qt Quick-based cross-platform applications that are now available in Google Play and App Store:

- Quick Forecast, a web-connected weather application
- Flyingbus, a game about.. well.. a flying bus :)

Let’s have a closer look!

Quick Forecast  icon

There are already thousands of weather applications in the market – is Quick Forecast the revolutionary weather application we were all dreaming of! No, it is not. :) But what’s inside and the prospect of what you can achieve with Qt 5.2 is worth a look!

Quick Forecast is a cross-platform weather application with no dependencies on Qt Widgets. Based on Qt 5.2, its user interface is written using Qt Quick Controls and Layouts with a custom style done with the styling API. The application backend is written using the Qt/C++ APIs.

Quick Forecast runs on desktop and mobile platforms while being primarily designed and styled to target mobile devices. A complex UI designed for desktop usually doesn’t fit well on small screens; the opposite works better. For the purpose of this demo, we think this is a good compromise. For real use cases, you would probably create an application with two different UI layouts targeting desktop and mobile, but using the same backend. With Qt Quick, and especially when using Qt Quick Controls, this is a rather straightforward task.

Qt Quick Controls, introduced in Qt 5.1, are the Qt Quick  equivalents to Qt Widgets. With Qt 5.2, new features and improvements have been added and Quick Forecast shows some of them:

  • Transient scroll bars
  • Flicking in ScrollView
  • BusyIndicator
  • Added baseline support in Qt Quick Layouts
  • Extended styling APIs

See it live yourself!

The same code is used on all platforms. In order to preserve the design’s scalability and assure relevant font sizes on different screens and screen orientations, a ratio is used to adjust the geometry accordingly.

Below is the current weather forecast for Oslo; chilly. :P

10to17_dec   11dec

Try it out!

 

Quick Forecast source code is available from:

https://qt.gitorious.org/qt-labs/weather-app

Note: The weather data is provided by yr.no. In order to use the yr.no weather data service, refer to their terms and conditions of use. http://om.yr.no/verdata/free-weather-data (The information is only available in Norwegian)

Flyingbus  flying_bus_icon

Flyingbus was an older Qt Quick demo game from the early days of Qt Quick which has now been revived with some enhanced graphics work as well as being ported to use Qt Quick 2. The actual porting job (from Qt 4.7 + Qt Quick 1 to Qt 5.2 + Qt Quick 2) was a straightforward 15-minute replacement of import statements.

Flyingbus demonstrates how it is possible to create a cross platform game that looks good on a variety of form factors.  There are sound effects played from Qt Quick using Qt Multimedia on both iOS and Android.  If you are using a high DPI device like a Retina display iPad then the graphics should be displayed in higher quality.

Flying Bus QML Game

Try it out!

   Download on the AppStore

 

Discover more Qt news: Introducing Qt Mobile

Did you like this? Share it:
Bookmark and Share

Posted in Android, cross-platform, desktop, iOS, Qt Quick 2, Styles

3 comments to Cross-Platform Applications in iOS and Android Stores with Qt

suy says:

Hi. I’m not seeing the flying bus on the Play Store for a Nexus 7 (first one). I guess is something on Google’s side? Or it might be that is not uploaded for all kinds of devices? (screens, architectures, etc.)

Thank you. The weather app is simple, but is nice to see Qt Quick Controls on mobile too.

PS: On the URL I see some applications packaged as “org.qt-project.*” and some as “com.digia.*”. Dunno if it was intended or not, but just to let you know.

Caroline says:

Hi Suy! The flying bus is available for Nexus 7, could you try again? If you encounter other problems please send an email to Google.Play@digia.com. For the URL, we should probably use consistent names in the future. Thanks.

Sebastian says:

Very nice, thanks!

p.s. the Forecast-app has a clear visible offset-by-+30-degree bug :)

Commenting closed.