Experiment with SharedElement transition in Jetpack Compose, inspired by Flutter Hero widget.

Last update: Dec 23, 2022

Overview

compose-shared-element

Note: This is not meant to be a maintained library.

Proof of concept exploration of how to implement SharedElement transition in Jetpack Compose.
Inspired by Flutter Hero widget.

Transition consists of following animations:

Position
Scale
Crossfade (which makes it work on any kind of element, e.g. Text)

UsersListScreen: UserDetailScreen:	Slowed down transition animation:

Usage

Define FROM and TO elements with shared tag

@Composable
fun ScreenA() {
  // ...
  
    SharedElement(tag = "tag", type = SharedElementType.FROM) {
        Image(image, Modifier.preferredSize(48.dp))
    }
  
  // ...
}

@Composable
fun ScreenB() {
  // ...
  
    SharedElement(tag = "tag", type = SharedElementType.TO) {
        Image(image, Modifier.preferredSize(200.dp))
    }
    
  // ...
}

Make SharedElementsRoot a common parent of ScreenA and ScreenB. It doesn't have to be their direct parent.

SharedElementsRoot {
    // change between ScreenA and ScreenB
}

Transition starts automatically when second SharedElement is detected

Sample

See sample usage with UsersListScreen and UserDetailsScreen here.

Issues

Considering the experimental state of this library and state of Jetpack Compose itself there are some issues described here.

You might also like...

This is a simple util to create Activity transition animation

TransitionHelper This is a simple util to create Activity transition animation API compatible with Android 2.2+ 中文说明 Screenshots How to use 1.startAct

1.6k Dec 12, 2022

A Simple Todo app design in Flutter to keep track of your task on daily basis. Its build on BLoC Pattern. You can add a project, labels, and due-date to your task also you can sort your task on the basis of project, label, and dates

WhatTodo Life can feel overwhelming. But it doesn’t have to. A Simple To-do app design in flutter to keep track of your task on daily basis. You can a

1k Jan 1, 2023

A Flutter plugin thats support share files to social media like TikTok, Instagram, Facebook, WhatsApp, Telegram and more others...

Social Share Kit A Flutter plugin that's support share files to social media like Tiktok, Instagram, Facebook, WhatsApp, Telegram and more. This plugi

2 Sep 2, 2022

Actions for android animations. Inspired by libgdx scene2d actions.

Android Animations Actions Actions for android animations. Inspired by libgdx scene2d actions. The main goal of this project is making creating of com

137 Nov 29, 2022

Android view inspired by http://qrohlf.com/trianglify/

Trianglify Android view inspired by http://qrohlf.com/trianglify/ Usage Add the dependency dependencies { compile 'com.manolovn:trianglify:1.1.0'

457 Dec 15, 2022

Add Animatable Material Components in Android Jetpack Compose. Create jetpack compose animations painless.

AnimatableCompose Add Animatable Material Components in Android Jetpack Compose. Create jetpack compose animation painless. What you can create from M

12 Jan 2, 2023

Compose-actors - Android app built with jetpack compose follows new revamped guide to app architecture

Compose Actors 💃 Inspired from JetCaster JetNews JetSnack More compose content

110 Dec 29, 2022

Group of libraries to help you build better animations with Jetpack Compose

36 May 12, 2022

DrawBox: a multi-purpose tool to draw anything on canvas, written completely on jetpack compose

DrawBox DrawBox is a multi-purpose tool to draw anything on canvas, written comp

172 Dec 30, 2022

Comments

Missed "frame" when going back to UsersListScreen
It's not that visible on the gif, you can only see it when going back from Irene.

When going from UsersListScreen to UserDetailsScreen everything works fine. The sequence is as follows:

startElement from previous screen is gone

endElement calls onElementRegistered and hides itself (by using alpha = 0)

transition is set to SharedElementTransition.WaitingForEndElementPosition and invalidateTransitionsOverlay() is called.

