Friday, 19 March 2021

Animations and Effects broken on Keyboard written in Jetpack Compose after upgrading to beta-01

I ran into a problem after updating my keyboard written completely in Jetpack Compose from Compose version alpha-11 to beta-01.

Before the upgrade, the UI worked just fine as you would expect. Ripples were displayed fine. After the upgrade animations and effects (like button pressed) don't play correctly (Ripple effects seem to get stuck). Take a look:

1

This is the desired behavior and how it looked like before the version upgrade:

2

Note: The same code outside of ComposeKeyboardView worked perfectly fine. Also, the same code worked perfectly fine before Jetpack Compose alpha-11 and beta-01. I'm not sure if it is a bug or if I can fix the problem myself. I appreciate any help or hints to restore the desired behavior.

You can reproduce the problem using the following code:

Keyboard.kt

@Composable
fun Keyboard() {
    Column(
        Modifier
            .fillMaxWidth()
            .height(200.dp)
            .background(Color.Gray),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(color = Color.Black, text = "This should resemble a keyboard")
        Button(modifier = Modifier.width(250.dp),onClick = {  }) {
            Text(text = "A Button")
        }
    }
}

ComposeKeyboardView.kt

class ComposeKeyboardView constructor(
    context: Context,

    ) : AbstractComposeView(context) {

    @Composable
    override fun Content() {
        Keyboard()
       
    }
}

IMEService.kt


class IMEService : InputMethodService(), LifecycleOwner, ViewModelStoreOwner,
    SavedStateRegistryOwner {

    override fun onCreateInputView(): View {
        val view = ComposeKeyboardView(this)
        window!!.window!!.decorView.let { decorView ->
            ViewTreeLifecycleOwner.set(decorView, this)
            ViewTreeViewModelStoreOwner.set(decorView, this)
            ViewTreeSavedStateRegistryOwner.set(decorView, this)
        }
        return view
    }


    //Lifecycle Methods

    private var lifecycleRegistry: LifecycleRegistry = LifecycleRegistry(this)

    override fun getLifecycle(): Lifecycle {
        return lifecycleRegistry
    }


    private fun handleLifecycleEvent(event: Lifecycle.Event) =
        lifecycleRegistry.handleLifecycleEvent(event)

    override fun onCreate() {
        super.onCreate()
        savedStateRegistry.performRestore(null)
        handleLifecycleEvent(Lifecycle.Event.ON_CREATE)
    }



    override fun onDestroy() {
        super.onDestroy()
        handleLifecycleEvent(Lifecycle.Event.ON_DESTROY)
    }


    //ViewModelStore Methods
    private val store = ViewModelStore()

    override fun getViewModelStore(): ViewModelStore = store

    //SaveStateRegestry Methods

    private val savedStateRegistry = SavedStateRegistryController.create(this)

    override fun getSavedStateRegistry(): SavedStateRegistry = savedStateRegistry.savedStateRegistry

Don't forget to add the IMEService to your AndroidManifest.xml:

<application>
[...]
<service
            android:name=".IMEService"
            android:label="Example Comopose IME"

            android:permission="android.permission.BIND_INPUT_METHOD">
            <intent-filter>
                <action android:name="android.view.InputMethod" />
            </intent-filter>

            <meta-data
                android:name="android.view.im"
                android:resource="@xml/method" />
        </service>
</application>

app\build.gradle

[...]
dependencies {
    def compose_version = "1.0.0-beta01"  
    implementation "androidx.compose.ui:ui:$compose_version"
    implementation "androidx.compose.material:material:$compose_version"
    implementation "androidx.compose.ui:ui-tooling:$compose_version"
    implementation "androidx.activity:activity-compose:1.3.0-alpha03"
    implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.3.0'
}

Edit: Same problem in compose-beta02

Or you can find all code here and clone it directly



from Animations and Effects broken on Keyboard written in Jetpack Compose after upgrading to beta-01

No comments:

Post a Comment