androidkotlinnavigationandroid-jetpack-composematerial-design

How to implement Container Transform with Material Motion on Jetpack Compose


I have FirstPage, where there is a FloatingActionButton. When user clicks on it, I need to show SecondPage (f.ex. via NavigationComponent). Complicity of this feature - is that I need is animate its previewing like on scheme below:

enter image description here

I know about Material Motion (https://m2.material.io/develop/android/theming/motion#container-transform) as it can animate containers but it works only for plain old Fragments and Views not for Compose. Is there any way to do similar on Compose ?


Solution

  • More then a year passed from this question, but maybe somebody will find it and see this answer. Sooo Google already added this possibility. Here is a link to a documentation: https://developer.android.com/develop/ui/compose/animation/shared-elements.

    Also here is a link to a video tutorial with this: https://www.youtube.com/watch?v=mE5bLb42_Os