SharedElementTransitionsOverlay reads that transition and draws SharedElementTransitionPlaceholder of startElement for a brief moment until endElement will be positioned and we can launch the real transition.

endElement calls onElementPositioned.

transition is set to SharedElementTransition.InProgress and invalidateTransitionsOverlay() is called.

SharedElementTransitionsOverlay reads and draws the real transition from startElement to endElement

Steps 2, 3 and 4 are done in the same pass (frame?). endElement hides itself, but at the same time we already have a placeholder of startElement drawn by SharedElementTransitionsOverlay.

When going from UserDetailsScreen to UsersListScreen there is one difference though. It looks like AdapterList (that is used on UsersListScreen) never disposes its list items, even when it's gone (#1, https://issuetracker.google.com/issues/150174792). I believe it causes it to be positioned "instantly"(?). The sequence is as follows:

startElement from previous screen is gone

endElement calls onElementRegistered and hides itself (by using alpha = 0)

transition is set to SharedElementTransition.WaitingForEndElementPosition and invalidateTransitionsOverlay() is called.

DIFFERENT: NOT HAPPENING

DIFFERENT: endElement calls onElementPositioned in the same pass as 2 and 3. SharedElementTransitionsOverlay had no chance to refresh, so we have missed frame.

transition is set to SharedElementTransition.InProgress and invalidateTransitionsOverlay() is called.

SharedElementTransitionsOverlay reads and draws the real transition from startElement to endElement
opened by MaciejCiemiega 1
Types FROM and TO may be misleading
The types names may be a bit misleading, because they can be used interchangeably. It doesn't matter if first one if FROM or TO. They are only used to detect the "other" one from the pair.

Without it I have no idea how to detect that one element was on "previous" screen and second one is on "next" screen, because there is no concept of screens and transitions between them. We cannot rely on things like position or hierarchy change. Not every hierarchy change is a "screen" change and that would make it transition from its old position to its new position (or old/new places in hierarchy).

Maybe a better idea would be to change it to something more generic like screen: String so one can specify values like:

"list" on one screen

"details" on second screen

For now I stayed with FROM and TO because it makes it super simple to choose one o two enum values.
opened by MaciejCiemiega 0
SharedElements are not properly unregistered after AdapterList is disposed
Causes issues in the following scenario:

On first screen there is an AdapterList component with FROM element.

User navigates to next screen, that has no SharedElement.

User navigates to next screen that has a TO element.

Here the transition between FROM and TO would start because we still remember that FROM element from first screen. This is due to a bug in Compose that cause AdapterList to never invoke onDispose on list items, so FROM element would never know it disappeared.

https://issuetracker.google.com/issues/150174792 I'm not sure if any workaround can be implemented before it's fixed.
opened by MaciejCiemiega 0

Owner

Mobnetic

GitHub

🪐 Jetpack Compose animation library that allows you to implement animations such as shared element transition.

?? Jetpack Compose animation library that allows you to implement animations such as shared element transition.

504 Jan 2, 2023

Allows the easy creation of animated transition effects when the state of Android UI has changed

android-transition Android-Transition allows the easy creation of view transitions that reacts to user inputs. The library is designed to be general e

615 Nov 14, 2022

ArcAnimator helps to create arc transition animation: 2.3.+

ArcAnimator ArcAnimator helps to create arc transition animation: 14+ | ArcAnimator Demo | TransitionLoop Demo* *TransitionLoop Prototype by Min-Sang

1.2k Dec 20, 2022

Android Transition animations explanation with examples.

UNMAINTAINED No maintainance is intended. The content is still valid as a reference but it won't contain the latest new stuff Android Transition Frame

13.6k Dec 28, 2022

A simple and customizable Android full-screen image viewer with shared image transition support, "pinch to zoom" and "swipe to dismiss" gestures

Stfalcon ImageViewer A simple and customizable full-screen image viewer with shared image transition support, "pinch to zoom" and "swipe to dismiss" g

1.9k Jan 5, 2023