WindowInsets Handling & Keyboard Animations

In the past episodes, you’ve seen how to read the keyboard properties and animate it as well as the surrounding views. Now you’ll see the same functionalities but in Jetpack Compose. Compose is the new Android toolkit for building native UI. You no longer use XML and findViewById calls to access a view.

In order to open this project, you’ll need to install Android Studio Arctic Fox. For that just google Android Studio Beta and you should be redirected to a screen similar to this one.

In this episode you’ll learn: Introduction to Jetpack Compose. How to use the LocalSoftwareKeyboardController. TextField

This is the application that you’re going to build. It’s the one that you’re already familiar with, but this time built using Jetpack Compose :]. Start by opening the starter project that contains the initial version of the project presented in lesson 1, but this time built using Compose.

Comparing both versions, you can see that a couple of files and directories were removed since they’re no longer needed. Another advantage of using Jetpack Compose is that you no longer need to have the RWCompat classes since these features are available on a wider range of Android releases.

After the project has finished synchronizing let’s look at all the files 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.

theme - Previously the colors, sizes values were defined under the XML resources files. In Compose they’re defined as constants. This package contains all the references required to design Brain Dump.

Chat.kt - Contains all the Composable functions required to build Brain Dump.

MainScreen.kt - Creates the screen skeleton by defining the TopBar and the content of the screen. In this case, it will be the one defined on Chat.kt file.

MainFragment.kt - Defines the application theme and sets the MainScreen.kt file as its content.

Utils.kt - You’re already familiar with this file: it contains a set of utility methods you’ll use throughout the project.

Moving to the resources folders, you can see there are no XML layouts here, everything is done through code, namely using Composable functions.

Android’s new solution to build native UI. No longer necessary to create XML resource files for your views. Instead, you’ll write Composable functions.

Lets see a simple example. Here, you’re adding a TextView with the text “Welcome to XML!”, the text color is white and it’s inside a LinearLayout.

To achieve the same result in Jetpack Compose, you need to add a Column (for vertical stacking) or a Row (for horizontal stacking) and call the Text function with the text that you want to show and define it’s color, in this case, white.

You can learn more about Jetpack Compose, at: https://www.raywenderlich.com/17332237-jetpack-compose.

In this episode you’ll see how to open and close the keyboard and check it’s visibility.

Let’s implement the same feature done on episode 02: automatically open the keyboard when the app is launched. For that, open Chat.kt file. Start by updating the active field to get the keyboard visibility:

val keyboardVisible = LocalWindowInsets.current.ime.isVisible
val active = remember { mutableStateOf(keyboardVisible) }

The component used for handling text in Compose is TextField. Before defining it, add:

val focusRequester = FocusRequester()

And set it on the TextField.Modifier:

.focusRequester(focusRequester)

Finally call:

DisposableEffect(Unit) {
  focusRequester.requestFocus()
  onDispose { }
}

To open the keyboard by default. To dismiss the keyboard after adding text, you can just call the keyboard controller inside Row

val keyboardController = LocalSoftwareKeyboardController.current

keyboardController?.hide()

Note: that before you’ve called requestFocus instead of keyboardController?.show because there’s no guarantee that the second method will open the keyboard or if the system will just discard it.

That’s it! Yes, it’s really simple to read the keyboard visibility. Let’s compile and run the app to try out this feature. Now that the app is open, don’t forget to add the episode name to the list: 07: Read the Keyboard Visibility.

See you in the next episode!