Doc: Update mobile app tutorial

- Use Qt Quick Application - Empty wizard template to create
  a simpler project
- Use Add New Assets button to add the Bluebubble.svg file to
  the project and QRC
- Use Connections View Properties tab to add custom properties
- Use Properties view and Binding Editor to specify values for
  the custom properties
- Add screenshots

Fixes: QTCREATORBUG-24478
Change-Id: Ic165684141b06dc1870054c8faa2f27f33162c20
Reviewed-by: Alessandro Portale <alessandro.portale@qt.io>

17 files changed, 133 insertions, 540 deletions

diff --git a/doc/qtcreator/examples/accelbubble/Bubble.qml b/doc/qtcreator/examples/accelbubble/Bubble.qml
index 67e1c5922d..043086fcdc 100644
--- a/doc/qtcreator/examples/accelbubble/Bubble.qml
+++ b/doc/qtcreator/examples/accelbubble/Bubble.qml
@@ -1,60 +1,12 @@
-/****************************************************************************
-**
-** Copyright (C) 2017 The Qt Company Ltd.
-** Contact: https://www.qt.io/licensing/
-**
-** This file is part of Qt Creator
-**
-** $QT_BEGIN_LICENSE:BSD$
-** Commercial License Usage
-** Licensees holding valid commercial Qt licenses may use this file in
-** accordance with the commercial license agreement provided with the
-** Software or, alternatively, in accordance with the terms contained in
-** a written agreement between you and The Qt Company. For licensing terms
-** and conditions see https://www.qt.io/terms-conditions. For further
-** information use the contact form at https://www.qt.io/contact-us.
-**
-** BSD License Usage
-** Alternatively, you may use this file under the terms of the BSD license
-** as follows:
-**
-** "Redistribution and use in source and binary forms, with or without
-** modification, are permitted provided that the following conditions are
-** met:
-**   * Redistributions of source code must retain the above copyright
-**     notice, this list of conditions and the following disclaimer.
-**   * Redistributions in binary form must reproduce the above copyright
-**     notice, this list of conditions and the following disclaimer in
-**     the documentation and/or other materials provided with the
-**     distribution.
-**   * Neither the name of The Qt Company Ltd nor the names of its
-**     contributors may be used to endorse or promote products derived
-**     from this software without specific prior written permission.
-**
-**
-** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
-**
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-
-import QtQuick 2.9
-import QtQuick.Controls 2.2
+import QtQuick 2.14
+import QtQuick.Window 2.14
 
 Image {
+    id: bubble
     source: "Bluebubble.svg"
     smooth: true
     property real centerX
-    property real centerY
     property real bubbleCenter
+    property real centerY
+    fillMode: Image.PreserveAspectFit
 }
diff --git a/doc/qtcreator/examples/accelbubble/Page1Form.ui.qml b/doc/qtcreator/examples/accelbubble/Page1Form.ui.qml
deleted file mode 100644
index 0ab08fc483..0000000000
--- a/doc/qtcreator/examples/accelbubble/Page1Form.ui.qml
+++ /dev/null
@@ -1,74 +0,0 @@
-/****************************************************************************
-**
-** Copyright (C) 2017 The Qt Company Ltd.
-** Contact: https://www.qt.io/licensing/
-**
-** This file is part of Qt Creator
-**
-** $QT_BEGIN_LICENSE:BSD$
-** Commercial License Usage
-** Licensees holding valid commercial Qt licenses may use this file in
-** accordance with the commercial license agreement provided with the
-** Software or, alternatively, in accordance with the terms contained in
-** a written agreement between you and The Qt Company. For licensing terms
-** and conditions see https://www.qt.io/terms-conditions. For further
-** information use the contact form at https://www.qt.io/contact-us.
-**
-** BSD License Usage
-** Alternatively, you may use this file under the terms of the BSD license
-** as follows:
-**
-** "Redistribution and use in source and binary forms, with or without
-** modification, are permitted provided that the following conditions are
-** met:
-**   * Redistributions of source code must retain the above copyright
-**     notice, this list of conditions and the following disclaimer.
-**   * Redistributions in binary form must reproduce the above copyright
-**     notice, this list of conditions and the following disclaimer in
-**     the documentation and/or other materials provided with the
-**     distribution.
-**   * Neither the name of The Qt Company Ltd nor the names of its
-**     contributors may be used to endorse or promote products derived
-**     from this software without specific prior written permission.
-**
-**
-** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
-**
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-import QtQuick 2.9
-import QtQuick.Controls 2.2
-
-Page {
-    width: 600
-    height: 400
-    property alias bubble: bubble
-    property alias mainWindow: mainWindow
-
-    header: Label {
-        text: qsTr("Page 1")
-        font.pixelSize: Qt.application.font.pixelSize * 2
-        padding: 10
-    }
-
-    Rectangle {
-        id: mainWindow
-        color: "#ffffff"
-        anchors.fill: parent
-
-        Bubble {
-            id: bubble
-        }
-    }
-}
diff --git a/doc/qtcreator/examples/accelbubble/Page2Form.ui.qml b/doc/qtcreator/examples/accelbubble/Page2Form.ui.qml
deleted file mode 100644
index 11a8abff4a..0000000000
--- a/doc/qtcreator/examples/accelbubble/Page2Form.ui.qml
+++ /dev/null
@@ -1,67 +0,0 @@
-/****************************************************************************
-**
-** Copyright (C) 2017 The Qt Company Ltd.
-** Contact: https://www.qt.io/licensing/
-**
-** This file is part of Qt Creator
-**
-** $QT_BEGIN_LICENSE:BSD$
-** Commercial License Usage
-** Licensees holding valid commercial Qt licenses may use this file in
-** accordance with the commercial license agreement provided with the
-** Software or, alternatively, in accordance with the terms contained in
-** a written agreement between you and The Qt Company. For licensing terms
-** and conditions see https://www.qt.io/terms-conditions. For further
-** information use the contact form at https://www.qt.io/contact-us.
-**
-** BSD License Usage
-** Alternatively, you may use this file under the terms of the BSD license
-** as follows:
-**
-** "Redistribution and use in source and binary forms, with or without
-** modification, are permitted provided that the following conditions are
-** met:
-**   * Redistributions of source code must retain the above copyright
-**     notice, this list of conditions and the following disclaimer.
-**   * Redistributions in binary form must reproduce the above copyright
-**     notice, this list of conditions and the following disclaimer in
-**     the documentation and/or other materials provided with the
-**     distribution.
-**   * Neither the name of The Qt Company Ltd nor the names of its
-**     contributors may be used to endorse or promote products derived
-**     from this software without specific prior written permission.
-**
-**
-** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
-**
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-import QtQuick 2.9
-import QtQuick.Controls 2.2
-
-Page {
-    width: 600
-    height: 400
-
-    header: Label {
-        text: qsTr("Page 2")
-        font.pixelSize: Qt.application.font.pixelSize * 2
-        padding: 10
-    }
-
-    Label {
-        text: qsTr("You are on Page 2.")
-        anchors.centerIn: parent
-    }
-}
diff --git a/doc/qtcreator/examples/accelbubble/accelbubble.pro b/doc/qtcreator/examples/accelbubble/accelbubble.pro
index 2dfcd42652..a0caf1e9b2 100644
--- a/doc/qtcreator/examples/accelbubble/accelbubble.pro
+++ b/doc/qtcreator/examples/accelbubble/accelbubble.pro
@@ -2,18 +2,12 @@ QT += quick sensors svg xml
 
 CONFIG += c++11
 
-# The following define makes your compiler emit warnings if you use
-# any feature of Qt which as been marked deprecated (the exact warnings
-# depend on your compiler). Please consult the documentation of the
-# deprecated API in order to know how to port your code away from it.
-DEFINES += QT_DEPRECATED_WARNINGS
-
-# You can also make your code fail to compile if you use deprecated APIs.
+# You can make your code fail to compile if it uses deprecated APIs.
 # In order to do so, uncomment the following line.
-# You can also select to disable deprecated APIs only up to a certain version of Qt.
 #DEFINES += QT_DISABLE_DEPRECATED_BEFORE=0x060000    # disables all the APIs deprecated before Qt 6.0.0
 
-SOURCES += main.cpp
+SOURCES += \
+        main.cpp
 
 RESOURCES += qml.qrc
 
@@ -28,10 +22,4 @@ qnx: target.path = /tmp/$${TARGET}/bin
 else: unix:!android: target.path = /opt/$${TARGET}/bin
 !isEmpty(target.path): INSTALLS += target
 
-  ios {
-  QTPLUGIN += qsvg qsvgicon qtsensors_ios
-  QMAKE_INFO_PLIST = Info.plist
-  }
-
-DISTFILES += \
-    Bluebubble.svg
+ANDROID_ABIS = armeabi-v7a
diff --git a/doc/qtcreator/examples/accelbubble/main.cpp b/doc/qtcreator/examples/accelbubble/main.cpp
index 4e002b280e..fa832817aa 100644
--- a/doc/qtcreator/examples/accelbubble/main.cpp
+++ b/doc/qtcreator/examples/accelbubble/main.cpp
@@ -1,53 +1,3 @@
-/****************************************************************************
-**
-** Copyright (C) 2017 The Qt Company Ltd.
-** Contact: https://www.qt.io/licensing/
-**
-** This file is part of Qt Creator
-**
-** $QT_BEGIN_LICENSE:BSD$
-** Commercial License Usage
-** Licensees holding valid commercial Qt licenses may use this file in
-** accordance with the commercial license agreement provided with the
-** Software or, alternatively, in accordance with the terms contained in
-** a written agreement between you and The Qt Company. For licensing terms
-** and conditions see https://www.qt.io/terms-conditions. For further
-** information use the contact form at https://www.qt.io/contact-us.
-**
-** BSD License Usage
-** Alternatively, you may use this file under the terms of the BSD license
-** as follows:
-**
-** "Redistribution and use in source and binary forms, with or without
-** modification, are permitted provided that the following conditions are
-** met:
-**   * Redistributions of source code must retain the above copyright
-**     notice, this list of conditions and the following disclaimer.
-**   * Redistributions in binary form must reproduce the above copyright
-**     notice, this list of conditions and the following disclaimer in
-**     the documentation and/or other materials provided with the
-**     distribution.
-**   * Neither the name of The Qt Company Ltd nor the names of its
-**     contributors may be used to endorse or promote products derived
-**     from this software without specific prior written permission.
-**
-**
-** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
-**
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-
 #include <QGuiApplication>
 #include <QQmlApplicationEngine>
 
@@ -58,9 +8,13 @@ int main(int argc, char *argv[])
     QGuiApplication app(argc, argv);
 
     QQmlApplicationEngine engine;
-    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
-    if (engine.rootObjects().isEmpty())
-        return -1;
+    const QUrl url(QStringLiteral("qrc:/main.qml"));
+    QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
+        &app, [url](QObject *obj, const QUrl &objUrl) {
+            if (!obj && url == objUrl)
+                QCoreApplication::exit(-1);
+        }, Qt::QueuedConnection);
+    engine.load(url);
 
     return app.exec();
 }
diff --git a/doc/qtcreator/examples/accelbubble/main.qml b/doc/qtcreator/examples/accelbubble/main.qml
index 584ba4d1a7..6e567e819e 100644
--- a/doc/qtcreator/examples/accelbubble/main.qml
+++ b/doc/qtcreator/examples/accelbubble/main.qml
@@ -1,112 +1,45 @@
-/****************************************************************************
-**
-** Copyright (C) 2017 The Qt Company Ltd.
-** Contact: https://www.qt.io/licensing/
-**
-** This file is part of Qt Creator
-**
-** $QT_BEGIN_LICENSE:BSD$
-** Commercial License Usage
-** Licensees holding valid commercial Qt licenses may use this file in
-** accordance with the commercial license agreement provided with the
-** Software or, alternatively, in accordance with the terms contained in
-** a written agreement between you and The Qt Company. For licensing terms
-** and conditions see https://www.qt.io/terms-conditions. For further
-** information use the contact form at https://www.qt.io/contact-us.
-**
-** BSD License Usage
-** Alternatively, you may use this file under the terms of the BSD license
-** as follows:
-**
-** "Redistribution and use in source and binary forms, with or without
-** modification, are permitted provided that the following conditions are
-** met:
-**   * Redistributions of source code must retain the above copyright
-**     notice, this list of conditions and the following disclaimer.
-**   * Redistributions in binary form must reproduce the above copyright
-**     notice, this list of conditions and the following disclaimer in
-**     the documentation and/or other materials provided with the
-**     distribution.
-**   * Neither the name of The Qt Company Ltd nor the names of its
-**     contributors may be used to endorse or promote products derived
-**     from this software without specific prior written permission.
-**
-**
-** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
-**
-** $QT_END_LICENSE$
-**
-****************************************************************************/
+import QtQuick 2.14
+import QtQuick.Window 2.14
+import QtSensors 5.12
 
