Friday, 28 May 2021

Wrong elevation shadows during fragment transaction

I have two fragments being replaced in 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 transaction, and key light shadows shows up only after animation ends (see https://material.io/design/environment/light-shadows.html#light). Anyone knows 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 video of the issue https://www.youtube.com/watch?v=dUe1GT4dAFQ

Thanks for help.



from Wrong elevation shadows during fragment transaction

No comments:

Post a Comment