Did anyone use Ime Animation before the Accompanist Insets library was removed? I just found out tha...

# compose

[Nthily]

Did anyone use Ime Animation before the Accompanist Insets library was removed? I just found out that ProvideWindowInset API has been removed in androidx.compose.foundation 😭, Is there any other way to achieve the same effect? 👀

[Ben Trengrove [G]]

It's not saying the API was removed, it's saying when migrating to remove it. You don't need it anymore when using the foundation version

[Ben Trengrove [G]]

You just need this modifier, there is also a sample there

https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).imeNestedScroll()

[Nthily]

i've tried this api, but this is not the same as what I want, I just need the LazyList to be able to animate with the IME when it is displayed, but imeNestedScroll can't do that, it detects if the LazyColumn slides to the bottom and automatically pulls up the IME.

[Ben Trengrove [G]]

You just want Modifier.imePadding then I think

[Ben Trengrove [G]]

https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).imePadding()

[Nthily]

imePadding can only animate things like TextFIeld with IME, but cannot animate with the content in LazyList

for example, this is: https://kotlinlang.slack.com/archives/CJLTWPH7S/p1714444753429609

[Nthily]

https://kotlinlang.slack.com/files/U01SVFPV54G/F0713JYAXAA/test.mp4

this is what i want, but after I implemented the effect myself, I realized that there were some side cases I couldn't solve 😅😭

test.mp4

[Ben Trengrove [G]]

Wouldn't you just be able to do something like?

Column {
   LazyColumn()
   InputField(Modifier.imePadding())
}

[Nthily]

i've test it with this way, it couldn't. it will be as

https://kotlinlang.slack.com/files/U01SVFPV54G/F071X67RDJL/test.mp4

test.mp4

[Ben Trengrove [G]]

That input definitely isn't in the same column as the lazycolumn, because it's appearing overtop

[Ben Trengrove [G]]

JetChat does exactly what you are asking
https://github.com/android/compose-samples/blob/main/Jetchat/app/src/main/java/com/example/compose/jetchat/conversation/Conversation.kt#L150

[Ben Trengrove [G]]

Screen_recording_20240507_175043.mp4

Screen_recording_20240507_175043.mp4

[Nthily]

@Composable
fun test() {
  Column(Modifier.fillMaxSize()) {
    LazyColumn(
      modifier = Modifier.weight(1f)
    ) {
      items(120) {
        Text(
          text = "index $it",
          modifier = Modifier.fillMaxWidth().background(Color.Gray).padding(12.dp)
        )
      }
    }
    BasicTextField(
      state = rememberTextFieldState(),
      decorator = {
        Box(
          modifier = Modifier
            .height(56.dp)
            .fillMaxWidth()
            .background(Color.Cyan)
        ) {
          it()
        }
      },
      modifier = Modifier
        .navigationBarsPadding()
        .imePadding()
    )
  }
}

I have set edgeToEdge() and android:windowSoftInputMode="adjustResize"
compose = 1.7.0-alpha08

Export-1715069657845.mp4

[Nthily]

ok i found the source of problem, when i set "reverseLayout = true" for lazycolumn, it will works fine

[Nthily]

@Ben Trengrove [G] @shikasd So the IME animation only works well when LazyColumn is set with reverseLayout = true, is this the expected behavior? 👀💦

Export-1715073940040.mp4

[shikasd]

It should work the same way in both cases, please file a bug if it isn't working as expected:)

[Nthily]

https://issuetracker.google.com/issues/339074811

[Karthick]

i feel you need to put the imePadding modifier to the parent column which having lazycolumn and textfield...