Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[BottomAppBar] BottomAppBar casts a shadow #2953

Closed
manabu-nakamura opened this issue Sep 2, 2022 · 5 comments
Closed

[BottomAppBar] BottomAppBar casts a shadow #2953

manabu-nakamura opened this issue Sep 2, 2022 · 5 comments

Comments

@manabu-nakamura
Copy link
Contributor

manabu-nakamura commented Sep 2, 2022

#2698...

Description: BottomAppBar (https://m3.material.io/components/bottom-app-bar/overview):

  • Elevation: No shadow
  • M3: Bottom app bar has new colors, a taller container, no elevation or shadow, and contains the FAB.

unnamed9
But, the BottomAppBar casts a shadow (#2852).
180359724-25751a28-3757-45b5-8b06-88ac6bb92b48
The MaterialToolbar casts no drop shadow (#2698 (comment)).
https://m3.material.io/components/top-app-bar/overview
material-components/material-components#108

Expected behavior: The BottomAppBar casts no shadow.
Or revise the documentation.

Source code:

<androidx.coordinatorlayout.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <com.google.android.material.bottomappbar.BottomAppBar
        android:id="@+id/appBar"
        android:layout_width="match_parent"
        android:layout_height="?actionBarSize"
        android:layout_gravity="bottom" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>

Minimal sample app repro: Test1.zip (#2852)

Android API version: 33

Material Library version: 1.7.0-rc01

Device: Emulator 31.3.10

@drchen
Copy link
Contributor

drchen commented Sep 2, 2022

I feel that's intended. @imhappi can you confirm this with the designers?

@manabu-nakamura
Copy link
Contributor Author

I want a document like https://material.io/design/environment/elevation.html.

@patzly
Copy link
Contributor

patzly commented Sep 15, 2022

I think @manabu-nakamura is right, the M3 guideline clearly says the redesigned M3 BottomAppBar doesn't have any elevation shadow (like the M3 top app bar, it also has no shadow), only the Surface Level 2 elevation tint.
In order to remove the shadow, I currently have to set app:elevation="0dp" on the BottomAppBar and then programmatically

binding.bottomAppBar.setBackgroundColor(SurfaceColors.SURFACE_2.getColor(context));

to get the correct elevation tint without any shadow.

@manabu-nakamura
Copy link
Contributor Author

Thank you, @patzly. This method can also be used for the navigation bar (BottomNavigationView).
https://m3.material.io/components/navigation-bar/overview

My method can not be used for the navigation bar:

((MaterialShapeDrawable)binding.appBar.getBackground()).setShadowCompatibilityMode(MaterialShapeDrawable.SHADOW_COMPAT_MODE_NEVER);

https://github.com/material-components/material-components-android/blob/master/lib/java/com/google/android/material/bottomappbar/BottomAppBar.java#L355:

materialShapeDrawable.setShadowCompatibilityMode(SHADOW_COMPAT_MODE_ALWAYS);

@imhappi
Copy link
Contributor

imhappi commented Sep 19, 2022

Hi! Sorry, I was out last week

Yes, the designer has confirmed that although there is elevation, there should be no shadow. Changes for this will go out soon

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants