Wrong elevation shadows during fragment transaction

Question

I have two fragments being replaced in the container. My problem is with elevation shadows during the custom animation that I use for the transaction. I set the duration to two seconds to see it properly and it seems only shadows from ambient light are visible during the transaction, and key light shadows show up only after animation ends (see https://material.io/design/environment/light-shadows.html#light). Does anyone know how to deal with this?

Here's some source code and video

CardView layout

<androidx.cardview.widget.CardView
    android:id="@+id/card"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="@dimen/margin_8dp"        
    app:cardElevation="@dimen/elevation_4dp"
    app:cardCornerRadius="@dimen/corner_16dp">

Transaction code

supportFragmentManager
    .beginTransaction()
    .setCustomAnimations(
        R.anim.fade_in,
        R.anim.fade_out,
        R.anim.fade_in,
        R.anim.fade_out
    ).replace(R.id.fragment_container, questionsFragment, "questions")
    .commit()

Animation xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="2000">

    <alpha
        android:fromAlpha="0"
        android:toAlpha="1"
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"/>
</set>

And this is a sample video of the issue https://www.youtube.com/watch?v=dUe1GT4dAFQ

Thanks in Advance.

Answer 1

Try reducing the animation duration from 2 seconds to 500ms or 1000ms.