Android Fragments with Qt Quick for Android | Qt Quick | Qt 6.12.0
Description: Tutorial on using Qt Quick Views in Android Fragments

- Qt 6.12
- Qt Quick
- Qt Quick for Android
- Android Fragments with Qt Quick for Android
- Qt 6.12.0 Reference Documentation

Qt Quick Android Classes ◦ Qt Quick for Android Studio Projects

# 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, Qt Academy: 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.

Qt Quick Android Classes ◦ Qt Quick for Android Studio Projects