Status Update
Comments
ja...@gmail.com <ja...@gmail.com> #2
The request is DiffUtil implementation along with "items" and "indexedItems" functions to support DiffUtil and animations when adding/removing items. the same as the ListAdapter with DiffUtil.
mi...@gmail.com <mi...@gmail.com> #3
We are working on it, but nothing to share yet. Thanks
pa...@gmail.com <pa...@gmail.com> #4
Are we allowed to post potential workarounds on issue trackers?
I created this small POC repo, definitely not a solution and probably not ideal in the long run but works for my use case and thought I'd share:
br...@gmail.com <br...@gmail.com> #5
ja...@gmail.com <ja...@gmail.com> #6
Any update on LazyList Animations
ra...@gmail.com <ra...@gmail.com> #7
Branch: androidx-main
commit 957064e95fb19d2e6f1312ff4ca4f7407ee3ee42
Author: Andrey Kulikov <andreykulikov@google.com>
Date: Wed Oct 06 22:38:46 2021
Lazy list item reordering animation
Relnote: """Experimental ability to animate Lazy lists item positions was added.
There is a new modifier available within LazyItemScope called `Modifier.animateItemPlacement()`.
Usage example:
var list by remember { mutableStateOf(listOf("A", "B", "C")) }
LazyColumn {
item {
Button(onClick = { list = list.shuffled() }) {
Text("Shuffle")
}
}
items(list, key = { it }) {
Text("Item $it", Modifier.animateItemPlacement())
}
}
When you provide a key via `LazyListScope.item` or `LazyListScope.items` this modifier will enable item reordering animations. Aside from item reordering all other position changes caused by events like arrangement or alignment changes will also be animated.
"""
Bug: 150812265
Test: tests for the new behavior in LazyListAnimateItemPlacementTest
Change-Id: I59e7b8fd3a4a9eb19a15a4704da150bd187a6f24
A compose/foundation/foundation/integration-tests/foundation-demos/src/main/java/androidx/compose/foundation/demos/PopularBooksDemo.kt
A compose/foundation/foundation/src/commonMain/kotlin/androidx/compose/foundation/lazy/LazyListItemPlacementAnimator.kt
M compose/foundation/foundation/api/restricted_current.txt
M compose/foundation/foundation/src/commonMain/kotlin/androidx/compose/foundation/lazy/LazyItemScope.kt
M compose/foundation/foundation/src/commonMain/kotlin/androidx/compose/foundation/lazy/LazyList.kt
M compose/foundation/foundation/src/commonMain/kotlin/androidx/compose/foundation/lazy/LazyListMeasure.kt
M compose/foundation/foundation/src/commonMain/kotlin/androidx/compose/foundation/lazy/LazyListState.kt
M compose/foundation/foundation/api/1.1.0-beta02.txt
M compose/foundation/foundation/samples/src/main/java/androidx/compose/foundation/samples/LazyDslSamples.kt
A compose/foundation/foundation/src/androidAndroidTest/kotlin/androidx/compose/foundation/lazy/LazyListAnimateItemPlacementTest.kt
M compose/foundation/foundation/src/commonMain/kotlin/androidx/compose/foundation/lazy/LazyListHeaders.kt
M compose/foundation/foundation/api/restricted_1.1.0-beta02.txt
M compose/foundation/foundation/api/public_plus_experimental_current.txt
M compose/foundation/foundation/api/current.txt
M compose/foundation/foundation/build.gradle
M compose/foundation/foundation/api/public_plus_experimental_1.1.0-beta02.txt
M compose/foundation/foundation/integration-tests/foundation-demos/src/main/java/androidx/compose/foundation/demos/ListDemos.kt
M compose/foundation/foundation/src/commonMain/kotlin/androidx/compose/foundation/lazy/LazyMeasuredItem.kt
al...@android.com <al...@android.com>
ma...@gmail.com <ma...@gmail.com> #8
[Deleted User] <[Deleted User]> #9
mi...@gmail.com <mi...@gmail.com> #10
In which version of Compose will the modifier be available?
[Deleted User] <[Deleted User]> #11
in 1.1.0-beta03
[Deleted User] <[Deleted User]> #12
Since there is no key param available in LazyVerticalGrid items or item. How are we supposed to use it with them.
Would it still work if I wrape item content in key composable
[Deleted User] <[Deleted User]> #13
bo...@gmail.com <bo...@gmail.com> #14
[Deleted User] <[Deleted User]> #15
ma...@gmail.com <ma...@gmail.com> #16
ja...@gmail.com <ja...@gmail.com> #17
mo...@gmail.com <mo...@gmail.com> #18
+1, can you please provide an update? :)
I think that list animations are pretty important and we can't always animate lists the way we want using the current APIs.
For instance, I'm trying to nicely animate a list whose items are updated every once in a while (some items are updated, some are removed, some are added). I tried to achieve this using an AnimatedVisibility
block for each item (see TransitionManager.beginDelayedTransition
in the traditional view system:
- when an item is added, we first expand the location of the item (and move the siblings and resize their ancestors) then fade it in.
- when an item is removed, we first fade it out then shrink the location of the item.
We can simulate something similar by adding some delays in the AnimatedVisibility
enter & exit transition specs, but it does not work well when removing and adding elements at the same time. This is illustrated in the video below: if my list has a single item and that I remove it but add a different item at the same time, then the following happens:
- The list grows because of the new item that is added. At the same time we fade out the item that is removed.
- The list shrinks because of the item that is being removed. At the same time we fade in the item that is added.
The ideal animation would just fade out the first item, then directly fade in the new item given that we don't need to shrink/grow the list.
It would be really great if this was handled out of the box by LazyColumn
/LazyRow
, for instance like this:
// Because we are using a MutableStateList
// or any other observable list, LazyColumn
// can keep track of the updates and animate
// its items in/out & move them accordingly.
val items = remember {
mutableStateListOf<Item>(/* some default list */)
}
LazyColumn {
items(items, { it.id }) { item ->
MyItem(item)
}
item {
Button(onClick = {
if (items.isNotEmpty()) {
// This will automatically animate given that we
// know exactly which item has been removed.
items.removeAt(0)
}
}) {
Text("Remove First")
}
}
}
We could also have an API that takes any kind of List<T>
+ DiffUtil.ItemCallback<T>
(or similar) :)
de...@gmail.com <de...@gmail.com> #20
in the example given, the list expands/shrinks for item insertion/deletion however it still does NOT fade in / fade out over time, if I'm not mistaken ?
Original diffutil animations have the short delayed fade in / fade out animations together with expansion / shrink when they're enabled on the recyclerview.
me...@gmail.com <me...@gmail.com> #21
kr...@gmail.com <kr...@gmail.com> #22
su...@gmail.com <su...@gmail.com> #23
I have a question regarding item animations.
Some of my layouts are laid out like this (copied from docs as valid case):
LazyVerticalGrid(
// ...
) {
item { Item(0) }
item {
Item(1)
Divider()
}
item { Item(2) }
// ...
}
Since most of my items have Item and Divider inside item {} block, and .animateItemPlacement() should be put directly on content, what should I do in situation like this? Do I have to wrap Item and Divider in a Column, and then put animation on a Column or is there another way?
Thanks.
ar...@connectmedica.com <ar...@connectmedica.com> #24
Can I ask for future to file separate bugs for questions like this as any new comment it this bug is currently sending an email to everyone who +1ed this bug. Thanks!
ia...@gmail.com <ia...@gmail.com> #25
ke...@pinxterapp.com <ke...@pinxterapp.com> #26
People are trying to come up with hacky answers on Stackoverflow without much success or any convenience.
this might not even be in backlog...
ni...@google.com <ni...@google.com>
[Deleted User] <[Deleted User]> #27
ja...@gmail.com <ja...@gmail.com> #28
[Deleted User] <[Deleted User]> #29
ru...@gmail.com <ru...@gmail.com> #30
sa...@gmail.com <sa...@gmail.com> #31
Can you please provide any status update / dates if possible?
Description
However, for my app, the derived colors for both are noticeably different than the rest of my application. While the functionality of custom tabs is winning over the designer, they are not happy with the visual result.
Therefore, I'd like to be able to specify the status bar color to use with the custom tab (ie the primaryColorDark from my application). Seems reasonable if the developer doesn't specify a status bar color it uses the derived color as it does today.
As well I'd like to control the icon tint in the tool bar for the default "close" and "overflow" icons. While, specifying my own bitmap works around the "close" icon, the overflow icon tint is still controlled by the custom tab and may not match the overall theme.