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.

Before proceeding, it's worthwhile to explore the Qt Academy course, Embedding Qt Quick 3D Content in an Android App.

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. Assign your QtQuickView, giving it the Activity instance using requireActivity()

    homeQtQuickView = QtQuickView(requireActivity())
    homeQmlContent = Screen01()
   

6. Initialize the layout parameters, if you create views programmatically, add views dynamically or change them on runtime. Otherwise you may skip this section and you do not need to use params with addView().

    val params = FrameLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,
                                          ViewGroup.LayoutParams.MATCH_PARENT)
   

7. Add your view to the layout, either with:
   1. Using View binding inside onCreateView(): First check that view binding is enabled by adding buildFeature section into build.gradle.kts android section of your app:

       buildFeatures {
           viewBinding = true
       }
      

      Then add the following in onCreateView():

       binding = FragmentHomeBinding.inflate( inflater, container, false)
       homeQtQuickView.loadContent(homeQmlContent)
      
       val root: View = binding.root
       binding.homeQmlFrame.addView(homeQtQuickView, params)
       ...
       return root
      

   2. Using findViewById() inside onCreate():

       val qtFrame = findViewById(R.id.qtFrame)
       qmlFrame.addView(m_quickView, params)
       m_quickView.loadContent(homeQmlContent)
      

      See usage from other Qt Quick for Android examples.

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