WindowInsets Handling & Keyboard Animations

Welcome! Until Android 11, keyboards and Androids seemed to go in opposite directions. There was no API you could query to learn if the keyboard was open or to know its size. When the keyboard popped up, the screen and views would automatically rearrange themselves without a smooth transition.

Android 11 introduces a new set of features focused on window insets and keyboard animations.

In this course, you’ll learn: Window Insets - what are WindowInsets and how they correlate with the keyboard? Keyboard Properties and Animations - read the keyboard height and visibility. Easily open and close it. Interacting with the Keyboard - how scrolling through a list can be used to open or close the keyboard. Keyboard in Jetpack Compose - all of the above features working with the new UI library for Android: Jetpack Compose.

These features are possible through the use of WindowInsets. They correspond to different portions of the screen that intersect with the system UI, such as the status and navigations bars, and the lateral navigation sections on the new system gestures.

To avoid having user actions defined on areas that are already used by the system for navigation, which would make them unusable, you can use a set of insets to locate these areas and control them according to your application’s specifications. Here’s the list of available insets:

System window insets - which correspond to the status and navigation bars.

Gesture insets - that allows the user to navigate backward.

Tappable element insets - defines the minimum insets that should be applied to a tappable view in order to be clickable. In this example the area surrounding the Floating Action Button, shouldn’t overlay the navigation bar, otherwise, it will be difficult to trigger any user action.

Stable insets - corresponds to areas where the system UI might be displayed. Typically they’re used on apps that are fullscreen that don’t display any of the above insets when on this mode.

In this video course, you’ll use the first one: system window insets.

Brain Dump is the application that you’re going to use during this course. It’s note taking app that allows you to write down everything that’s on your mind, so you can later revisit, and of course, don’t forget it.

To follow along, download the course materials and prepare that Starter project for each episode. If you don’t have Android Studio installed just google it and install the latest stable version. You should see a website similar to this slide. Follow all of the instructions. Ready? Let’s start by opening the Starter project with Android Studio.

Looking at the project structure, there are a couple of files and directories already created.

model This is the data object used to represent a note. A note is made up of its content and the date it was created.

ui In this folder, you’ll find the activity, fragments, and adapters you’ll use to let your users view and interact with the app’s data.

compat Keyboard animations are only available for devices running Android 11. Therefore, you need different implementations for specific calls.

RWCompat.kt Is a factory responsible for loading RWCompat10.kt or RWCompat11.kt, depending on the device’s Android version.

setupUiWindoInsets, defines the correct WindowInsets required to animate the keyboard. setupKeyboardAnimation, creates a smooth animation when the keyboard is open and closed. createLinearLayoutManager, allows to use the RecyclerView scroll to open or close the keyboard depending if the swipe movement is up or down.

We will see these methods in further detail on the next episodes.

Utils.kt This file contains a set of utility methods you’ll use throughout the project. Namely, you’ll use these to save and load your notes into and from shared preferences and format a note timestamp to an easily readable date.

Since these features are available starting on Android 11, you need to have a device or an emulator with this version at least. Compile and run the app. The screen is empty, so let’s start by adding an entry. It can be to buy eggs, a reminder to cut the grass, or in this case, let’s follow this course structure and add the episode name: 01: Introduction to Keyboard Properties in Android

See you in the next episode!