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.