Embed a Custom Qt View in Native Android and iOS Applications with Felgo and Qt

The flexibility to integrate Qt and QML with any platform or system is a powerful advantage if you want to move towards cross-platform development. For example, you can extend your Android or iOS applications with a shared implementation for certain new features, or transition to cross-platform by replacing your native code step-by-step.

With Native App Integration for Android and iOS, Felgo makes it easy to start using Qt in existing mobile applications that you created with Android Studio or Xcode. The Felgo 3.9.2 release of Native App Integration now provides more flexibility on Android to use a custom app Activity and to run Qt in a light-weight Android View instead of a Fragment. It also includes all the latest features and components of Qt 5.15.2 and Felgo 3.9.2.

Use a Qt Quick View in your Android Studio or Xcode Project
How to Add Qt to Your Native Android or iOS App
Flexible View Composition with Native App Integration for Android
Online Training: Become an Expert for Qt on Android & iOS

Use a Qt Quick View in your Android Studio or Xcode Project

We recently worked with a customer on migrating an Android embedded project to Qt. Refactoring a project to a new solution takes a lot of effort and usually requires a separate development of the new application version. You have to maintain two projects at the same time until a minimum feature set is reached and the old application can be fully replaced. With Native App Integration in our toolbox it was possible to add QML views into the application without losing existing functionality. This simplified the whole development process and was a huge time-saver!

Instead of choosing either pure native development or only developing cross-platform, Native App Integration opens the way to mix Qt views into your native apps. You can add cross-platform features without the need to replace the whole application or change existing code. You have the freedom to choose the best solution for each feature without being restricted by the initial technology choice of your project. Native App Integration allows to:

Run Qt Quick content in individual screens of your native Android or iOS app. Implement your user interface with the power of QML while still using the native look-and-feel and navigation concepts of your platform.
Embed QML UI as sub-views inside other screens. You can leverage the simplicity of Qt Quick for smaller parts of your application whenever you need it.
Load a complete Qt & Felgo-powered app from the platform's IDE. You can skip installing Qt and the Qt Creator IDE and directly implement your Qt application using Android Studio or Xcode. Native App Integration is added as a native framework that you integrate with your Android or iOS app as a Gradle or Cocoapods dependency.

To try it yourself, have a look at the example projects for Android Studio and Xcode on GitHub:

nai-cube-chart

How to Add Qt to Your Native Android or iOS App

Native App Integration was released with Felgo 3.7.0 and has seen a lot of demand from developers ever since. If you want to learn what makes the feature so powerful and how to use it, see the release post here: Native App Integration: How to Add a Custom Qt View in Xcode or Android Studio.

The post contains details on how it works, shows different example use-cases, and includes a step-by-step guide for integration on both Android and iOS. To summarize, these are the main steps that are required:

Add the Native App Integration library as a dependency to your project (via Gradle or Cocoapods)
Initialize the Qt/Felgo runtime in your Android Activity or iOS AppDelegate
Include your QML source code with the app’s project resources
Add a FelgoAndroidView or FelgoIOSView and configure the QML file you want to load and run
Enjoy the power of Qt & Felgo in your native app

The latest update brings support for Qt 5.15.2 and Felgo 3.9.2, but the technology can be used with any other Qt version as well. If you require a certain Qt version or have special requirements that your mobile application needs to solve, do not hesitate to contact us. The Felgo professional services team is happy to give advice and support you with your project.

Flexible View Composition with Native App Integration for Android

In addition to all the latest features of Qt 5.15.2 and Felgo 3.9.2, the new update also includes major improvements for adding Qt to native Android applications.

Instead of integrating the Qt runtime with the FelgoAndroidActivity you can now use any other Activity base type, e.g. AppCompatActivity. To do so, forward your activity lifecycle methods to the FelgoAndroid type to perform the required initialization this way.

You are also no longer limited to the FelgoAndroidFragment for running your QML code. The new FelgoAndroidView allows you to add light-weight Qt Quick Android Views to your layouts as well. This means you can e.g. present a GridLayout in your Android application that includes a QML sub-view. Add the FelgoAndroidView to the layout, specify the QML file to load, and you are ready to go:

<com.felgo.ui.FelgoAndroidView
  android:id="@+id/felgo_view"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  app:qml_source="qml/Main.qml" />

This is a huge benefit in how you can arrange and compose your views on Android. You can mix Qt views into your existing Android layouts without restrictions or the need to restructure your existing user interface code.

With the FelgoIOSView, the same flexibility in view composition is available for iOS projects as well. See the native app integration documentation to learn more about all the available types and how to use them.

Online Training: Become an Expert for Qt on Android & iOS

Felgo provides many more useful tools and services for a seamless mobile app development experience with Qt. Use Native Code Components to work with Android and iOS platform APIs from QML. Integrate third-party frameworks for features like push notifications, analytics or database backends with Felgo Plugins. Use the Felgo SDK components to create multi-resolution user interfaces and adaptive UI, and rely on tools like QML Hot Reload and Felgo Cloud Builds to save hours of time when developing, testing and publishing your application.

To share our experience and all the best practices we learned from our customers and projects, we’ve prepared a full-day online training course solely dedicated to Qt development on Android and iOS. This is your chance to learn from the experts at Felgo. Register for the upcoming Qt on Android & iOS training on April 7, 9 AM EST and take your mobile app development to the next level.

QtTrainingMobile_KeyVisual