Material-components-android: [FloatingActionButton] App crashes because of shapeAppearance on FAB

[ashraf-patel]

Description: Here is the Demo app https://github.com/ashraf-patel/MaterialComponentsDemo, as described in this link to the gif you can reproduce the crash.

Expected behavior: It should not crash.

Source code:

Here is the problem, making cornerSizeTopRight and cornerSizeBottomLeft to 30dp is causing the crash.
link to the Gif

<style name="ShapeAppearance.Sunflower.FAB" parent="ShapeAppearance.MaterialComponents">
        <item name="cornerFamily">rounded</item>
        <item name="cornerSizeTopLeft">0dp</item>
        <item name="cornerSizeTopRight">30dp</item>
        <item name="cornerSizeBottomRight">0dp</item>
        <item name="cornerSizeBottomLeft">30dp</item>
</style>

Below code works link to the gif

<style name="ShapeAppearance.Sunflower.FAB" parent="ShapeAppearance.MaterialComponents">
        <item name="cornerFamily">rounded</item>
        <item name="cornerSizeTopLeft">0dp</item>
        <item name="cornerSizeTopRight">0dp</item>
        <item name="cornerSizeBottomRight">0dp</item>
        <item name="cornerSizeBottomLeft">0dp</item>
</style>

https://github.com/ashraf-patel/MaterialComponentsDemo is the Demo app.

Android API version: OS: 8.0

Material Library version: 1.1.0-beta01

Device: Device: Pixel 2 XL Emulator

StackOverflow: https://stackoverflow.com/questions/58225921/shapeappearance-in-material-component-floatingactionbutton-causes-a-crash

Issue in original repository: https://github.com/android/sunflower/issues/519

[ymarian]

30dp is bigger than the radius of the fab. A normal fab is 56dp.
Either set:

<dimen name="fab_corner_radius">50%</dimen>

If you do want a 60dp fab you can also set this on your Fab:

app:fabCustomSize="60dp"

Depending on what you are trying to achieve.

[ashraf-patel]

@ymarian
<dimen name="fab_corner_radius">50%</dimen> still crashes.
But this <dimen name="fab_corner_radius">28dp</dimen> works with default FAB size.
Also <dimen name="fab_corner_radius">30dp</dimen> works with app:fabCustomSize="60dp"

Update:
Sorry but after testing all of them for a while it looks like none of them is working for me. It still crashes.

[gabrielemariotti]

@ymarian
Just a curiosity.
Using the app:shapeAppearanceOverlay with 2 corners of 30dp as described in the issue in a standard fab (56dp):

<style name="CustomShapeOVerlay" parent=""> <item name="cornerFamily">rounded</item> <item name="cornerSizeTopLeft">0dp</item> <item name="cornerSizeTopRight">30dp</item> <item name="cornerSizeBottomRight">0dp</item> <item name="cornerSizeBottomLeft">30dp</item> </style>
It works with 1.1.0-beta01 in devices with API28 and API29.

[ymarian]

My bad the corner can be more than 50% since the other one on the same side is 0.

@gabrielemariotti It repros in 26.

I'll have to debug this tomorrow setting app:shapeAppearanceOverlay="@null" seems to help, which doesn't make sense to me since the ShapeAppearance in the example is setting the more specific cornerSizes. The default fab overlay only sets app:cornerSize to 50% the shape appearance should ignore the overlay in this case.

[ashraf-patel]

@ymarian any updates?

[cketcham]

Looks like a native crash. I was only able to repro it on API 26 emulator. I haven't tried on a real device. Are we sure this crashes in that case too?

[ashraf-patel]

Do you mean on real device?

[cketcham]

Yeah I was wondering if you've tested on a real device. But after a bit of digging around, it looks like this is an issue on API 26, and I saw some similar reports coming from real devices in other cases.

We found a workaround to not set the scale close to 0 while the fab is animating on API 26. That seems to fix it. We'll sync out the fix to github soon.

[cketcham]

Resolved by 3c3ac61