First Deployment on Android and iOS

April 6, 2016 — 8 Comments

Edited 2016-06-05: Now with Qt 5.7 RC the Gallery is included and enhanced.

Edited 2016-04-28: Unfortunately Qt 5.7 Beta doesn’t include the Gallery because of some renaming-trouble. To test a first deployment running Qt 5.7 Beta please follow this article: qt-5.7-beta


Now it’s time to check if your installation and settings are well done. Easiest way to do this is to deploy an existing example to Android and iOS.

Qt Quick Controls 2 Gallery Example

Open Qt Creator, then goto Welcome –> Examples and search for labs.controls: (Qt 5.6) or search for Gallery 2 from Qt 5.7

01_first_deploy

In 5.6 where qt.labs.controls are only a TechPreview there’s only one Example: Gallery

Build and Run Configuration

Click on Gallery selects ‘Project’ on the left side and opens two windows: Project Build and Help:

02_first_deploy

Click on Add Kit to add your Kits:

03_first_deploy

I always only test on real devices, so I’m using these two Kits: Android for arm and iPhone.

04_first_deploy

Hover with your mouse over the top-right corner of a Kit and you can Remove it.

Each Kit has Build and Run Tabs where you can configure the build. Qt Creator should have done most of the work automatically – so for running the Example it should work out of the box.

Here’s the Android Build:

05_first_deploy

check the APK Build, where you can select the SDK. Also there’s the checkbox to use Gradle and how Qt libraries are bundled:

06_first_deploy

Compile, Deploy and Run on Android

Now connect your Android Phone via USB.

At left-bottom side please select the correct Kit to be used: Android – Debug:

07_first_deploy

Now we can (Build and) Run the APP:

08_first_deploy

Qt Creator asks you which Device to use. We already have connected the Android Device: STV100-4 is the BlackBerry PRIV:

09_first_deploy

Select the Device and Qt Creator will compile and build. Open the Compile Output to see what happens:

10_first_deploy

As next the APP was deployed to the Device and started. You can verify the Console output from ‘Application Output’.

priv

Compile, Deploy and Run on iOS

Now we want to do the same for iOS.

Connect your iPhone via USB and again select the right Kit:

11_first_deploy

This time there’s no extra Dialog to select the Device – it’s on top of Kit Selection. iPhone and Debug are selected – so we can Run again.

Project compiles, deploys and runs the APP on iPhone.

12_first_deploy

13_first_deploy

iphone

Go through this Gallery Example to see most of UI and Navigation Controls in Action.

From Settings you can switch between Material, Universal and  Default.


← Back (Qt Creator – Settings)

→ Next Article (HowTo Translations (i18n))

⇐ Home (Overview / Topics)


8 responses to First Deployment on Android and iOS

  1. 

    Where can I download your bin apk of above app to test on my Android? I don`t want to install dev tools to compile.

    • 

      all my sample apps can be built easy from the github projects – have no bins (APK)
      yes, this requires to install Qt 5.7
      without two exceptions🙂
      search for Qt Con 2016 Conference App and Qt World Summit Conference App – these apps are available at Google Play and Apple App Store and Amazon App Store.
      ekke

      • 

        Thanks for reply, but now I don`t have desktop to make any compilations.
        I saw your QtConference app from market. I would interest to see code theme dark-light switching. Is there in code samples on github` sources?

      • 

        I found theme switcher in your code.
        if(isDarkTheme == 1) {
        Material.theme = Material.Dark
        } else {
        Material.theme = Material.Light
        }
        Is it such simple?🙂

  2. 

    yes – it’s that simple. you can even mix both themes. Setting at the root (ApplicationWindow) it will work for the complete app – setting per ex. only one Page to another theme then this Page and all Controls inside will use another theme.
    Themes and Colors can easy be switched – the style (Material / Universal) needs restart of app

    • 

      How to been designed a QML pages or other layouts? Text editable of QML-notation or some visual designer as QtDesigner. How to preview designed controls on their positions except running application at debug?

      • 

        OK. I found Qt Quick Designer.

      • 

        I’m never using a designer. developing business apps == data-driven UI. you need data to see if UI is working as expected. Also doing as most as possible dynamically using Components, Loader, … – cannot be tested in a UI designer tool.
        To start and test you can use the Designer – I never did.

Leave a Reply

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 )

Google+ photo

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

Connecting to %s