Can I wrap a JetpackCompose in Android's Custom View?

Issue

In Android UI, we can create a custom view by overloading View as shown below.

class CustomView @JvmOverloads constructor(
        context: Context,
        attrs: AttributeSet? = null,
        defStyleAttr: Int = 0)
    : View(context, attrs, defStyleAttr) {


    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
        // Perform the needing drawing
        if (isAttachedToWindow) invalidate()
    }


    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec)

        val desiredWidth = suggestedMinimumWidth + paddingLeft + paddingRight
        val desiredHeight = suggestedMinimumHeight + paddingTop + paddingBottom

        setMeasuredDimension(View.resolveSize(desiredWidth, widthMeasureSpec),
                View.resolveSize(desiredHeight, heightMeasureSpec))
    }
}

Can we wrap JetpackCompose in this CustomView, so that the underlying Drawing it using JetpackCompose instead?

I check https://developer.android.com/jetpack/compose/interop/interop-apis, don't seems to have it stated.

Solution

To get it to work, we can have

class CustomComposeView @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null,
    defStyleAttr: Int = 0
) : AbstractComposeView(context, attrs, defStyleAttr) {

    @Composable
    override fun Content() {
        // JetpacCompose code here
    }
}

In the XML, we can have something like this

<com.package.CustomComposeView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:minHeight="700dp" />

Answered By - Elye