How to fix shadow on scaled FloatingActionButton using support library 23

问题

I have a FAB on a KitKat device using support library 23. I'm scaling the button for a transition effect (by containing it in a resizing view). This basically works apart from the shadow, which appears in a weird form (see the scaled red button in the screenshot, the blue button is full size).

What actually appears to happen is that the shadow is in 4 "corner" bitmaps that overlap to produce an odd effect.

Does anyone know how this can be fixed?

回答1:

This looks interesting!

Unfortunately, I didn't succeed trying to reproduce the issue on - it'd be nice, if you can provide the code you run - but here's the code I wrote to animate&scale floating action button like this:

FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
fab.animate().scaleX(0.1f).scaleY(0.1f).setDuration(100).setListener(
    new Animator.AnimatorListener() {
        @Override
        public void onAnimationStart(Animator animator) {}

        @Override
        public void onAnimationEnd(Animator animator) {
            fab.setBackgroundTintList(getResources().getColorStateList(R.color.colorPrimary, getTheme()));
            fab.setImageDrawable(getResources().getDrawable(R.drawable.common_full_open_on_phone, getTheme()));

            fab.animate().scaleX(2).scaleY(2).setListener(null).setDuration(200).start();
        }

        @Override
        public void onAnimationCancel(Animator animator) {}

        @Override
        public void onAnimationRepeat(Animator animator) {}
    }).start();

Of course, particular animation speed and effects can be adjusted and improved. I hope, it helps.

回答2:

Use scale properties to resize your floating button. And shadow will be fine

<android.support.design.widget.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:scaleType="center"
    android:scaleX="0.75"
    android:scaleY="0.75"/>

来源：https://stackoverflow.com/questions/34332587/how-to-fix-shadow-on-scaled-floatingactionbutton-using-support-library-23