WindowInsets Handling & Keyboard Animations

Now that everything is ready, it’s time to animate the keyboard!

In this episode you’ll use: WindowInsetsAnimation, UpdateLayoutParms. API’s to implement a new feature.

To do this, you’ll use the WindowInsetsAnimationCallback. This API is only available on Android 11 and higher, so you’re going to use the RWCompat files for this. Open the RWCompat11.kt and search for animateKeyboardDisplay:

@RequiresApi(Build.VERSION_CODES.R)
fun animateKeyboardDisplay() {
  val cb = object : WindowInsetsAnimation.Callback(DISPATCH_MODE_STOP) {
    override fun onProgress(insets: WindowInsets, animations: MutableList<WindowInsetsAnimation>): WindowInsets {
      
      posBottom = insets.getInsets(WindowInsetsCompat.Type.ime()).bottom

      val navBar = view.rootWindowInsets?.getInsets(WindowInsetsCompat.Type.navigationBars())!!

      if (posBottom < navBar.bottom) {
        posBottom = navBar.bottom
      }

      container.updateLayoutParams<ViewGroup.MarginLayoutParams> {
        updateMargins(
          top = posTop,
          bottom = posBottom)
      }
 
      return insets
    }
  }
 
  container.setWindowInsetsAnimationCallback(cb)
}

Start by defining the WindowInsetsAnimation.Callback, you’ll use the DISPATCH_MODE_STOP since the animation is done at the parent level and there’s no need to propagate it to other levels of the view hierarchy.

Override and implement the onProgress function. Every time there’s a change on WindowInsetsCompat, onProgress is called and it’s necessary to update the view root margins. This guarantees that the UI updates seamlessly with the animation.

Previously, posBottom was updated to have the initial value of the systemBars bottom margin. This value needs to be recalculated while the keyboard is being opened or closed. If the user opens the keyboard, this sum will increase until the animation finishes. If the user closes the keyboard, the sum will decrease until the final result is the value of the systemBars bottom.

The new value is calculated, update the container margins, so the UI will synchronize with the keyboard animation. Now that everything is defined, compile and run the app and play a bit with these new animations.

Do you see how smoothly the keyboard opens and closes? Perfect! Along with onPrepare, there are other methods that can be overridden in order to implement a specific behavior:

onPrepare - Lets you record any specific configuration before the animation takes place. For instance, you can record the initial coordinates of a view.

onStart - Similar to the previous method, you can use it to save any value that’s going to change later. You can also use it to trigger any other behavior related to this event when the animation starts.

onProgress - This event is triggered multiple times as the keyboard is displayed or dismissed from the screen. It’s called every time the WindowInsetsCompat changes.

onEnd - This event triggers after the animation ends. You can use it to clean up any allocated resources or make any UI view reflect this new state.

That’s it! Let’s compile and run the app and see how smooth the keyboard animation is! Now that the app is open, don’t forget to add the episode name to the list: 05: Animate the Keyboard

See you in the next episode!