CODEWITHSUNDEEP
androidanimationtransition
Siegmeyer
Siegmeyer

Reputation: 4512

Android's activity enter transitions won't work as intended on overlapping views

Here is the scenario:

I'm trying to declare transition animation between two activities - master and detail. Master is a RecyclerView list with images, detail is LinearLayout with header image from parent's list. Transitions are declared in XML and bound to detail activity like so:

<item name="android:windowSharedElementEnterTransition">@transition/activity_enter_shared</item>
<item name="android:windowEnterTransition">@transition/activity_enter</item>

In RecyclerView's adapter transition is triggered like so:

final ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(
    mContext, 
    imgView, 
    ViewCompat.getTransitionName(imgView)
);
mContext.startActivity(new Intent(mContext, ChildActivity.class), options.toBundle());

The problem is: In @transition/activity_enter I'm applying fade on some layout elements (e.g. back button). Those elements are placed in FrameLayout over an image. This seems to cause problems with fade views, which instead of smoothly appearing on the screen, "pop in". This only happens when views are overlapping - if placed in LinearLayout everythings works as intended.

fade is declared in @transition/activity_enter like so:

<fade
    android:startDelay="300"
    android:duration="100"
    android:interpolator="@android:interpolator/linear">
    <targets>
        <target android:targetId="@id/target_id" />
    </targets>
</fade>

Note 1 - If triggered programmatically in Activity fade works fine:

final ViewGroup frame = (ViewGroup) findViewById(R.id.frame);
frame.setOnClickListener(new View.OnClickListener() {
    boolean visible;

    @Override
    public void onClick(View v) {
        TransitionManager.beginDelayedTransition(frame);
        visible = !visible;
        frame.findViewById(R.id.target_id).setVisibility(visible ? View.VISIBLE : View.GONE);
    }
});

Note 2 - Shared transition (@transition/activity_enter_shared) is custom, however, using default one doesn't solve the problem.

Note 3 - In its simplest, layouts looks like this:

<FrameLayout>
    <ImageView />
    <ImageButton android:id="@+id/target_id" />
</FrameLayout/>

however, problem is not specific to FrameLayout but rather overlapping of views.

Note 4 - For example, in the following layout Lorem will pop in, while ipsum will fade in.

enter image description here

Upvotes: 6

Views: 1843

Answers (1)

Siegmeyer
Siegmeyer

Reputation: 4512

Alright, I found an answer, for those interested.

I had to set

<item name="android:windowSharedElementsUseOverlay">false</item>

in my style definition.

From documentation:

Indicates whether or not shared elements should use an overlay during transitions. The default value is true.

Upvotes: 2

Related Questions