question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Extended Floating Action Button] elevation not respected in ExtendedFloatingActionButton

See original GitHub issue

Description: When using the ExtendedFloatingActionButton view, app:elevation is not respected like it is on the regular FloatingActionButton.

Expected behavior: This is what elevation 0 looks like on a regular FloatingActionButton with a transparent background: image

vs elevation 4dp (notice the red sub-circle): image

However, with app:elevation set to 0dp with the ExtendedFloatingActionButton, it looks the same as the second picture with 4dp elevation. I want the look of picture one, so I expect setting app:elevation to 0dp to give the same look.

Additionally, setting the text on the ExtendedFloatingActionButton gives inconsistent elevation results: image image

Source code: ExtendedFloatingActionButton xml:

<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
        style="@style/Theme.MyApp.FloatingActionButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:elevation="0dp"
        app:icon="@drawable/ic_location"
        app:fabSize="mini"/>

Style xml:

<style name="ThemeOverlay.MyApp.QuickCaptureFloatingActionButton" parent="ShapeAppearance.MaterialComponents.SmallComponent">
    <item name="cornerSize">100%</item>
    <item name="cornerFamily">rounded</item>
</style>

 <style name="Theme.MyApp.FloatingActionButton" parent="Widget.MaterialComponents.FloatingActionButton">
    <item name="shapeAppearanceOverlay">@style/ThemeOverlay.MyApp.FloatingActionButton</item>
    <item name="backgroundTint">#99000000</item>
    <item name="color">#99000000</item>
    <item name="android:hapticFeedbackEnabled">true</item>
 </style>

Minimal sample app repro: efabbug.zip

Material Library version: 1.6.1, but also tested on 1.8.0-alpha01

Issue Analytics

  • State:closed
  • Created a year ago
  • Reactions:1
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
imhappicommented, Oct 27, 2022

Awesome! Going to close this bug since there is a workaround and there’s an existing bug (filed internally - b/132323220)

1reaction
imhappicommented, Oct 19, 2022

I did some more testing; I’m still able to repro this with transparent color with the regular FAB. Unfortunately I poked around and it looks like this is also an existing bug with transparent colours and material components that also use MaterialShapeDrawable.

At the crux of it, I’m not sure why the native shadows are still being drawn when elevation is set to 0, but one good workaround is to set the shadow attributes on the fab

android:outlineAmbientShadowColor="@color/transparent
android:outlineSpotShadowColor="@color/transparent
Read more comments on GitHub >

github_iconTop Results From Across the Web

Elevation not working on android.support.design.widget ...
is a screenshot of my mainactivity which has a FloatingActionButton but it doesnt applying any elevation (no shadows). How can I enable shadow...
Read more >
Jetpack Compose Ep:7 — Extended Floating Action Button App
elevation — It is used to control the shadow below the button by provided a custom elevation in DP. Start by creating a...
Read more >
ExtendedFloatingActionButton - Android Developers
Extended floating action buttons are used for a special type of promoted action. They are distinguished by an icon and a text floating...
Read more >
Quick Tips to Start Using ExtendedFloatingActionButton
This article will provide you with the base knowledge & usage tips for adding Extended FAB to your project. https://material.io/components/buttons-floating- ...
Read more >
Buttons: floating action button - Material Design
A floating action button (FAB) represents the primary action for a screen. ... Regular FABs are FABs that are not expanded and are...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found