Android view animation outside the parent view boundary

If tried to animate object like button, imageview etc. outside their parent view. It will not give same the behaviour as we expect.

Suppose you have a relative layout with wrap_contant and imageview inside the relative layout at bottom of the screen and you want to animate that imageview.

If you try to animate using ObjectAnimator on imageview than the animation will only visible within parent view boundary of the imageview like below

In above example I am trying to animate mic icon like WhatsApp cancel voice recorder animation. If you see the animation, we are not able to see the mic icon animation after the height on parent layout of mic imageview.

To Animate this mic icon to outside the parent boundary, we have to set two property of all parent layout of view.

viewGroup.setClipChildren(false) 
viewGroup.setClipToPadding(false)

As per Android documentation by default, children are clipped to their bounds before drawing and clipped to the padding of their parent ViewGroup.

These two property we have to set for the all parent of view

private fun setAllParentsClip(view: View, enabled: Boolean) {
    var view = view
    while (view.parent != null && view.parent is ViewGroup) {
        val viewGroup = view.parent as ViewGroup
        viewGroup.clipChildren = enabled
        viewGroup.clipToPadding = enabled
        view = viewGroup
    }
}

After adding the above lines of code now animation look like this

Below link is the sample application for slide to cancel animation like WhatsApp

shainsingh89/VoiceRecorderUI

Feel free to discuss, share.