Skip to content

Item animations

Paolo Valerdi edited this page Jul 25, 2020 · 4 revisions

Animations

InboxRecyclerView uses a class called ItemExpandAnimator for moving the list items while the content is expanding, collapsing or being pulled.

This library offers two animations out of the box:

1. Split

This is the default animator. It splits the list when the content is expanding. Items above the expanding item are pushed towards the top and the rest towards the bottom.

recyclerView.itemExpandAnimator = ItemExpandAnimator.split()

TODO: Video

2. Scale

This animator mimics the animation used in Reply. By default, this scales down the background but also allows you to disable the scaling animation turning it into motion similar to a shared element transition.

scaleBackground = true scaleBackground = false
recyclerView.itemExpandAnimator = ItemExpandAnimator.scale(scaleBackground = true)

Make your own

Creating custom animations is really easy. ItemExpandAnimator contains just one abstract function that is responsible for animating the items.

recyclerView.itemExpandAnimator = object : ItemExpandAnimator() {

  override fun onPageMove() {
    // This gets called every time the 
    // content changes position on the screen.
  }
}

The existing animators are also open classes so you can simply extend them and customize as needed.

Duration and Interpolator

By default, a duration of 250ms and the FastOutSlowInInterpolator() interpolator are used for item animations. This can be changed using,

expandablePageLayout.animationDurationMillis = CUSTOM_DURATION
expandablePageLayout.animationInterpolator = CUSTOM_INTERPOLATOR
Clone this wiki locally