Creating a Mobile Application

This tutorial describes developing Qt Quick applications for Android and iOS devices using Qt Quick Controls. We use Qt Creator to implement a Qt Quick application that accelerates an SVG (Scalable Vector Graphics) image based on the changing accelerometer values.

For more information about the UI choices you have, see User Interfaces.

Setting up the Development Environment

To be able to build the application for and run it on a mobile device, you must set up the development environment for the device platform and configure a connection between Qt Creator and the mobile device.

To develop for Android devices, you must install Qt for Android and set up the development environment, as instructed in Connecting Android Devices.

To develop for iOS devices, you must install Xcode and use it to configure a device. For this, you need an Apple developer account and iOS Developer Program certificate that you receive from Apple. For more information, see Connecting iOS Devices.

Creating the Project

  1. Select File > New File or Project > Application (Qt Quick) > Qt Quick Application - Empty.
  2. Select Choose to open the Project Location dialog.
  3. In the Name field, enter a name for the application.
  4. In the Create in field, enter the path for the project files.
  5. Select Next (or Continue on macOS) to open the Define Build System dialog.
  6. In the Build system field, select the build system to use for building and running the project: qmake, CMake, or Qbs.
  7. Select Next to open the Define Project Details dialog.
  8. Select Next to use the default settings and to open the Translation File dialog.
  9. Select Next to use the default settings and to open the Kit Selection dialog.
  10. Select kits for the platforms that you want to build the application for. To build applications for mobile devices, select kits for Android ARM and iPhone OS.

    Note: Kits are listed if they have been specified in Tools > Options > Kits (on Windows and Linux) or in Qt Creator > Preferences > Kits (on macOS). For more information, see Adding Kits.

  11. Select Next to open the Project Management dialog.
  12. Review the project settings, and select Finish (or Done on macOS) to create the project.

For more information about the settings that you skipped, see Creating Qt Quick Applications.

Creating the Accelbubble Main View

The main view of the application displays an SVG bubble image that moves around the screen when you tilt the device.

We use Bluebubble.svg in this tutorial, but you can use any other image or a QML type, instead.

To create the UI in the Design mode:

  1. Open the main.qml in the Design mode.
  2. In the Navigator, select Label and press Delete to delete it.
  3. In Library > QML Types, select Rectangle and drag and drop it to Window in Navigator.
  4. Select the rectangle in Navigator to edit its properties:

    "Rectangle in different views"

    1. In the Id field enter mainWindow, to be able to reference the rectangle from other places.
    2. Select the Layout tab, and then click the (Fill to Parent) button to anchor the rectangle to the item.
  5. Select Library > Assets > Add New Assets to locate Bluebubble.svg (or your own image) and add it to the project folder.
  6. Drag and drop the image from Assets to mainWindow in Navigator.
  7. In the Properties view, Id field, enter bubble to be able to reference the image from other places.

    "Image file in different views"

  8. Select the (Export) button in Navigator to export mainWindow and bubble as properties.

We want to modify the properties of the bubble in ways that are not supported in the Design mode, and therefore we create a custom QML type for it:

  1. Right-click the image and select Move Component into Separate File.

  2. In the Component name field, enter Bubble.
  3. Deselect the x and y check boxes, because we want to use the accelerometer to determine the location of the bubble on the screen.
  4. Select OK to create Bubble.qml.

Qt Creator creates a reference to the Bubble type in main.qml.

To check your code, you can compare your main.qml and Bubble.qml with the corresponding example files.

The UI is now ready and you can add the necessary properties for making the bubble move.

Moving the Bubble

We add custom properties to position the image in respect to the width and height of the main window.

  1. Open Bubble.qml in Design mode.
  2. In Connections View, Properties tab, select click the button to add a custom property for the Bubble type.

    "Connection View Properties tab"

  3. Double-click the value in the Property column, and enter centerY as the name of the property.
  4. Double-click the value in the Property Type column, and select real as the type of the property. You will specify the property value later in Properties.
  5. Add two more properties of the same type with the names centerY and bubbleCenter.
  6. Open main.qml in Design mode.
  7. Select bubble in Navigator to specify values for the custom properties in Properties.
  8. In the X field, select , and then select Set Binding to open Binding Editor.

    "Setting binding for X in Binding Editor"

  9. Enter the following value to center the bubble horizontally in the main window when the application starts: bubble.centerX - bubbleCenter.
  10. Select OK to close the binding editor and save the binding.
  11. In the X field, set the following binding to center the bubble vertically: bubble.centerY - bubbleCenter.
  12. In the centerY field, enter the following value to bind the y coordinate of the bubble center to half the height of the main window: mainWindow.height /2.

    "Setting binding for centerX"

  13. In the centerX field, bind the x coordinate of the bubble center to half the width of the main window: mainWindow.width /2.
  14. In the bubbleCenter field, bind the center of the bubble to half of its width: bubble.width /2.

We now want to add code to move the bubble based on Accelerometer sensor values. This is not supported by Form Editor, so we will do it in Text Editor:

  1. Add the following import statement to main.qml:
    import QtSensors 5.12
  2. Add the Accelerometer type with the necessary properties:
        Accelerometer {
           id: accel
           dataRate: 100
           active: true
           readonly property double radians_to_degrees: 180 / Math.PI
    
           }
  3. Add the following JavaScript functions that calculate the x and y position of the bubble based on the current Accelerometer values:
        function calcPitch(x,y,z) {
            return -Math.atan2(y, Math.hypot(x, z)) * accel.radians_to_degrees;
        }
        function calcRoll(x,y,z) {
            return -Math.atan2(x, Math.hypot(y, z)) * accel.radians_to_degrees;
        }
  4. Add the following JavaScript code for onReadingChanged signal of Accelerometer type to make the bubble move when the Accelerometer values change:
           onReadingChanged: {
               var newX = (bubble.x + calcRoll(accel.reading.x, accel.reading.y, accel.reading.z) * 0.1)
               var newY = (bubble.y - calcPitch(accel.reading.x, accel.reading.y, accel.reading.z) * 0.1)
    
               if (isNaN(newX) || isNaN(newY))
                   return;
    
               if (newX < 0)
                   newX = 0
    
               if (newX > mainWindow.width - bubble.width)
                   newX = mainWindow.width - bubble.width
    
               if (newY < 18)
                   newY = 18
    
               if (newY > mainWindow.height - bubble.height)
                   newY = mainWindow.height - bubble.height
    
               bubble.x = newX
               bubble.y = newY
           }

    We want to ensure that the position of the bubble is always within the bounds of the screen. If the Accelerometer returns not a number (NaN), the value is ignored and the bubble position is not updated.

  5. Add SmoothedAnimation behavior on the x and y properties of the bubble to make its movement look smoother.
                Behavior on y {
                    SmoothedAnimation {
                        easing.type: Easing.Linear
                        duration: 100
                    }
                }
                Behavior on x {
                    SmoothedAnimation {
                        easing.type: Easing.Linear
                        duration: 100
                    }
                }

Locking Device Orientation

The device display is rotated by default when the device orientation changes between portrait and landscape. For this example, it would be better for the screen orientation to be fixed.

To lock the orientation to portrait or landscape on Android, specify it in an AndroidManifest.xml that you can generate in Qt Creator. For more information, see Editing Manifest Files.

On iOS, you can lock the device orientation in a Info.plist file that you specify in the .pro file as the value of the QMAKE_INFO_PLIST variable.

Adding Dependencies

Update the accelbubble.pro file with the following library dependency information:

QT += quick sensors svg xml

On iOS, you must link to the above libraries statically, by adding the plugin names explicitly as values of the QTPLUGIN variable. Specify a qmake scope for iOS builds (which can also contain the QMAKE_INFO_PLIST variable):

ios {
QTPLUGIN += qsvg qsvgicon qtsensors_ios
QMAKE_INFO_PLIST = Info.plist
}

After adding the dependencies, select Build > Run qmake to apply the changes to the Makefile of the project.

Running the Application

The application is complete and ready to be deployed to a device:

  1. Enable USB Debugging on the Android device or developer mode on the iOS device.
  2. Connect the device to the development PC.

    If you are using a device running Android v4.2.2, it should prompt you to verify the connection to allow USB debugging from the PC it is connected to. To avoid such prompts every time you connect the device, select the Always allow from the computer check box, and then select OK.

  3. To run the application on the device, press Ctrl+R.

Files:

© 2020 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.