/**************************************************************************** ** ** Copyright (c) 2014 Digia Plc and/or its subsidiary(-ies). ** Contact: http://www.qt-project.org/legal ** ** This file is part of Qt Creator ** ** ** GNU Free Documentation License ** ** Alternatively, this file may be used under the terms of the GNU Free ** Documentation License version 1.3 as published by the Free Software ** Foundation and appearing in the file included in the packaging of this ** file. ** ** ****************************************************************************/ // ********************************************************************** // NOTE: the sections are not ordered by their logical order to avoid // reshuffling the file each time the index order changes (i.e., often). // Run the fixnavi.pl script to adjust the links to the index order. // ********************************************************************** /*! \contentspage index.html \previouspage creator-writing-program.html \page creator-android-app-tutorial.html \nextpage creator-project-managing.html \title Creating an Android Application This tutorial describes developing Qt Quick applications for Android devices using Qt Quick Controls. This tutorial describes how to use \QC to implement a Qt Quick application that accelerates an SVG (Scalable Vector Graphics) image based on the changing accelerometer values. \image creator_android_tutorial_ex_app.png \section1 Creating the Project \list 1 \li Select \gui File > \gui {New File or Project} > \gui Applications > \gui {Qt Quick Application} > \gui Choose. \li In the \gui{Name} field, type \b{accelbubble}. \li In the \gui {Create in} field, enter the path for the project files. For example, \c {C:\Qt\examples}, and then click \gui{Next} (or \gui Continue on Mac OS X). \li In the \gui {Qt Quick component set} field, select \gui {Qt Quick Controls 1.0}. \li Select an Android \l{glossary-buildandrun-kit}{kit} for ARM, and click \gui{Next}. \note Kits are listed if they have been specified in \gui Tools > \gui Options > \gui{Build & Run} > \gui Kits. \li Select \gui Next in the following dialogs to use the default settings. \li Review the project settings, and click \gui{Finish} (or \gui Done on Mac OS X). \endlist \QC generates a default QML file that you can modify to create the main view of the application. \section1 Creating the Main View The main view of the application displays an SVG bubble image at the center of the main window. To use the Bluebubble.svg used by the Qt Sensors example, Accel Bubble, in your project, you must copy it to the project directory (same subdirectory as the QML file) from the examples directory in the Qt installation directory. For example: \c {C:\Qt\Qt5.2.0\5.2.0\msvc2010\examples\sensors\accelbubble\content}. The image appears in the \gui Resources pane. You can also use any other image or a QML type, instead. \list 1 \li In the \gui Projects view, double-click the main.qml file to open it in the code editor. \li Modify the properties of the ApplicationWindow type to specify the application name, give the ApplicationWindow an id, and to set it visible, as illustrated by the following code snippet: \quotefromfile accelbubble/main.qml \skipto ApplicationWindow \printuntil visible \skipto /^\}/ \printuntil } \li Click \gui Design to open the file in \QMLD. \li In the \gui Navigator pane, select \gui Button and press \key Delete to delete it. \li In the \gui Library view, \gui Resources tab, select Bluebubble.svg and drag and drop it to the canvas. \li In the \gui Properties pane, \gui Id field, enter \e bubble to be able to reference the image from other places. \li In the code editor, add the following new properties to the image to position the image at the center of ApplicationWindow when the application starts: \quotefromfile accelbubble/main.qml \skipto Image \printuntil bubble.width \li Set the x and y position of the image based on the new properties: \dots \printuntil centerY \skipto /^\}/ \printuntil } \endlist Here is how the accelbubble.qml file looks after you made the changes: \quotefromfile accelbubble/main.qml \skipto import QtQuick \printuntil 1.0 \codeline \skipto ApplicationWindow \printuntil true \skipto Image \printuntil y: \skipto /^\}/ \printuntil } \section1 Moving the Bubble Now that the visual elements are in place, let us move the bubble based on Accelerometer sensor values. \list 1 \li Add the following import statement to main.qml: \code import QtSensors 5.0 \endcode \li Add the \l{Accelerometer} type with the necessary properties: \quotefromfile accelbubble/main.qml \skipto Accelerometer \printuntil true \skipto } \printuntil } \li Add the following JavaScript functions that calculate the x and y position of the bubble based on the current Accelerometer values: \quotefromfile accelbubble/main.qml \skipto function \printuntil Math.atan(x \printuntil } \li Add the following JavaScript code for \a onReadingChanged signal of Accelerometer type to make the bubble move when the Accelerometer values change: \quotefromfile accelbubble/main.qml \skipto onReadingChanged \printuntil } \li Add SmoothedAnimation behavior on the \a x and \a y properties of the bubble to make its movement look smoother. \quotefromfile accelbubble/main.qml \skipto Behavior \printuntil x \printuntil } \printuntil } \endlist \section1 Adding Dependencies Update the accelbubble.pro file with the following library dependency information: \code QT += quick sensors svg xml \endcode \section1 Running the Application The application is complete and ready to be deployed to an Android device: \list 1 \li Enable \e{USB Debugging} on the device. \li 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, check "Always allow from the computer" and select \gui OK. \li To run the application on the device, press \key {Ctrl+R}. \endlist \section1 Example Code When you have completed the steps, the main.qml file should look as follows: \quotefile accelbubble/main.qml */