NdefEditor: update UI for better usability on mobile platforms

* Add QScroller to grab touch gesture. This allows to avoid aiming to
  the tiny verticall scroll bar, but use simple swipes instead.
* Handle input method visibility change to ensure that the focused
  widget is visible while the keyboard is displayed.
* Correctly scale the image for the MIME record, so that it does not
  cause the whole layout to shirink beyond the screen margins.
* Update the example docs.

Task-number: QTBUG-94033
Pick-to: 6.2
Change-Id: I7ce3fe1f6c573a3ad24da16c7a11508342a2de9d
Reviewed-by: Alex Blasche <alexander.blasche@qt.io>

11 files changed, 266 insertions, 54 deletions

diff --git a/examples/nfc/ndefeditor/CMakeLists.txt b/examples/nfc/ndefeditor/CMakeLists.txt
index 95b9e0c6..3328cd47 100644
--- a/examples/nfc/ndefeditor/CMakeLists.txt
+++ b/examples/nfc/ndefeditor/CMakeLists.txt
@@ -19,6 +19,7 @@ find_package(Qt6 COMPONENTS Nfc)
 find_package(Qt6 COMPONENTS Widgets)
 
 qt_add_executable(ndefeditor
+    MANUAL_FINALIZATION
     main.cpp
     mainwindow.cpp mainwindow.h mainwindow.ui
     mimeimagerecordeditor.cpp mimeimagerecordeditor.h mimeimagerecordeditor.ui
@@ -36,6 +37,15 @@ target_link_libraries(ndefeditor PUBLIC
     Qt::Widgets
 )
 
+if(ANDROID)
+    set_property(TARGET ndefeditor
+        APPEND PROPERTY QT_ANDROID_PACKAGE_SOURCE_DIR
+        ${CMAKE_CURRENT_SOURCE_DIR}/android
+    )
+endif()
+
+qt_finalize_target(ndefeditor)
+
 install(TARGETS ndefeditor
     RUNTIME DESTINATION "${INSTALL_EXAMPLEDIR}"
     BUNDLE DESTINATION "${INSTALL_EXAMPLEDIR}"
diff --git a/examples/nfc/ndefeditor/android/AndroidManifest.xml b/examples/nfc/ndefeditor/android/AndroidManifest.xml
new file mode 100644
index 00000000..b470f19c
--- /dev/null
+++ b/examples/nfc/ndefeditor/android/AndroidManifest.xml
@@ -0,0 +1,80 @@
+<?xml version="1.0"?>
+<manifest package="org.qtproject.example" xmlns:android="http://schemas.android.com/apk/res/android" android:versionName="-- %%INSERT_VERSION_NAME%% --" android:versionCode="-- %%INSERT_VERSION_CODE%% --" android:installLocation="auto">
+    <!-- The following comment will be replaced upon deployment with default permissions based on the dependencies of the application.
+         Remove the comment if you do not require these default permissions. -->
+    <!-- %%INSERT_PERMISSIONS -->
+
+    <!-- The following comment will be replaced upon deployment with default features based on the dependencies of the application.
+         Remove the comment if you do not require these default features. -->
+    <!-- %%INSERT_FEATURES -->
+
+    <supports-screens android:largeScreens="true" android:normalScreens="true" android:anyDensity="true" android:smallScreens="true"/>
+    <application android:hardwareAccelerated="true" android:name="org.qtproject.qt.android.bindings.QtApplication" android:label="-- %%INSERT_APP_NAME%% --" android:extractNativeLibs="true" android:requestLegacyExternalStorage="true">
+        <activity android:windowSoftInputMode="adjustResize" android:configChanges="orientation|uiMode|screenLayout|screenSize|smallestScreenSize|layoutDirection|locale|fontScale|keyboard|keyboardHidden|navigation|mcc|mnc|density" android:name="org.qtproject.qt.android.bindings.QtActivity" android:label="-- %%INSERT_APP_NAME%% --" android:screenOrientation="unspecified" android:launchMode="singleTop">
+            <intent-filter>
+                <action android:name="android.intent.action.MAIN"/>
+                <category android:name="android.intent.category.LAUNCHER"/>
+            </intent-filter>
+
+            <!-- Application arguments -->
+            <meta-data android:name="android.app.arguments" android:value="-- %%INSERT_APP_ARGUMENTS%% --"/>
+            <!-- Application arguments -->
+
+            <meta-data android:name="android.app.lib_name" android:value="-- %%INSERT_APP_LIB_NAME%% --"/>
+            <meta-data android:name="android.app.qt_sources_resource_id" android:resource="@array/qt_sources"/>
+            <meta-data android:name="android.app.repository" android:value="default"/>
+            <meta-data android:name="android.app.qt_libs_resource_id" android:resource="@array/qt_libs"/>
+            <meta-data android:name="android.app.bundled_libs_resource_id" android:resource="@array/bundled_libs"/>
+            <!-- Deploy Qt libs as part of package -->
+            <meta-data android:name="android.app.bundle_local_qt_libs" android:value="-- %%BUNDLE_LOCAL_QT_LIBS%% --"/>
+
+            <!-- Run with local libs -->
+            <meta-data android:name="android.app.use_local_qt_libs" android:value="-- %%USE_LOCAL_QT_LIBS%% --"/>
+            <meta-data android:name="android.app.libs_prefix" android:value="/data/local/tmp/qt/"/>
+            <meta-data android:name="android.app.load_local_libs_resource_id" android:resource="@array/load_local_libs"/>
+            <meta-data android:name="android.app.load_local_jars" android:value="-- %%INSERT_LOCAL_JARS%% --"/>
+            <meta-data android:name="android.app.static_init_classes" android:value="-- %%INSERT_INIT_CLASSES%% --"/>
+            <!-- Used to specify custom system library path to run with local system libs -->
+            <!-- <meta-data android:name="android.app.system_libs_prefix" android:value="/system/lib/"/> -->
+            <!--  Messages maps -->
+            <meta-data android:value="@string/ministro_not_found_msg" android:name="android.app.ministro_not_found_msg"/>
+            <meta-data android:value="@string/ministro_needed_msg" android:name="android.app.ministro_needed_msg"/>
+            <meta-data android:value="@string/fatal_error_msg" android:name="android.app.fatal_error_msg"/>
+            <meta-data android:value="@string/unsupported_android_version" android:name="android.app.unsupported_android_version"/>
+            <!--  Messages maps -->
+
+            <!-- Splash screen -->
+            <!-- Orientation-specific (portrait/landscape) data is checked first. If not available for current orientation,
+                 then android.app.splash_screen_drawable. For best results, use together with splash_screen_sticky and
+                 use hideSplashScreen() with a fade-out animation from Qt Android Extras to hide the splash screen when you
+                 are done populating your window with content. -->
+            <!-- meta-data android:name="android.app.splash_screen_drawable_portrait" android:resource="@drawable/logo_portrait" / -->
+            <!-- meta-data android:name="android.app.splash_screen_drawable_landscape" android:resource="@drawable/logo_landscape" / -->
+            <!-- meta-data android:name="android.app.splash_screen_drawable" android:resource="@drawable/logo"/ -->
+            <!-- meta-data android:name="android.app.splash_screen_sticky" android:value="true"/ -->
+            <!-- Splash screen -->
+
+            <!-- Background running -->
+            <!-- Warning: changing this value to true may cause unexpected crashes if the
+                          application still try to draw after
+                          "applicationStateChanged(Qt::ApplicationSuspended)"
+                          signal is sent! -->
+            <meta-data android:name="android.app.background_running" android:value="false"/>
+            <!-- Background running -->
+
+            <!-- extract android style -->
+            <!-- available android:values :
+                * default - In most cases this will be the same as "full", but it can also be something else if needed, e.g., for compatibility reasons
+                * full - useful QWidget & Quick Controls 1 apps
+                * minimal - useful for Quick Controls 2 apps, it is much faster than "full"
+                * none - useful for apps that don't use any of the above Qt modules
+                -->
+            <meta-data android:name="android.app.extract_android_style" android:value="default"/>
+            <!-- extract android style -->
+    </activity>
+
+    <!-- For adding service(s) please check: https://wiki.qt.io/AndroidServices -->
+
+    </application>
+
+</manifest>
diff --git a/examples/nfc/ndefeditor/doc/images/ndefeditor.png b/examples/nfc/ndefeditor/doc/images/ndefeditor.png
index d203e474..9ce8ade5 100644
--- a/examples/nfc/ndefeditor/doc/images/ndefeditor.png
+++ b/examples/nfc/ndefeditor/doc/images/ndefeditor.png
diff --git a/examples/nfc/ndefeditor/doc/src/ndefeditor.qdoc b/examples/nfc/ndefeditor/doc/src/ndefeditor.qdoc
index a8ea4761..975ee9be 100644
--- a/examples/nfc/ndefeditor/doc/src/ndefeditor.qdoc
+++ b/examples/nfc/ndefeditor/doc/src/ndefeditor.qdoc
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2017 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of the documentation of the Qt local connectivity modules.
@@ -28,84 +28,81 @@
 /*!
 \example ndefeditor
 \title NDEF Editor Example
-\brief An example about reading and writing NFC Data Exchange Format (NDEF) messages to NFC Forum Tags.
+\brief An example of reading and writing NFC Data Exchange Format (NDEF) messages to NFC Forum Tags.
 
 The NDEF Editor example reads and writes NFC Data Exchange Format
 (NDEF) messages to NFC Forum Tags. NDEF messages can be composed by
 adding records of supported types. Additionally, NDEF messages can be
 loaded/saved from/into a file located in the file system of the
-machine where the application is running.
+device where the application is running.
 
 \image ndefeditor.png
 
 \section1 NFC Tag detection
 
-The MainWindow class is able to detect if a NFC Tag is in the range
-for read/write operations. It can also detect if connectivity has been
-lost. This is achieved by connecting the MainWindow class private
-handlers to the signals QNearFieldManager::targetDetected and
-QNearFieldManager::targetLost.
+The \c MainWindow class is able to detect if an NFC Tag is in the range
+for read/write operations. It can also detect if the connection has been
+lost. This is achieved by connecting the \c MainWindow class private
+handlers to the \l QNearFieldManager::targetDetected and
+\l QNearFieldManager::targetLost signals.
 
 \snippet ndefeditor/mainwindow.cpp QNearFieldManager init
 
-Through the UI a user requests when to start the detection of a NFC
-Tag by calling the method QNearFieldManager::startTargetDetection.
+When \e Read or \e Write button is pressed, the detection of NFC tags is started
+by calling the \l QNearFieldManager::startTargetDetection method.
 
 \snippet ndefeditor/mainwindow.cpp QNearFieldManager start detection
 
-Once the target is detected the MainWindow connects the following
+Once the target is detected, the \c MainWindow connects the following
 signals to its internal private slots:
-QNearFieldTarget::ndefMessageRead, QNearFieldTarget::NdefReadError,
-QNearFieldTarget::requestCompleted,
-QNearFieldTarget::NdefWriteError and QNearFieldTarget::error
+\l QNearFieldTarget::ndefMessageRead, \l QNearFieldTarget::NdefReadError,
+\l QNearFieldTarget::requestCompleted,
+\l QNearFieldTarget::NdefWriteError and \l {QNearFieldTarget::error}.
 
 \snippet ndefeditor/mainwindow.cpp QNearFieldTarget detected
 
-If during the process of reading or writing to a NFC Tag the
-connection is lost, the MainWindow reacts to this event by
-scheduling the target deletion (QObject::deleteLater).
+If during the process of reading or writing to an NFC Tag the
+connection is lost, the \c MainWindow reacts to this event by
+scheduling the target deletion (using \l QObject::deleteLater).
 
 \snippet ndefeditor/mainwindow.cpp QNearFieldTarget lost
 
 \section1 Record creation
 
-The main window of the ndefeditor example manages the composition and
-creation of NFC records. The UI contains a QScrollArea where
-RecordEditors are added dynamically on a user requests basis. The
-following methods of the MainWindow class provide an interface towards
-each of the record editing classes managing the different types of
-records.
+The main window of the NDEF Editor example manages the composition and
+creation of NFC records. The UI contains a \l QScrollArea, which is used to
+dynamically add the record editors. The following methods of the \c MainWindow
+class provide an interface towards each of the record editing classes managing
+the different types of records.
 
 \snippet ndefeditor/mainwindow.h 0
 
 The following sections explain each of the record editing classes.
+
 \section1 Record editing classes
 
 \section2 TextRecordEditor
 
-The TextRecordEditor is a QWidget that can handle editing the values
-of text record that has been requested by the user. For each text
-record, there is a new instance of this class.
+The \c TextRecordEditor is a \l QWidget that allows to edit the contents of the
+NDEF Text record. A new instance of this class is created for each text record.
 
 \snippet ndefeditor/textrecordeditor.h 0
 
 \section2 UriRecordEditor
 
-The UriRecordEditor is a QWidget that can handle editing the values of
-Uri record that has been requested by the user. For each new Uri
-record there is a new instance of this class.
+The \c UriRecordEditor is a \l QWidget that allows to edit the contents of the
+NDEF Uri record. A new instance of this class is created for each uri record.
 
 \snippet ndefeditor/urirecordeditor.h 0
 
 \section2 MimeImageRecordEditor
 
-The UriRecordEditor is a QWidget that can handle editing the values of
-a Mime Image record that has been requested by the user. For each Mime
-Image record there is a new instance of this class.
+The \c MimeImageRecordEditor is a \l QWidget that allows to edit the contents of
+the NDEF MIME record. In this example MIME record can be used to store an icon.
+A new instance of this class is created for each MIME record.
 
 \snippet ndefeditor/mimeimagerecordeditor.h 0
 
-
 \include examples-run.qdocinc
 
 \sa {Qt NFC}
diff --git a/examples/nfc/ndefeditor/mainwindow.cpp b/examples/nfc/ndefeditor/mainwindow.cpp
index cbb223de..87042d4c 100644
--- a/examples/nfc/ndefeditor/mainwindow.cpp
+++ b/examples/nfc/ndefeditor/mainwindow.cpp
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2017 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of the QtNfc module of the Qt Toolkit.
@@ -67,6 +67,9 @@
 #include <QtWidgets/QFrame>
 #include <QtWidgets/QLabel>
 #include <QtWidgets/QFileDialog>
+#include <QtWidgets/QScroller>
+#include <QtWidgets/QApplication>
+#include <QtGui/QScreen>
 
 class EmptyRecordLabel : public QLabel
 {
@@ -102,7 +105,7 @@ private:
     QNdefRecord m_record;
 };
 
-template <typename T>
+template<typename T>
 void addRecord(Ui::MainWindow *ui, const QNdefRecord &record = QNdefRecord())
 {
     QVBoxLayout *vbox = qobject_cast<QVBoxLayout *>(ui->scrollAreaWidgetContents->layout());
@@ -120,10 +123,10 @@ void addRecord(Ui::MainWindow *ui, const QNdefRecord &record = QNdefRecord())
     T *recordEditor = new T;
     recordEditor->setObjectName(QStringLiteral("record-editor"));
 
+    vbox->addWidget(recordEditor);
+
     if (!record.isEmpty())
         recordEditor->setRecord(record);
-
-    vbox->addWidget(recordEditor);
 }
 
 MainWindow::MainWindow(QWidget *parent)
@@ -140,6 +143,19 @@ MainWindow::MainWindow(QWidget *parent)
 
     QVBoxLayout *vbox = new QVBoxLayout;
     ui->scrollAreaWidgetContents->setLayout(vbox);
+#if (defined(Q_OS_ANDROID) && !defined(Q_OS_ANDROID_EMBEDDED)) || defined(Q_OS_IOS)
+    QScroller::grabGesture(ui->scrollArea, QScroller::TouchGesture);
+    ui->scrollArea->setHorizontalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
+    ui->scrollArea->setVerticalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
+#endif
+
+    // Detect keyboard show/hide. We can't directly update the UI to ensure
+    // that the focused widget is active. Instead we wait for a resizeEvent
+    // that happens shortly after the keyboard is shown, and do all the
+    // processing there.
+    QInputMethod *inputMethod = qApp->inputMethod();
+    connect(inputMethod, &QInputMethod::visibleChanged,
+            [this, inputMethod]() { m_keyboardVisible = inputMethod->isVisible(); });
 
     //! [QNearFieldManager init]
     m_manager = new QNearFieldManager(this);
@@ -155,6 +171,20 @@ MainWindow::~MainWindow()
     delete ui;
 }
 
+void MainWindow::resizeEvent(QResizeEvent *e)
+{
+    QMainWindow::resizeEvent(e);
+    if (m_keyboardVisible) {
+        QWidget *areaWidget = ui->scrollAreaWidgetContents;
+        QList<QWidget *> childWidgets = areaWidget->findChildren<QWidget *>();
+        for (const auto widget : childWidgets) {
+            if (widget->hasFocus()) {
+                ui->scrollArea->ensureWidgetVisible(widget);
+            }
+        }
+    }
+}
+
 void MainWindow::addNfcTextRecord()
 {
     addRecord<TextRecordEditor>(ui);
diff --git a/examples/nfc/ndefeditor/mainwindow.h b/examples/nfc/ndefeditor/mainwindow.h
index 2e95bca4..df63b459 100644
--- a/examples/nfc/ndefeditor/mainwindow.h
+++ b/examples/nfc/ndefeditor/mainwindow.h
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2017 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of the QtNfc module of the Qt Toolkit.
@@ -57,6 +57,7 @@
 
 QT_FORWARD_DECLARE_CLASS(QNearFieldManager)
 QT_FORWARD_DECLARE_CLASS(QNdefMessage)
+QT_FORWARD_DECLARE_CLASS(QScreen)
 
 QT_BEGIN_NAMESPACE
 namespace Ui {
@@ -72,6 +73,9 @@ public:
     explicit MainWindow(QWidget *parent = 0);
     ~MainWindow();
 
+protected:
+    void resizeEvent(QResizeEvent *e) override;
+
 private slots:
     //! [0]
     void addNfcTextRecord();
@@ -102,6 +106,8 @@ private:
     };
 
     QNdefMessage ndefMessage() const;
+    void handleScreenChange();
+    void updateWidgetLayout(Qt::ScreenOrientation orientation);
 
 private:
     Ui::MainWindow *ui;
@@ -109,6 +115,8 @@ private:
     QNearFieldManager *m_manager;
     TouchAction m_touchAction;
     QNearFieldTarget::RequestId m_request;
+    bool m_keyboardVisible = false;
+    QScreen *m_screen = nullptr;
 };
 
 #endif // MAINWINDOW_H
diff --git a/examples/nfc/ndefeditor/mainwindow.ui b/examples/nfc/ndefeditor/mainwindow.ui
index adffa331..cb8c2c35 100644
--- a/examples/nfc/ndefeditor/mainwindow.ui
+++ b/examples/nfc/ndefeditor/mainwindow.ui
@@ -6,7 +6,7 @@
    <rect>
     <x>0</x>
     <y>0</y>
-    <width>553</width>
+    <width>559</width>
     <height>397</height>
    </rect>
   </property>
@@ -57,14 +57,14 @@
       <item>
        <widget class="QPushButton" name="touchRetrieve">
         <property name="text">
-         <string>Retrieve</string>
+         <string>Read</string>
         </property>
        </widget>
       </item>
       <item>
        <widget class="QPushButton" name="touchStore">
         <property name="text">
-         <string>Store</string>
+         <string>Write</string>
         </property>
        </widget>
       </item>
@@ -120,8 +120,8 @@
         <rect>
          <x>0</x>
          <y>0</y>
-         <width>553</width>
-         <height>335</height>
+         <width>559</width>
+         <height>327</height>
         </rect>
        </property>
       </widget>
diff --git a/examples/nfc/ndefeditor/mimeimagerecordeditor.cpp b/examples/nfc/ndefeditor/mimeimagerecordeditor.cpp
index 8044e8a6..d14b4340 100644
--- a/examples/nfc/ndefeditor/mimeimagerecordeditor.cpp
+++ b/examples/nfc/ndefeditor/mimeimagerecordeditor.cpp
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2017 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of the QtNfc module of the Qt Toolkit.
@@ -54,6 +54,12 @@
 #include <QtGui/QImageReader>
 #include <QtWidgets/QFileDialog>
 #include <QtCore/QBuffer>
+#include <QScreen>
+#include <QLayout>
+
+#if (defined(Q_OS_ANDROID) && !defined(Q_OS_ANDROID_EMBEDDED)) || defined(Q_OS_IOS)
+#    define MOBILE_PLATFORM
+#endif
 
 static QString imageFormatToMimeType(const QByteArray &format)
 {
@@ -90,6 +96,10 @@ MimeImageRecordEditor::MimeImageRecordEditor(QWidget *parent) :
     ui(new Ui::MimeImageRecordEditor)
 {
     ui->setupUi(this);
+#ifdef MOBILE_PLATFORM
+    connect(screen(), &QScreen::orientationChanged, this,
+            &MimeImageRecordEditor::handleScreenOrientationChange);
+#endif
 }
 
 MimeImageRecordEditor::~MimeImageRecordEditor()
@@ -108,9 +118,10 @@ void MimeImageRecordEditor::setRecord(const QNdefRecord &record)
     QImageReader reader(&buffer);
 
     ui->mimeImageType->setText(imageFormatToMimeType(reader.format()));
-
-    ui->mimeImageImage->setPixmap(QPixmap::fromImage(reader.read()));
     ui->mimeImageFile->clear();
+
+    m_pixmap = QPixmap::fromImage(reader.read());
+    updatePixmap();
 }
 
 QNdefRecord MimeImageRecordEditor::record() const
@@ -118,6 +129,61 @@ QNdefRecord MimeImageRecordEditor::record() const
     return m_record;
 }
 
+void MimeImageRecordEditor::handleScreenOrientationChange(Qt::ScreenOrientation orientation)
+{
+    Q_UNUSED(orientation);
+#ifdef MOBILE_PLATFORM
+    if (m_imageSelected) {
+        ui->mimeImageImage->clear();
+        adjustSize();
+        m_screenRotated = true;
+    }
+#endif
+}
+
+void MimeImageRecordEditor::resizeEvent(QResizeEvent *)
+{
+    if (m_imageSelected) {
+#ifdef MOBILE_PLATFORM
+        if (m_screenRotated) {
+            updatePixmap();
+            m_screenRotated = false;
+        }
+#else
+        updatePixmap();
+#endif
+    }
+}
+
+void MimeImageRecordEditor::updatePixmap()
+{
+    // Calculate the desired width of the image. It's calculated based on the
+    // screen size minus the content margins.
+    const auto parentContentMargins = parentWidget()->layout()->contentsMargins();
+    const auto thisContentMargins = layout()->contentsMargins();
+#ifdef MOBILE_PLATFORM
+    // Because of QTBUG-94459 the screen size might be incorrect, so we check
+    // the orientation to find the actual width
+    const auto w = screen()->availableSize().width();
+    const auto h = screen()->availableSize().height();
+    const auto screenWidth =
+            (screen()->orientation() == Qt::PortraitOrientation) ? qMin(w, h) : qMax(w, h);
+#else
+    const auto screenWidth = width();
+#endif
+    const auto imageWidth = screenWidth - parentContentMargins.right() - parentContentMargins.left()
+            - thisContentMargins.right() - thisContentMargins.left();
+
+    if (!m_pixmap.isNull()) {
+        if (m_pixmap.width() > imageWidth)
+            ui->mimeImageImage->setPixmap(m_pixmap.scaledToWidth(imageWidth));
+        else
+            ui->mimeImageImage->setPixmap(m_pixmap);
+    } else {
+        ui->mimeImageImage->setText("Can't show the image");
+    }
+}
+
 void MimeImageRecordEditor::on_mimeImageOpen_clicked()
 {
     QString mimeDataFile = QFileDialog::getOpenFileName(this, tr("Select Image File"));
@@ -139,10 +205,11 @@ void MimeImageRecordEditor::on_mimeImageOpen_clicked()
     QString mimeType = imageFormatToMimeType(reader.format());
     ui->mimeImageType->setText(mimeType);
 
-    QImage image = reader.read();
-
     ui->mimeImageFile->setText(mimeDataFile);
-    ui->mimeImageImage->setPixmap(QPixmap::fromImage(image));
+    const QImage image = reader.read();
+    m_pixmap = QPixmap::fromImage(image);
+    m_imageSelected = true;
+    updatePixmap();
 
     m_record.setTypeNameFormat(QNdefRecord::Mime);
     m_record.setType(mimeType.toLatin1());
diff --git a/examples/nfc/ndefeditor/mimeimagerecordeditor.h b/examples/nfc/ndefeditor/mimeimagerecordeditor.h
index 44cd084b..eed61407 100644
--- a/examples/nfc/ndefeditor/mimeimagerecordeditor.h
+++ b/examples/nfc/ndefeditor/mimeimagerecordeditor.h
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2017 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of the QtNfc module of the Qt Toolkit.
@@ -48,7 +48,6 @@
 **
 ****************************************************************************/
 
-
 #ifndef MIMEIMAGERECORDEDITOR_H
 #define MIMEIMAGERECORDEDITOR_H
 
@@ -76,9 +75,20 @@ public:
     void setRecord(const QNdefRecord &record);
     QNdefRecord record() const;
 
+public slots:
+    void handleScreenOrientationChange(Qt::ScreenOrientation orientation);
+
+protected:
+    void resizeEvent(QResizeEvent *) override;
+
 private:
+    void updatePixmap();
+
     Ui::MimeImageRecordEditor *ui;
     QNdefRecord m_record;
+    QPixmap m_pixmap;
+    bool m_imageSelected = false;
+    bool m_screenRotated = false;
 
 private slots:
     void on_mimeImageOpen_clicked();
diff --git a/examples/nfc/ndefeditor/mimeimagerecordeditor.ui b/examples/nfc/ndefeditor/mimeimagerecordeditor.ui
index 4cde216f..6403972b 100644
--- a/examples/nfc/ndefeditor/mimeimagerecordeditor.ui
+++ b/examples/nfc/ndefeditor/mimeimagerecordeditor.ui
@@ -7,7 +7,7 @@
     <x>0</x>
     <y>0</y>
     <width>403</width>
-    <height>106</height>
+    <height>126</height>
    </rect>
   </property>
   <property name="windowTitle">
@@ -69,10 +69,13 @@
      </item>
     </layout>
    </item>
-   <item row="3" column="1">
+   <item row="3" column="0" colspan="2">
     <widget class="QLabel" name="mimeImageImage">
      <property name="text">
-      <string>TextLabel</string>
+      <string>Select an image</string>
+     </property>
+     <property name="alignment">
+      <set>Qt::AlignCenter</set>
      </property>
     </widget>
    </item>
diff --git a/examples/nfc/ndefeditor/ndefeditor.pro b/examples/nfc/ndefeditor/ndefeditor.pro
index 4b81c17c..c653214f 100644
--- a/examples/nfc/ndefeditor/ndefeditor.pro
+++ b/examples/nfc/ndefeditor/ndefeditor.pro
@@ -23,5 +23,12 @@ FORMS += \
     urirecordeditor.ui \
     mimeimagerecordeditor.ui
 
+android {
+    ANDROID_PACKAGE_SOURCE_DIR = $$PWD/android
+
+    DISTFILES += \
+        android/AndroidManifest.xml
+}
+
 target.path = $$[QT_INSTALL_EXAMPLES]/nfc/ndefeditor
 INSTALLS += target