Visual bug with native plugin animation in Ionic 4 Capacitor

Question

I'm currently working in a custom android native plugin for Capacitor. The plugin consists in an app's footer which is working fine except for a hiding animation.

The problem is I'm changing the WebView margin everytime the footer is being shown/hide, which makes a black(sometimes is orange, probably because is one of app's main colors) bar appears in the space occupied by the footer. Black bar disappears once the animation ends.

I've tried changing the WebView margin at animation start/end and the result is the same.

Thanks in advance guys, here is some code.

Animation XML:

<translate
    android:duration="150"
    android:fromYDelta="0"
    android:toYDelta="100%" />

WebView margin function:

private void changeWebViewMargin(float pixels) {
    CoordinatorLayout.LayoutParams params = (CoordinatorLayout.LayoutParams) wb.getLayoutParams();
    params.setMargins(0, 0, 0, (int) dpTopixel(getContext(), pixels));
    wb.setLayoutParams(params);
    wb.requestLayout();
}

Hide function:

@PluginMethod()
public void hide(PluginCall call) {
    Boolean animated = call.getBoolean("animated");

    if (animated == null) {
        animated = false;
    }

    final boolean finalAnimated = animated;

    this.getBridge().getActivity().runOnUiThread(new Runnable() {
        @Override
        public void run() {
            if (finalAnimated && footer.getVisibility() == View.VISIBLE) {
                changeWebViewMargin(0f);
                Animation myAnim = AnimationUtils.loadAnimation(getBridge().getContext(), R.anim.hide_footer);
                myAnim.setAnimationListener(new Animation.AnimationListener() {
                    @Override
                    public void onAnimationStart(Animation animation) {
                    }

                    @Override
                    public void onAnimationEnd(Animation animation) {
                        footer_img.setVisibility(View.INVISIBLE);
                        footer.setVisibility(View.INVISIBLE);
                        btn3.setVisibility(View.INVISIBLE);
                    }

                    @Override
                    public void onAnimationRepeat(Animation animation) {
                    }
                });
                footer.startAnimation(myAnim);
                footer_img.startAnimation(myAnim);
                btn3.startAnimation(myAnim);
            } else {
                footer_img.setVisibility(View.INVISIBLE);
                footer.setVisibility(View.INVISIBLE);
                btn3.setVisibility(View.INVISIBLE);
                changeWebViewMargin(0f);
            }
        }
    });
}

Answer 1

Instead of working with margins try using WindowInsets:

ViewCompat.setOnApplyWindowInsetsListener(wb, (v, insets) -> {
    ((ViewGroup.MarginLayoutParams) v.getLayoutParams()).bottomMargin = 
                 insets.getSystemWindowInsetTop() + (int) dpTopixel(getContext(), pixels);
    return insets.consumeSystemWindowInsets();
});