'Translation animation of PopupWindow in Android

Working on a notification component for a tablet app. The component should list some number of notifications on the right, with the first in the top right and the following rendering below and so on.

Now, the first notification might dissapear, which should then move all notifications below upwards, so the oldest notification is always in the top right corner with no blank space.

I'm using Android's PopupWindow class to generate the notifications, which work fine, but I'm struggeling with getting the translation animation to work as intended. Animations for when notifications are entering and exiting are working fine.

Here's what I have tried:

First solution: Using the update() method which takes a new x and y position for the popup. Works like a charm, but no animations, and I can't seem to find a way to add animation to the method. Maybe I'm wrong?

notification.update(96, 56 + (123 * (index + 1)), -1, -1)

In this case; set X position to always 96px from edge, and set the y position to some position depending on the notification's current index in the list. But no animation here.

Second solution: Using an ObjectAnimator. Here, the animation is working, nicely translating upwards when a notification is removed from the list. But, it seems like each notification is rendered inside it's own little view which it cannot render outside of. This means that the content of the popup window is just sliding out of sight, since the popup window is technically not changing position, it's just moving everything inside it. I tried to disable all sorts of clipping, but doesn't seem to work.

val translateY = ObjectAnimator.ofFloat(
                            notification.contentView,
                            View.TRANSLATION_Y,
                            notification.contentView.translationY,
                            notification.contentView.translationY - 10
                        )

                        notification.contentView.clipToOutline = false
                        translateY.duration = 150
                        translateY.interpolator = LinearInterpolator()
                        translateY.start()

Gives this behaviour: notification animation

Could someone help me to figure out some solution?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source