Fragment Transition and Alpha issue

Question

I'm using a FragmentTransition, along with a SharedElementTransition between 2 Fragments.

The actual element transition, and Fragment transition consist of a set of different transitions to create the desired animation, I have no problem with the animations, but have included all transitions used for clarity :

    val moveElementTransition: Transition  by lazy { TransitionInflater.from(context).inflateTransition(android.R.transition.move) }
    val noElementTransition:Transition by lazy { TransitionSet().addTransition(TransitionInflater.from(context).inflateTransition(android.R.transition.no_transition)) }
    val exitTransition: Transition by lazy { TransitionSet().addTransition(TransitionInflater.from(context).inflateTransition(android.R.transition.slide_left)).setDuration(200L).setStartDelay(0L) }
    val reenterTransition: Transition by lazy { TransitionSet().addTransition(TransitionInflater.from(context).inflateTransition(android.R.transition.slide_left)).setDuration(200L).setStartDelay(450L) }
    val enterTransition: Transition by lazy { TransitionSet().addTransition(TransitionInflater.from(context).inflateTransition(android.R.transition.slide_bottom)).setDuration(200L).setStartDelay(400L) }

Issue

Just to clarify, all transitions "work" when going from FragmentA to FragmentB and when I pop the backstack and reverse the animation.

However it appears all alpha settings on views (including CardView corners and View alpha) are incorrect whilst the transition occurs. The result is obviously ugly whilst the Transition occurs any alpha appears incorrectly (more of a multiplied effect, than an overlay). It seems like alpha on views is not supported correctly on Fragment Transitions?

An example of a alpha vignette I'm using inside some views is :

<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">
    <gradient
        android:angle="0"
        android:endColor="@android:color/transparent"
        android:startColor="@color/colorWindowBackgroundTint"
        android:type="linear"/>
</shape>

Screengrab of how it vignette looks normally on the left, and how it looks like during a Fragment Transition animation:

Has anyone else encountered this issue, and if so, is their a fix?

EDIT:

As requested I've created a small test app that replicates this behaviour (tested on emulator api 23/24/25) - link : https://github.com/TreeFrogApps/FragmentTransitionTest

Answer 1

I see two issues with the sample app you presented when back is pressed on fragment B. The first is that the gradient on the right, rather than gracefully sliding down, just disappears. The second issue is that the gradient on the left changes in a rather odd way before it slides down. Here is what I am seeing with the sample app:

I can't really say why we are seeing this, but I can tell you a way to fix it. Whether this applies back to your real app or not you will have to determine.

First, let's fix the odd behavior of the left vignette. This issue somehow involves transitioning from a solid color to the transparent color. To fix this change the end color to the transparent version of the start color. The visual appearance will not change.

shape_vignette_left.xml

<shape 
    android:shape="rectangle">
    <gradient
        android:angle="0"
        android:startColor="#FF303F9F"
        android:endColor="#00303F9F"
        android:type="linear" />
</shape>

I have used color constants instead of ids just for simplicity in showing this.

Now, let's fix the right vignette. This is (again somehow) related to the rotation of the shape drawable. To fix this, create a new shape drawable with the rotation built in by reversing the start/end colors of the shape above and removing the rotation from the layout as follows:

shape_vignette_right.xml

<shape 
    android:shape="rectangle">
    <gradient
        android:angle="0"
        android:startColor="#00303F9F"
        android:endColor="#FF303F9F"
        android:type="linear" />
</shape>

And here's the new layout:

fragment_b_layout.xml

<FrameLayout 
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <View
        android:layout_width="64dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="@drawable/shape_vignette_left" />

    <View
        android:layout_width="64dp"
        android:layout_height="match_parent"
        android:layout_gravity="right"
        android:background="@drawable/shape_vignette_right" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Fragment B"
        android:textColor="@android:color/white" />

</FrameLayout>

Here is what it looks like at the conclusion of the above changes:

Much nicer.

---

As a follow-up, here is the original left drawable (full screen) with the start/end colors of "#FF303F9F" and "@android:color/transparent":

Here is the same drawable with start/end colors of "#FF303F9F" and "#00303F9F". Any views positioned behind the drawable will become more and more visible as the color transitions from fully opaque ("#FF303F9F") to fully transparent("#00303F9F").