How to use UnityPlayer in Android Compose

In my company, I have to use 3D avatar animation using UnityPlayer derived from Unity module.

The base code I will use is consist of Android Compose.

So, I want to use UnityPlayer with Android Compose.

However, There were no information about using UnityPlayer with Compose.

This is why I write this post.

☝I introduce this post on the condition that you add UnityModule.

If you not, read this post first!!

https://antwhale94.blogspot.com/2024/03/AddingUnityModuleToAndroid.html

1. Add dependency

android {
    ...
    buildFeatures {
        viewBinding true
    }
    ...
}

dependencies {

    implementation 'androidx.compose.ui:ui-viewbinding:1.6.0'

}

You should add viewBinding dependency.

And you should add "androidx.compose.ui:ui-viewbinding" to take xml into Compose.

2. MainActivity.kt

class MainActivity : ComponentActivity() {
    val TAG = MainActivity::class.java.simpleName
    lateinit var mUnityPlayer: UnityPlayer

    @ExperimentalMaterial3Api
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        mUnityPlayer = UnityPlayer(this)
        val glesMode = mUnityPlayer.getSettings().getInt("gles_mode", 1)
        val trueColor8888 = false
        mUnityPlayer.init(glesMode, trueColor8888)

        setContent {
            Surface(
                modifier = Modifier
                    .fillMaxSize()
            ) {
                MLCChatTheme {
                    NavView()
                }
            }
        }


    }

    override fun onDestroy() {
        Log.d(TAG, "onDestroy: ")
        super.onDestroy()

        mUnityPlayer.quit()
    }

    override fun onPause() {
        Log.d(TAG, "onPause: ")
        super.onPause()
        mUnityPlayer.pause()
    }

    override fun onResume() {
        Log.d(TAG, "onResume: ")
        super.onResume()
        mUnityPlayer.resume()
    }

    override fun onLowMemory() {
        Log.d(TAG, "onLowMemory: ")
        super.onLowMemory()
        mUnityPlayer.lowMemory()
    }

    override fun onTrimMemory(level: Int) {
        Log.d(TAG, "onTrimMemory: ")
        super.onTrimMemory(level)
        if(level == ComponentCallbacks2.TRIM_MEMORY_RUNNING_CRITICAL)
            mUnityPlayer.lowMemory()
    }

    override fun onConfigurationChanged(newConfig: Configuration) {
        Log.d(TAG, "onConfigurationChanged: ")
        super.onConfigurationChanged(newConfig)
        mUnityPlayer.configurationChanged(newConfig)
    }

    override fun onWindowFocusChanged(hasFocus: Boolean) {
        Log.d(TAG, "onWindowFocusChanged: $hasFocus")
        super.onWindowFocusChanged(hasFocus)
        mUnityPlayer.windowFocusChanged(hasFocus)
    }

}

fun Context.getActivity(): ComponentActivity? = when (this) {
    is ComponentActivity -> this
    is ContextWrapper -> baseContext.getActivity()
    else -> null
}

In my experience, The UnityPlayer derived from activity only can play animation.

I don't know why, so I make UnityPlayer object in MainActivity using MainActivity context.

The lowest function getActivity is used to get MainActivity from Composable function.

3. xml layout to put UnityPlayer

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/frameLayout"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

</FrameLayout>

This layout file's name is "avatar_view_layout.xml"

Obviously, you can change this file name if you want.

4. Composable function to show UnityPlayer

@Composable
fun AvatarView() {
    val TAG = "AvatarView"
    val localContext = LocalContext.current

    Log.d(TAG, "AvatarView composition")

    val unityPlayer = (localContext.getActivity() as MainActivity).mUnityPlayer    //1
    AndroidViewBinding(AvatarViewLayoutBinding::inflate) {     //2
        if(unityPlayer.parent == null) {
            Log.d(TAG, "AvatarView added")
            frameLayout.addView(unityPlayer.view)        //3
            unityPlayer.resume()
        }
    }

    DisposableEffect(key1 = localContext) {
        onDispose {        //4
            Log.d(TAG, "remove AvatarView")
            (unityPlayer.parent as FrameLayout).removeView(unityPlayer.view)

            unityPlayer.pause()

        }
    }
}

1 => Get UnityPlayer object using local context

2 => AndroidViewBinding to use xml in Compose

3 => Add UnityPlayer to FrameLayout and resume UnityPlayer

4 => DisposableEffect to notice when AvatarView composable leave.

You should remove UnityPlayer from framelayout and pause it to restart when recomposing.

I don't know this is good way to use UnityPlayer with Compose, but This is only way I got this.

Antwhale Development