I have been trying to animate following scenario. Basically I want to start with a number of ImageViews that are arranged vertically and spread out across the screen and after a certain action (button-press etc.) they should move closer. It is important to mention that the number of ImageViews can vary depending on the case (not always 3 like in the picture) so a generic solution would be preferable.
My first approach was to list the images in a Recyclerview and spread the images with a custom ItemDecoration as follows:
class CustomItemDecorator(private val spaceHeight: Int) : RecyclerView.ItemDecoration() {
override fun getItemOffsets(
outRect: Rect,
view: View,
parent: RecyclerView,
state: RecyclerView.State
) {
with(outRect) {
if (parent.getChildAdapterPosition(view) == 0) {
top = spaceHeight
}
bottom = spaceHeight
}
}
}
By removing the ItemDecorator ( myRecyclerView.removeItemDecoration(my_decorator) )
I was able to bring the images closer.
Although this work fine with any number of images in order to improve the user's experience I would like to animate this transition. I have tried to apply some more complex animations to my RecyclerView but nothing has worked until now.
I would be happy for any suggestions :-)
For devices running Android 5+ (API levels 21+), you can use TransitionManager to achieve a smooth animation:
if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP){
TransitionManager.beginDelayedTransition(sceneRoot as ViewGroup, Slide())
}
recyclerView.removeItemDecoration(itemDecorator)
Here, itemDecorator is the instance of CustomItemDecorator which you want to remove and sceneRoot is a ViewGroup which is a (direct or indirect) parent of all Views for which a change of properties (visibility, position, size) should be animated.
Read more about animating Transitions: