B4A Library SharedElementTransition library - Create Material Design transitions between Activities

With this library (or class module) you can create so called "Shared Element Transitions" between Activities.

Many times there are elements common between activities. With this library you can move these elements to their new location and resize them in a nice animation while starting a new activity.

The effect is quite good explained in this blog post.

Installation:
Copy all files from the library archive SharedElementTransionLibX_XX.zip (.jar, .xml) to your additional libraries folder.
This library/class requires Android Support Repository to be installed with SDK Manager.

You can also use the class file.

How to use?
First we need to enable window content transitions in the theme. So add something like this in your manifest:
B4X:
SetApplicationAttribute(android:theme, "@style/MyAppTheme")


CreateResource(values, theme.xml,
<resources>
    <style name="MyAppTheme" parent="@style/Theme.AppCompat.Light.DarkActionBar">
        [...]
        <item name="android:windowContentTransitions">true</item>
        [...]
    </style>
</resources>
)

Next we have to assign the same transition name to the element that should animate in the transition both in the source and the target activity.
B4X:
SharedElementTransition.SetTransitionName(ImageView1, "trans1")

To start the target activity use the following method.
Parameters are:
TransitionView - The view that should do the transition
TransitionName - Name of the transition
TargetActivity - Name of the target activity as String

B4X:
SharedElementTransition.StartActivityWithTransition(ImageView1, "trans1", "DetailActivity")

In the target activity we have to fix some things because in B4A a layout is loaded too late (after the transition starts). Luckily there is a possibility to postpone the transition and resume it later when our layout is fully loaded.
So add the following inline Java code to the target activity:
B4X:
#If JAVA
public void _onCreate() {
   postponeEnterTransition();
}
#End If

Don't forget to resume the transition in Activity_Create after the layout is loaded and after setting the transitionname to the target view:
B4X:
Activity.LoadLayout("lay2")

SharedElementTransition.SetTransitionName(IV, "trans1")
SharedElementTransition.StartPostponedTransition

That's all. The exit transition is done automatically when you exit the activity with the back button.
If you want to close the second activity programatically use this method:
B4X:
SharedElementTransition.FinishWithTransition

In the SharedElementTransitionClass.zip file you will find an example project which has the SharedElementTransition code module added. You need the AppCompat library for the example.

History:
V0.1
  • First beta release.
What's missing?
  • Will currently only work with Lollipop and up. Need to add some code to check Android API version.
  • Currently only one transition view is supported. Multiple views will be supported in the next version.
 

Attachments

  • SharedElementTransitionLib0_1.zip
    2.6 KB · Views: 210
  • SharedElementTransitionClass.zip
    86.5 KB · Views: 230
Last edited:

walterf25

Expert
Licensed User
With this library (or class module) you can create so called "Shared Element Transitions" between Activities.

Many times there are elements common between activities. With this library you can move these elements to their new location and resize them in a nice animation while starting a new activity.

The effect is quite good explained in this blog post.

Installation:
Copy all files from the library archive SharedElementTransionLibX_XX.zip (.jar, .xml) to your additional libraries folder.

You can also use the class file.

How to use?

First we need to enable window content transitions in the theme. So add something like this in your manifest:
B4X:
SetApplicationAttribute(android:theme, "@style/MyAppTheme")


CreateResource(values, theme.xml,
<resources>
    <style name="MyAppTheme" parent="@style/Theme.AppCompat.Light.DarkActionBar">
        [...]
        <item name="android:windowContentTransitions">true</item>
        [...]
    </style>
</resources>
)

Next we have to assign the same transition name to the element that should animate in the transition both in the source and the target activity.
B4X:
    SharedElementTransition.SetTransitionName(ImageView1, "trans1")

To start the target activity use the following method.
Parameters are:
TransitionView - The view that should do the transition
TransitionName - Name of the transition
TargetActivity - Name of the target activity as String

B4X:
    SharedElementTransition.StartActivityWithTransition(ImageView1, "trans1", "DetailActivity")

In the target activity we have to fix some things because in B4A a layout is loaded too late (after the transition starts). Luckily there is a possibility to postpone the transition and resume it later when out layout is fully loaded.
So add the following inline Java code to the target activity:
B4X:
#If JAVA
public void _onCreate() {
   postponeEnterTransition();
}
#End If

Don't forget to resume the transition in Activity_Create after the layout is loaded and after setting the transitionname to the target view:
B4X:
    Activity.LoadLayout("lay2")
  
    SharedElementTransition.SetTransitionName(IV, "trans1")
    SharedElementTransition.StartPostponedTransition

That's all. The exit transition is done automatically when you exit the activity with the back button.
If you want to close the second activity programatically use this method:
B4X:
    SharedElementTransition.FinishWithTransition

In the SharedElementTransitionClass.zip file you will find an example project which has the SharedElementTransition code module added. You need the AppCompat library for the example.

History:
V0.1
  • First beta release.
What's missing?
  • Will currently only work with Lollipop and up. Need to add some code to check Android API version.
  • Currently only one transition view is supported. Multiple views will be supported in the next version.
Very nice, i will give this a try soon, thanks for your contribution.

Walter
 

DonManfred

Expert
Licensed User
hello is it possible to do the same in b4i?
NOT with this library as it is a java library.
B4i needs libraries written in another language.
 
Top