[Motion/Question] Using `MaterialFade` as a dialog transition?

[OxygenCobalt]

I want to use MaterialFade to transition into my dialogs, as is shown in the Motion Documentation. However, there is no information in how to use MaterialFade to transition into dialogs, only with transitioning views.

My idea is that I could use the fragment APIs to transition, like this:

// class MyDialog : DialogFragment() 
override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    enterTransition = MaterialFade()
    exitTransition = MaterialFade()
}

But that doesn't seem to work. The plain fade animation is still used regardless. Is this a bug or am I meant to transition into dialogs using another method? Any clarification here would be appreciated.

[hunterstich]

Hi @OxygenCobalt,

Alert dialogs use window animations and can't be used with Transitions like MaterialFade.

If you'd like to customize the way MaterialAlertDialogBuilder animates the entering/exiting of a dialog you can do the following:

    <style name="Theme.YourApp" parent="Theme.Material3.DayNight.NoActionBar">
        <item name="materialAlertDialogTheme">@style/ThemeOverlay.YourApp.MaterialAlertDialog</item>
    </style>

    <style name="ThemeOverlay.YourApp.MaterialAlertDialog" parent="ThemeOverlay.Material3.MaterialAlertDialog">
        <item name="android:windowAnimationStyle">@style/Animation.YourApp.AlertDialog</item>
    </style>

    <style name="Animation.YourApp.AlertDialog" parent="@android:style/Animation.Activity">
        <item name="android:windowEnterAnimation">@anim/dialog_enter_anim</item>
        <item name="android:windowExitAnimation">@anim/dialog_exit_anim</item>
    </style>

// dialog_enter_anim.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
  <alpha
      android:interpolator="?attr/motionEasingEmphasizedDecelerateInterpolator"
      android:duration="200"
      android:fromAlpha="0.0"
      android:toAlpha="1.0" />
  <scale
      android:interpolator="?attr/motionEasingEmphasizedDecelerateInterpolator"
      android:duration="200"
      android:fillAfter="false"
      android:fromXScale="0.8"
      android:toXScale="1.0"
      android:fromYScale="0.8"
      android:toYScale="1.0"
      android:pivotX="50%"
      android:pivotY="50%" />
</set>

// dialog_exit_anim.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
  <alpha
      android:interpolator="?attr/motionEasingEmphasizedDecelerateInterpolator"
      android:duration="200"
      android:fromAlpha="1.0"
      android:toAlpha="0.0" />
  <scale
      android:interpolator="?attr/motionEasingEmphasizedAccelerateInterpolator"
      android:duration="200"
      android:fillAfter="false"
      android:fromXScale="1.0"
      android:toXScale="0.8"
      android:fromYScale="1.0"
      android:toYScale="0.8"
      android:pivotX="50%"
      android:pivotY="50%" />
</set>

I think there's some work to be done on those animation parameters but it should get you pretty close. If you look at MaterialFade you should be able to tweak each xml animation to get a pretty similar result.

Let me know if this helps. I'm going to close this for now but feel free to re-open if you'd like to discuss or have further questions.

[OxygenCobalt]

Thanks @hunterstich. I think that will work for me.

Perhaps we should mirror some of the material animations to animator resources so they can be used in more places? I've personally tried to use MaterialFade elsewhere to no success where something like ObjectAnimator would be much nicer.