Shared element transition - animate only the visible part of the shared view

Question

I'm working in an app that is similar to Google Calendar...

1. There are events and when a user click one, the event grows and transforms into the detail view.
2. The shared views (the events) are inside a ScrollView, so at some point those views may be partially visible.
3. The problem is that when one partially visible View is selected, the full View appears above all and then the animation runs.

Here is a capture of the problem:

What can I do to make the Transition take only the visible part of the View to animate it?

This is my transition:

<changeBounds xmlns:android="http://schemas.android.com/apk/res/android">
   <arcMotion android:minimumHorizontalAngle="15"
       android:minimumVerticalAngle="0"
       android:maximumAngle="90"/>
</changeBounds>

Devious

Can you share a simple project at github with that behavior? – Mickimickie

Answer 1

Shared elements are drawn on top of the entire view hierarchy. You can disable this by setting Window#setSharedElementsUseOverlay(false) in your Activities, but this will result in undesired effects. More details here and on YouTube.

The better solution is to use shared elements transition between Fragments. More details here.

Eada

Even if I set setSharedElementsUseOverlay(false) the problem persist. – Coupon

@OscarMéndez I am afraid, without an example project it will be difficult to help you. The only interesting parts are: the layouts of your Activities (or Fragments) and how you start them. Just create a dummy views and post them here of even better create an example project on Github. – Eada

Sure I will create a dummy project on github and expand my question. – Coupon