How to animate BottomSheetDialogFragment in Android?

Question

I have a BottomSheetDialogFragment that I would like to animate by applying Bézier curve on its entry and exit. I have managed to apply simple animation this way

override fun onActivityCreated(arg0: Bundle?) {
    super.onActivityCreated(arg0)
    dialog?.window?.attributes?.windowAnimations = R.style.BottomSheetDialogAnimation
}

where the style is

<style name="BottomSheetDialogAnimation">
    <item name="android:windowEnterAnimation">@anim/bottom_sheet_slide_up</item>
    <item name="android:windowExitAnimation">@anim/bottom_sheet_slide_down</item>
</style>

but I'm stuck how to do it with Bézier curve animation.

does https://stackoverflow.com/questions/22896605/how-to-apply-easing-animation-function-on-view-in-android get you most of the way there? Because I suspect you don't want a Bezier curve, but instead of clean easy in/out behaviour. However, if you do explicitly need an actual Bezier curve, updating `getInterpolation` to calculate the [bezier values](https://pomax.github.io/bezierinfo/#explanation) would be trivial. — Mike 'Pomax' Kamermans, Jun 25 '21 at 15:35

score 4 · Answer 1 · answered Jun 25 '21 at 10:52

4

onActivityCreated is Deprecated so you can use onViewCreated

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        dialog!!.window!!.attributes.windowAnimations = R.style.BottomSheetDialogAnimation
    }

NOTE: Comment or Remove onActivityCreated method.

answered Jun 25 '21 at 10:52

Tippu Fisal Sheriff

2,177
11
19

1

Thanks Tippu but the point of my question to find a solution for Bézier curve animation. – Var Droid Jun 25 '21 at 11:06

score 1 · Answer 2 · answered May 04 '23 at 10:13

To control or customize the animation of a BottomSheetDialogFragment, you must set the windowAnimations attribute at the end of onCreateDialog().

@NonNull
@Override
public Dialog onCreateDialog(Bundle savedInstanceState) {

    // https://stackoverflow.com/questions/51706883/converting-dialog-to-bottom-sheet
    View dialogLayout = LayoutInflater.from(getActivity()).inflate(R.layout.my_dialog_layout, null);
    BottomSheetDialog dialog = new BottomSheetDialog(getActivity());
    dialog.setContentView(dialogLayout);

    // Example of setting a button click listener
    Button button1 = dialogLayout.findViewById(R.id.button1);
    button1.setOnClickListener(this);

    // Control or customize the animation of the BottomSheetDialog here
    dialog.getWindow().getAttributes().windowAnimations = R.style.BottomSheetDialogAnimation;

    return dialog;
}

There is no easy way to apply a Bézier curve to the animation. The closest you can get is to use "@android:anim/decelerate_interpolator" or "@android:anim/accelerate_interpolator" in the animation XML file. These will gradually slow down or speed up the animation near the end.

res/anim/bottom_sheet_slide_up.xml

<?xml version="1.0" encoding="utf-8"?>
<set
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/decelerate_interpolator">

    <!-- Source: https://stackoverflow.com/questions/18232372/slide-a-layout-up-from-bottom-of-screen -->
    <translate
        android:fromYDelta="75%p"
        android:toYDelta="0%p"
        android:fillAfter="true"
        android:duration="500"/>

    <alpha
        android:fromAlpha="0.0"
        android:toAlpha="1.0"
        android:duration="500"/>
</set>

How to animate BottomSheetDialogFragment in Android?

2 Answers2