Skip to main content

Using Jetpack Compose Views in Non-Compose Android Apps

The SAP Engagement Cloud SDK views are Jetpack Compose components implemented with Compose Multiplatform. If your Android application uses XML layouts and fragments, you can embed a ComposeView inside your existing view hierarchy.

To embed a ComposeView in your existing view hierarchy, follow these steps:

Step 1 – Check Your Dependencies​

Add the following dependencies and plugin to your build.gradle.kts:

dependencies {
    // Engagement Cloud SDK
    implementation("com.sap.engagement-cloud:engagement-cloud-sdk-android:<latest-version>")

    // Compose BOM (manages all Compose library versions consistently)
    implementation(platform("androidx.compose:compose-bom:<latest-version>"))

    // Debug only
    debugImplementation("androidx.compose.ui:ui-tooling")
}
plugins {
    id("org.jetbrains.kotlin.plugin.compose") version "<kotlin-version>"
}

Step 2 – Add a ComposeView to Your XML Layout​

In your fragment or activity layout file, add an androidx.compose.ui.platform.ComposeView where you want the SAP Engagement Cloud SDK views to appear.

<!-- res/layout/fragment_engagement_cloud_compose_view.xml -->
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.compose.ui.platform.ComposeView
        android:id="@+id/engagement_cloud_compose_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Step 3 – Set the ComposeView Content in Your Fragment or Activity​

Reference the ComposeView from your layout and call setContent to render the SAP Engagement Cloud SDK component.

import androidx.compose.ui.platform.ViewCompositionStrategy

class EngagementCloudViewFragment : Fragment() {

    private var _binding: FragmentComposeViewBinding? = null
    private val binding get() = _binding!!

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        _binding = FragmentComposeViewBinding.inflate(inflater, container, false)
        return binding.root
    }

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)

        binding.engagementCloudComposeView.apply {
            setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed)
            setContent {
                <Engagement-Cloud-Compose-View-Component>
            }
        }
    }

    override fun onDestroyView() {
        super.onDestroyView()
        _binding = null
    }
}