WindowInsets Handling & Keyboard Animations

In this episode you’ll learn how to use the: System UI Controller, LazyColumn, Modifiers, ProvideWindowInsets, API’s.

Lists in Compose can be vertical through the use of LazyColumn, like this one. Or you can use instead LazyRow to create a horizontal one. Their attributes can be manipulated through the use of Modifiers that allow to define parameters like: width, height, background color, etc.

In this episode you’ll see how to adjust the system windows using Jetpack Compose.

To adjust the System Windows with Compose, you’ll use CompositionLocalProvider.

You’ll need the accompanist system ui controller library that’s already added to the app build.gradle file:

implementation("com.google.accompanist:accompanist-systemuicontroller:0.11.1")

Go over Chat.kt file and see the Chat function. Here, is where the screen components are being added:

LazyColumn - Contains all the notes that are going to be added

TextField - Corresponds to the input field on which the user can add new notes.

To restrain the view into its boundaries, you’ll need to use padding. Starting with the status bar, let’s move the list down. The LazyColumn as an argument called contentPadding. Add the status bar padding to pull it down:

contentPadding = rememberInsetsPaddingValues(
  LocalWindowInsets.current.statusBars,
  applyBottom = false,
),

Now to push the input field to be above the navigation bar, it’s necessary to update the Row composable that contains the TextField. On the Modifier attribute, just call:

.navigationBarsWithImePadding()

To automatically readjust the Row’s content. Finally, open MainScreen.kt file and update the TopAppBar Modifier to readjust it to be under the status bar. For that, add to the Modifier:

modifier = Modifier
             .statusBarsPadding()
             .navigationBarsPadding(bottom = false),

One last change, open MainFragment.kt file and inside RWTheme, which corresponds to where the activity theme is being set, add:

ProvideWindowInsets(windowInsetsAnimationsEnabled = true) {

  MainScreen()
}

That’s it! Yes, it’s really simple to adjust the app to the system windows using Jetpack Compose. 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: 08: Adjust the System Windows

See you in the next episode!