makovkastar/FloatingActionButton

Make fab square on lollipop

raguirre opened this issue · 1 comments

I have a very specific scenario on my Nexus 7 2013 when I scale a fab trying to make it cover the whole screen (to mimic a circular reveal transition), and it doesn't scale properly due to the fab being round. This has nothing to do with the library but rather with the hardware acceleration on the Nexus 7 (took me a few hours to find out). The animation works fine on all other devices I tested it, both real and virtual. After testing, I realized that when scaling a squared view, instead of a round one, the N7 scales it fine.

For this reason I'm trying to morph the fab into a square late into the animation to properly make it look like its covering the whole screen.

In pre-lollipop versions just calling setBackground makes the fab square (I know that's why setColorNormal is the preferred way to do it), however on lollipop no matter what I try it always remains round. I've tried setImageDrawable, setBackground, setScaleType and it will always stay round.

Is there a workaround for this?

Thanks :)

Nevermind, I figured out what the issue was.

If anyone else out there is having this same issue, here's how I fixed it:

The reason why a square drawable works fine is because it has no transparent edges. The drawable that was causing these issues was the fab icon, since it's basically a transparent square with the icon in the center. What I needed was a drawable that was fully circular and non transparent.
I had already defined a circle drawable in my project used for avatars so I used that one and tinted it with the fab's colorNormal and set that as the fab's imageDrawable.

Here's the code:

<!--circle_drawable.xml-->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="oval">
            <solid android:color="@color/white"/>
            <size
                android:width="56dp"
                android:height="56dp"/>
        </shape>
    </item>
</layer-list>
//Setting the fab drawable
Drawable d = context.getResources().getDrawable(R.drawable.circle_drawable);
d.mutate().setColorFilter(fab.getColorNormal(), PorterDuff.Mode.MULTIPLY);
fab.setImageDrawable(d);