CODEWITHSUNDEEP
androidandroid-stylesmaterial-components-androiddarkmode
Prs2
Prs2

Reputation: 113

Getting toolBar elevation in dark mode with material styles (PrimarySurface)

According to Material documents you could use "PrimarySurface" styles for components like toolbar and tab layout to switch their background color between color Primary and Surface in light mode and dark mode for android 10 and higher. This is my styles xml file.

<style name="AppTheme" parent="LightCustomFontStyle">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryVariant">@color/colorPrimaryDark</item>
    <item name="colorSecondary">@color/colorAccent</item>

    <item name="toolbarStyle">@style/toolbarStyle</item>

</style>


<style name="toolbarStyle" parent="Widget.MaterialComponents.Toolbar.PrimarySurface"/>

And dark mode elevation is supposed to be displayed with lighter colors but the thing is that colorSurface and colorBackground have the same value(#121212) and so in dark mode if you use these two at the same time, your toolbar won't display any elevation in relation to your activity.

It will look like this but I need it to look like the toolbar in Material docs. Also setting elevation for the toolbar doesn't work.

Is there anyway to get the elevated toolbar(lighter color) with Material and google styles or I should just set the lighter colors manually?

enter image description here

Upvotes: 1

Views: 858

Answers (1)

Gabriele Mariotti
Gabriele Mariotti

Reputation: 364654

You can check the doc:

in a dark theme the elevation overlays are semi-transparent white (colorOnSurface) overlays that are conceptually placed on top of the surface color.

The overlay is based on the colorOnSurface defined in the app theme.
You can change this color adding in the app theme:

<item name="elevationOverlayColor">@color/...</item>

Upvotes: 0

Related Questions