WindowInsets Handling & Keyboard Animations
Notes: 09. Animate the Keyboard & Surrounding Views
Congratulations! You learned how to create a seamless animation when launching the keyboard.
On the same subject, you can learn more about animations on this video course.
Are you looking to know more about window features that you could use on your app? See Resizable Apps & Multi Window Support or how to implement Picture-In-Picture mode in your app.
You’re app is coming great so far! In this last episode you’ll see how easy it is to implement in Compose the same behavior done in episode 06: Scrolling up on your list of tasks should open the keyboard, and scrolling down should close it. Let’s see how to do so!
In this episode you’ll learn how to use the NestedScrollContainer and the ImeNestedScrollConnection API’s to implement a new feature.
Scrolling up the list opens the keyboard and scrolling down, closes it.
Start off by scrolling up and down on the app. Nothing happens right? Now go over Chat.kt and look for the list implementation. Lists in Compose are written using LazyColumn or LazyRow, depending on if you want to build a vertical, or horizontal one.
Look for the first one. Modifiers allow defining a set of properties to enhance a composable. You can modify its layout, behavior and appearance. Here, you’re already defining the size, weight and padding.
And it’s also possible to define how the user can interact with them: clicking, scrolling, dragging, or even zooming. In this case, you’ll focus on scrolling, namely nested scrolling. This corresponds to the Modifier argument nestedScroll.
Nested scrolling allows for multiple composables to respond to a single scroll gesture. In this example, scrolling through the items list must open or close the keyboard, depending on if the movement is done upward or downward. Define the nested scroll behaviour by adding to the Modifier:
.nestedScroll(connection = rememberImeNestedScrollConnection()),
Opening the NestedScrollModifier function you see that nestedScroll can receive two arguments: NestedScrollConnection receives nested scroll events. NestedScrollDispatcher notifies that the user is scrolling the screen. In this case, you’re interested in the first one: NestedScrollConnection
You’ll send the rememberImeNestedScrollConnection that already receives and processes the nested scroll events over the IME (keyboard). This ImeNestedScrollConnection is responsible to handle the keyboard.
It’s important to mention that rememberImeNestedScrollConnection is available through the accompanist-insets library that you’ve added before.
implementation("dev.chrisbanes.accompanist:accompanist-insets:0.6.2")
Briefly, writing this one line of code and the system handles your views interactions automatically. You just need to define which view is listening for the scroll events: LazyColumn and which view is going to handle them: IME.
That’s it! Yes, it’s really simple to implement keyboard animations using Compose. Build & run the app, and see your keyboard opening and closing while you’re scrolling through the list. I hope you’ve learned a lot during this course and I can’t wait for you to apply these features to your apps! Good luck!