[MaterialToolbar] Elevation resets to 0dp in Dark Theme

Description: When using MaterialToolbar with the Theme.MaterialComponents.DayNight.NoActionBar theme, the toolbar’s elevation resets to 0dp during the Night mode. As a result, the background color of toolbar (which it gets from ?attr/colorSurface) is the same as the activity’s background color. So, we cannot differentiate between the toolbar and the activity’s background. This happens because at 0dp elevation, the Dark Theme sets the colorSurface to the same value as the colorBackground.

The expected behavior should be that the Toolbar’s elevation is still 4dp in the Night mode as well.

Please reply if anybody else is having this same problem, or am I the only victim. 😅

Expected behavior:

Material Dark theme

Source code: Here’s the link to file.

As you can see, in the following style, the android:elevation is not set to the Toolbar. And, this style gets applied in Night mode.

<style name="Widget.MaterialComponents.Toolbar.Surface">
    <!-- This line is missing from the style -->
    <item name="android:elevation" tools:ignore="NewApi">@dimen/design_appbar_elevation</item>

    <item name="android:background">?attr/colorSurface</item>
    <item name="titleTextColor">@color/material_on_surface_emphasis_high_type</item>
    <item name="subtitleTextColor">@color/material_on_surface_emphasis_medium</item>
    <!-- Note: this theme overlay will only work if the style is applied directly to a Toolbar. -->
    <item name="android:theme">@style/ThemeOverlay.MaterialComponents.Toolbar.Surface</item>
</style>

Android API version: Android 11 (API 30)

Material Library version: 1.5.0

Device: Samsung Galaxy A50s

[dsn5ft]

Technically Widget.MaterialComponents.Toolbar is the default style, not Widget.MaterialComponents.Toolbar.Primary. The reason why the Widget.MaterialComponents.Toolbar.Surface doesn’t have the elevation is because Surface Toolbars are meant to be flush with the rest of the screen, without a shadow (until scroll which is what the AppBarLayout is for).

[dsn5ft]

Hi @KdB13, thanks for filing your issue. By default the Toolbar styles are meant to not come with an elevation, because a common use case and recommendation is to embed a Toolbar within an AppBarLayout, which will provide the elevation and the background color, as well as more Material behavior like hide-on-scroll or lift-on-scroll. So setting the elevation manually like you found is actually correct, if using a standalone Toolbar.