-import QtQuick 2.9
-import QtQuick.Controls 2.2
-import QtSensors 5.9
-
-ApplicationWindow {
+Window {
+    id: window
     visible: true
-    width: 640
-    height: 480
-    title: qsTr("Accelerate Bubble")
-
-    SwipeView {
-        id: swipeView
+    property alias mainWindow: mainWindow
+    property alias bubble: bubble
+    Rectangle {
+        id: mainWindow
+        color: "#ffffff"
         anchors.fill: parent
-        currentIndex: tabBar.currentIndex
-
-        Page1Form {
-            bubble {
-                id: bubble
-                centerX: mainWindow.width / 2
-                centerY: mainWindow.height / 2
-                bubbleCenter: bubble.width / 2
-                x: bubble.centerX - bubble.bubbleCenter
-                y: bubble.centerY - bubble.bubbleCenter
 
-                Behavior on y {
-                    SmoothedAnimation {
-                        easing.type: Easing.Linear
-                        duration: 100
-                    }
+        Bubble {
+            id: bubble
+            x: bubble.centerX - bubbleCenter
+            y: bubble.centerY - bubbleCenter
+            bubbleCenter: bubble.width /2
+            centerX: mainWindow.width /2
+            centerY: mainWindow.height /2
+
+            Behavior on y {
+                SmoothedAnimation {
+                    easing.type: Easing.Linear
+                    duration: 100
                 }
-                Behavior on x {
-                    SmoothedAnimation {
-                        easing.type: Easing.Linear
-                        duration: 100
-                    }
+            }
+            Behavior on x {
+                SmoothedAnimation {
+                    easing.type: Easing.Linear
+                    duration: 100
                 }
             }
         }
-
-        Page2Form {
-        }
-    }
-
-    footer: TabBar {
-        id: tabBar
-        currentIndex: swipeView.currentIndex
-
-        TabButton {
-            text: qsTr("Page 1")
-        }
-        TabButton {
-            text: qsTr("Page 2")
-        }
     }
 
     Accelerometer {
        id: accel
        dataRate: 100
        active: true
+       readonly property double radians_to_degrees: 180 / Math.PI
 
        onReadingChanged: {
            var newX = (bubble.x + calcRoll(accel.reading.x, accel.reading.y, accel.reading.z) * 0.1)
@@ -118,24 +51,24 @@ ApplicationWindow {
            if (newX < 0)
                newX = 0
 
-           if (newX > page1.mainWindow.width - bubble.width)
-               newX = page1.mainWindow.width - bubble.width
+           if (newX > mainWindow.width - bubble.width)
+               newX = mainWindow.width - bubble.width
 
            if (newY < 18)
                newY = 18
 
-           if (newY > page1.mainWindow.height - bubble.height)
-               newY = page1.mainWindow.height - bubble.height
+           if (newY > mainWindow.height - bubble.height)
+               newY = mainWindow.height - bubble.height
 
-               bubble.x = newX
-               bubble.y = newY
+           bubble.x = newX
+           bubble.y = newY
        }
    }
 
-    function calcPitch(x, y, z) {
-        return -(Math.atan(y / Math.sqrt(x * x + z * z)) * 57.2957795);
+    function calcPitch(x,y,z) {
+        return -Math.atan2(y, Math.hypot(x, z)) * accel.radians_to_degrees;
     }
-    function calcRoll(x, y, z) {
-        return -(Math.atan(x / Math.sqrt(y * y + z * z)) * 57.2957795);
+    function calcRoll(x,y,z) {
+        return -Math.atan2(x, Math.hypot(y, z)) * accel.radians_to_degrees;
     }
 }
diff --git a/doc/qtcreator/examples/accelbubble/qml.qrc b/doc/qtcreator/examples/accelbubble/qml.qrc
index 7d7777aca0..3e6f33859a 100644
--- a/doc/qtcreator/examples/accelbubble/qml.qrc
+++ b/doc/qtcreator/examples/accelbubble/qml.qrc
@@ -1,10 +1,7 @@
 <RCC>
     <qresource prefix="/">
-        <file>Page1Form.ui.qml</file>
-        <file>Page2Form.ui.qml</file>
-        <file>qtquickcontrols2.conf</file>
-        <file>Bubble.qml</file>
-        <file>Bluebubble.svg</file>
         <file>main.qml</file>
+        <file>Bluebubble.svg</file>
+        <file>Bubble.qml</file>
     </qresource>
 </RCC>
diff --git a/doc/qtcreator/examples/accelbubble/qtquickcontrols2.conf b/doc/qtcreator/examples/accelbubble/qtquickcontrols2.conf
deleted file mode 100644
index 75b2cb8fff..0000000000
--- a/doc/qtcreator/examples/accelbubble/qtquickcontrols2.conf
+++ /dev/null
@@ -1,6 +0,0 @@
-; This file can be edited to change the style of the application
-; Read "Qt Quick Controls 2 Configuration File" for details:
-; http://doc.qt.io/qt-5/qtquickcontrols2-configuration.html
-
-[Controls]
-Style=Default
diff --git a/doc/qtcreator/images/creator_android_tutorial_ex_app.png b/doc/qtcreator/images/creator_android_tutorial_ex_app.png
index 3be9f31fe2..b31255f581 100644
--- a/doc/qtcreator/images/creator_android_tutorial_ex_app.png
+++ b/doc/qtcreator/images/creator_android_tutorial_ex_app.png
diff --git a/doc/qtcreator/images/qtcreator-move-component-into-separate-file.png b/doc/qtcreator/images/qtcreator-move-component-into-separate-file.png
index 6ebf605c56..3e444ab1bd 100644
--- a/doc/qtcreator/images/qtcreator-move-component-into-separate-file.png
+++ b/doc/qtcreator/images/qtcreator-move-component-into-separate-file.png
diff --git a/doc/qtcreator/images/qtquick-mobile-app-tutorial-binding-editor.png b/doc/qtcreator/images/qtquick-mobile-app-tutorial-binding-editor.png
new file mode 100644
index 0000000000..2f759e125f
--- /dev/null
+++ b/doc/qtcreator/images/qtquick-mobile-app-tutorial-binding-editor.png
diff --git a/doc/qtcreator/images/qtquick-mobile-app-tutorial-binding-editor1.png b/doc/qtcreator/images/qtquick-mobile-app-tutorial-binding-editor1.png
new file mode 100644
index 0000000000..2b0b4082ef
--- /dev/null
+++ b/doc/qtcreator/images/qtquick-mobile-app-tutorial-binding-editor1.png
diff --git a/doc/qtcreator/images/qtquick-mobile-app-tutorial-custom-properties.png b/doc/qtcreator/images/qtquick-mobile-app-tutorial-custom-properties.png
new file mode 100644
index 0000000000..0368c4f8c0
--- /dev/null
+++ b/doc/qtcreator/images/qtquick-mobile-app-tutorial-custom-properties.png
diff --git a/doc/qtcreator/images/qtquick-mobile-app-tutorial-image.png b/doc/qtcreator/images/qtquick-mobile-app-tutorial-image.png
new file mode 100644
index 0000000000..53b2b5544e
--- /dev/null
+++ b/doc/qtcreator/images/qtquick-mobile-app-tutorial-image.png
diff --git a/doc/qtcreator/images/qtquick-mobile-app-tutorial-main-view.png b/doc/qtcreator/images/qtquick-mobile-app-tutorial-main-view.png
new file mode 100644
index 0000000000..bba67363b5
--- /dev/null
+++ b/doc/qtcreator/images/qtquick-mobile-app-tutorial-main-view.png
diff --git a/doc/qtcreator/src/qtquick/creator-only/creator-mobile-app-tutorial.qdoc b/doc/qtcreator/src/qtquick/creator-only/creator-mobile-app-tutorial.qdoc
index 62ad21e603..228efa7395 100644
--- a/doc/qtcreator/src/qtquick/creator-only/creator-mobile-app-tutorial.qdoc
+++ b/doc/qtcreator/src/qtquick/creator-only/creator-mobile-app-tutorial.qdoc
@@ -52,12 +52,8 @@
     set up the development environment for the device platform and configure a
     connection between \QC and the mobile device.
 
-    To develop for Android  devices, you must download and install the latest
-    Android NDK and SDK Tools, and then update or install the tools and packages
-    needed for development. In addition, you must install the Java SE
-    Development Kit (JDK). After you have installed all
-    these tools, you must specify the paths to them in \QC.
-    For detailed instructions, see \l{Qt for Android} and
+    To develop for Android devices, you must install \l{Qt for Android}
+    and set up the development environment, as instructed in
     \l{Connecting Android Devices}.
 
     To develop for iOS devices, you must install Xcode and use it to configure
@@ -65,33 +61,32 @@
     Program certificate that you receive from Apple. For more information, see
     \l{Connecting iOS Devices}.
 
-    \include creator-tutorial-create-qq-project.qdocinc qt quick application
+    \include qtquick-tutorial-create-empty-project.qdocinc qtquick empty application
 
     \section1 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.
 
-    To use \e {Bluebubble.svg} in your project,
-    copy it to the project directory (same subdirectory as the QML file).
-    The image appears in \uicontrol Assets. You can also use any other
+    We use \e {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:
 
     \list 1
 
-        \li In the \uicontrol Projects view, double-click the \e Page1Form.ui.qml
-            file to open it in the Design mode.
+        \li Open the \e main.qml in the Design mode.
 
         \li In the \uicontrol Navigator, select \uicontrol Label and press
             \key Delete to delete it.
 
         \li In \uicontrol Library > \uicontrol {QML Types}, select
-            \uicontrol Rectangle and drag and drop it to the \uicontrol Page in
-            the navigator.
+            \uicontrol Rectangle and drag and drop it to  \e Window
+            in \uicontrol Navigator.
 
-        \li Select the rectangle in the navigator to edit its properties:
+        \li Select the rectangle in \uicontrol Navigator to edit its properties:
+
+            \image qtquick-mobile-app-tutorial-main-view.png "Rectangle in different views"
 
             \list a
 
@@ -105,14 +100,19 @@
 
             \endlist
 
-        \li In \uicontrol Library > \uicontrol Assets, select Bluebubble.svg
-            and drag and drop it to \e mainWindow in the navigator.
+                \li Select \uicontrol Library > \uicontrol Assets >
+                    \uicontrol {Add New Assets} to locate Bluebubble.svg
+                    (or your own image) and add it to the project folder.
+                \li Drag and drop the image from \uicontrol Assets to
+                    \e mainWindow in \uicontrol Navigator.
 
         \li In the \uicontrol Properties view, \uicontrol Id field, enter
             \e bubble to be able to reference the image from other places.
 
+            \image qtquick-mobile-app-tutorial-image.png "Image file in different views"
+
         \li Select the \inlineimage export_unchecked.png
-            (\uicontrol Export) button in the navigator to export the
+            (\uicontrol Export) button in \uicontrol Navigator to export
             \e mainWindow and \e bubble as properties.
 
     \endlist
@@ -130,62 +130,80 @@
 
         \li In the \uicontrol {Component name} field, enter \e Bubble.
 
-        \li Deselect the \uicontrol x, \uicontrol y, and
-            \uicontrol {ui.qml file} check boxes.
+        \li Deselect the \uicontrol x and \uicontrol y check boxes,
+            because we want to use the accelerometer to determine
+            the location of the bubble on the screen.
 
         \li Select \uicontrol OK to create \e Bubble.qml.
 
     \endlist
 
-    \QC creates a reference to the Bubble type in \e Page1Form.ui.qml.
+    \QC creates a reference to the Bubble type in \e main.qml.
 
-    To check your code, you can compare your \e Page1Form.ui.qml and
+    To check your code, you can compare your \e main.qml and
     \e {Bubble.qml} with the corresponding example files.
 
-    The UI is now ready and you can switch to editing the \e Bubble.qml and
-    \e main.qml files in the \uicontrol {Text Editor}, as described in the
-    following section.
+    The UI is now ready and you can add the necessary properties for
+    making the bubble move.
 
     \section1 Moving the Bubble
 
-    In the \uicontrol {Text Editor}, edit \e Bubble.qml to add properties that we
-    will use to position the image:
-
-    \quotefromfile accelbubble/Bubble.qml
-    \skipto Image
-    \printuntil }
-
-    In the \uicontrol {Text Editor}, edit \e main.qml to specify the application
-    title, as illustrated by the following code snippet:
-
-    \quotefromfile accelbubble/main.qml
-    \skipto ApplicationWindow
-    \printuntil title
+    We add custom properties to position the image in respect to the width
+    and height of the main window.
 
-    Specify bubble properties to position the image:
-
-    \printuntil bubbleCenter
-
-    Then set the x and y position of the image based on the new properties:
-
-    \printuntil centerY
-    \skipto /^\}/
-    \printuntil }
+    \list 1
+        \li Open \e Bubble.qml in Design mode.
+        \li In \uicontrol {Connections View}, \uicontrol Properties tab,
+            select click the \inlineimage plus.png
+            button to add a custom property for the Bubble type.
+            \image qtquick-mobile-app-tutorial-custom-properties.png "Connection View Properties tab"
+        \li Double-click the value in the \uicontrol Property column, and enter
+            \e centerY as the name of the property.
+        \li Double-click the value in the \uicontrol {Property Type} column,
+            and select \e real as the type of the property. You will specify
+            the property value later in \uicontrol Properties.
+        \li Add two more properties of the same type with the names \e centerY
+            and \e bubbleCenter.
+        \li Open \e main.qml in Design mode.
+        \li Select \e bubble in \uicontrol Navigator to specify values for the
+            custom properties in \uicontrol Properties.
+        \li In the \uicontrol X field, select \inlineimage icons/action-icon.png
+            , and then select \uicontrol {Set Binding} to open
+            \uicontrol {Binding Editor}.
+            \image qtquick-mobile-app-tutorial-binding-editor1.png "Setting binding for X in Binding Editor"
+        \li Enter the following value to center the bubble horizontally in the
+            main window when the application starts:
+            \c{bubble.centerX - bubbleCenter}.
+        \li Select \uicontrol OK to close the binding editor and save the
+            binding.
+        \li In the \uicontrol X field, set the following binding to center the
+            bubble vertically: \c{bubble.centerY - bubbleCenter}.
+        \li In the \uicontrol centerY field, enter the following value to bind
+            the y coordinate of the bubble center to half the height of the main
+            window: \c {mainWindow.height /2}.
+            \image qtquick-mobile-app-tutorial-binding-editor.png "Setting binding for centerX"
+        \li In the \uicontrol centerX field, bind the x coordinate of
+            the bubble center to half the width of the main window:
+            \c {mainWindow.width /2}.
+        \li In the \uicontrol bubbleCenter field, bind the center of
+            the bubble to half of its width: \c {bubble.width /2}.
+    \endlist
 
-    Then add code to move the bubble based on Accelerometer sensor values:
+    We now want to add code to move the bubble based on Accelerometer sensor
+    values. This is not supported by \uicontrol {Form Editor}, so we will do
+    it in \uicontrol {Text Editor}:
 
     \list 1
         \li Add the following import statement to \e main.qml:
 
-            \code
-            import QtSensors 5.9
-            \endcode
+            \quotefromfile accelbubble/main.qml
+            \skipto QtSensors
+            \printline QtSensors
 
         \li Add the \l{Accelerometer} type with the necessary properties:
 
-            \quotefromfile accelbubble/main.qml
             \skipto Accelerometer
-            \printuntil true
+            \printuntil radians_to_degrees
             \skipto }
             \printuntil }
 
@@ -195,7 +213,7 @@
 
             \quotefromfile accelbubble/main.qml
             \skipto function
-            \printuntil Math.atan(x
+            \printuntil Math.atan2(x
             \printuntil }
 
         \li Add the following JavaScript code for \c onReadingChanged signal of
@@ -206,10 +224,11 @@
             \skipto onReadingChanged
             \printuntil }
 
-            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.
-        \li Add SmoothedAnimation behavior on the \c x and \c y properties of
+            We want to ensure that the position of the bubble is always
+            within the bounds of the screen. If the Accelerometer returns
+            \e {not a number} (NaN), the value is ignored and the bubble
+            position is not updated.
+        \li Add \l SmoothedAnimation behavior on the \c x and \c y properties of
             the bubble to make its movement look smoother.
 
             \quotefromfile accelbubble/main.qml
@@ -256,20 +275,6 @@
     After adding the dependencies, select \uicontrol Build > \uicontrol {Run qmake} to apply
     the changes to the Makefile of the project.
 
-    \section1 Adding Assets
-
-    You need to add the Bluebubble.svg image file to the application assets
-    for deployment to mobile devices:
-
-    \list 1
-
-        \li In the \uicontrol Projects view, double-click the qml.qrc file to open it
-            in the assets editor.
-
-        \li Select \uicontrol Add to add Bluebubble.svg.
-
-    \endlist
-
     \section1 Running the Application
 
     The application is complete and ready to be deployed to a device:
diff --git a/doc/qtcreator/src/qtquick/creator-only/creator-tutorial-create-qq-project.qdocinc b/doc/qtcreator/src/qtquick/creator-only/creator-tutorial-create-qq-project.qdocinc
deleted file mode 100644
index 8152163f53..0000000000
--- a/doc/qtcreator/src/qtquick/creator-only/creator-tutorial-create-qq-project.qdocinc
+++ /dev/null
@@ -1,89 +0,0 @@
-/****************************************************************************
-**
-** Copyright (C) 2020 The Qt Company Ltd.
-** Contact: https://www.qt.io/licensing/
-**
-** This file is part of the Qt Creator documentation.
-**
-** Commercial License Usage
-** Licensees holding valid commercial Qt licenses may use this file in
-** accordance with the commercial license agreement provided with the
-** Software or, alternatively, in accordance with the terms contained in
-** a written agreement between you and The Qt Company. For licensing terms
-** and conditions see https://www.qt.io/terms-conditions. For further
-** information use the contact form at https://www.qt.io/contact-us.
-**
-** GNU Free Documentation License Usage
-** 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. Please review the following information to ensure
-** the GNU Free Documentation License version 1.3 requirements
-** will be met: https://www.gnu.org/licenses/fdl-1.3.html.
-**
-****************************************************************************/
-
-/*!
-//! [qt quick application]
-
-    \section1 Creating the Project
-
-    \list 1
-
-        \li Select \uicontrol File > \uicontrol {New File or Project} >
-            \uicontrol {Application (Qt Quick)} >
-            \uicontrol {Qt Quick Application - Swipe}.
-
-        \li Select \uicontrol Choose to open the
-            \uicontrol {Project Location} dialog.
-
-        \li In the \uicontrol Name field, enter a name for the application.
-
-        \li In the \uicontrol {Create in} field, enter the path for the project
-            files.
-
-        \li Select \uicontrol Next (or \uicontrol Continue on \macos) to open
-            the \uicontrol {Define Build System} dialog.
-
-        \li In the \uicontrol {Build system} field, select the build system to
-            use for building and running the project: \l qmake,
-            \l {Setting Up CMake}{CMake}, or \l {Setting Up Qbs}{Qbs}.
-
-        \li Select \uicontrol Next to open the
-            \uicontrol {Define Project Details} dialog.
-
-        \li Select \uicontrol Next to use the default settings and to open
-            the \uicontrol {Translation File} dialog.
-
-        \li Select \uicontrol Next to use the default settings and to open
-            the \uicontrol {Kit Selection} dialog.
-
-        \li Select \l{glossary-buildandrun-kit}{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 \uicontrol
-            Tools > \uicontrol Options > \uicontrol Kits (on Windows and Linux)
-            or in \uicontrol {\QC} > \uicontrol Preferences >
-            \uicontrol Kits (on \macos).
-            For more information, see \l {Adding Kits}.
-
-        \li Select \uicontrol Next to open the \uicontrol {Project Management}
-            dialog.
-
-        \li Review the project settings, and select \uicontrol{Finish}
-            (or \uicontrol Done on \macos) to create the project.
-
-    \endlist
-
-    \QC generates two UI files, \e Page1Form.ui.qml and \e Page2Form.ui.qml,
-    and a QML file, \e main.qml. You can modify \e Page1Form.ui.qml in the
-    \uicontrol {Form Editor} to create the application main view and \e main.qml
-    in the \uicontrol {Text Editor} to add the application logic. For the
-    purposes of this example, you can ignore \e Page2Form.ui.qml.
-
-    For more information about the settings that you skipped, see
-    \l{Creating Qt Quick Applications}.
-
-//! [qt quick application]
-*/