Android Fragments with Qt Quick for Android

You can have a QtQuickView in an Android UI layout by using a ViewGroup-based object. Here we'll use a FrameLayout.

If you're not familiar with the QtQuickView API, read its documentation before continuing with this tutorial.

To start, create a new project in Android Studio using the Bottom Navigation Views Activity template.

1. Locate the Fragment or Activity under which you want your QtQuickView to be visible. Here we use HomeFragment and fragment_home.xml.
2. In fragment_home.xml create a FrameLayout and set its id as shown below.

   <FrameLayout
   android:id="@+id/homeQmlFrame"
   android:layout_width="0dp"
   android:layout_height="0dp"
   app:layout_constraintTop_toTopOf="parent"
   app:layout_constraintStart_toStartOf="parent"
   app:layout_constraintEnd_toEndOf="parent"
   app:layout_constraintHeight_percent="0.8"/>

   Note this id, as it needed to be referred to in HomeFragment when binding the layout.

3. Inside HomeFragment.kt, add an import statement for FrameLayout:

   import android.widget.FrameLayout

4. Add your imports for your QtQuickView and Screen01 QML type and declare them inside the class:

   import org.qtproject.qt.android.QtQuickView
   import org.qtproject.example.RoboApp.RoboContent.Screen01
   
   class HomeFragment : Fragment() {
   
   private var binding: FragmentHomeBinding? = null
   private lateinit var homeQmlContent: Screen01
   private lateinit var homeQtQuickView: QtQuickView

5. Inside the overloaded onCreateView() function:
   1. Assign your QtQuickView, giving it the Activity context using this.Activity

      homeQtQuickView = QtQuickView(this.activity)
      homeQmlContent = Screen01()

   2. Initialize the layout parameters with FrameLayout.LayoutParams

      val params = FrameLayout.LayoutParams(
         ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT)
      
      binding = FragmentHomeBinding.inflate(inflater, container, false)
      val root: View = binding.root
      \li Add it to the layout:
      \code
      binding.homeQmlFrame.addView(homeQtQuickView, params)

   3. Load your QML content:

      homeQtQuickView.loadContent(homeQmlContent)
      return root

Your Qt Quick content will now appear in your home fragment.