Material-components-android: [colorSurface] Bug: colorSurface value gets a different value in practice

[AndroidDeveloperLB]

Description: Full description of issue here
Just use this color for example #ff3c454c , take a screenshot, and check the real color you got.

Expected behavior: Screenshots and/or description of expected behavior
To see the exact value: #ff3c454c
See links at the bottom for video.

Source code: The code snippet which is causing this issue. Please consider attaching a minimal sample app that reproduces the issue.
See links at the bottom

Android API version: Android API version here
29

Material Library version: Material Android Library version you are using here (e.g., 1.1.0-alpha07)
implementation 'androidx.appcompat:appcompat:1.1.0'
implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
implementation 'com.google.android.material:material:1.2.0-alpha05'
implementation 'androidx.cardview:cardview:1.0.0'

Device: Device on which the bug was encountered here
Emulator

Also wrote about this here:
https://issuetracker.google.com/issues/152120291
https://stackoverflow.com/q/60800857/878126

[GSala]

I think you are seeing the elevation overlay on top of your color while in dark theme.
I answered you here: https://stackoverflow.com/a/60803916/2153926

[AndroidDeveloperLB]

I choose a color, and I expect it to show this color. A bug.
Also, if I choose red color, it doesn't occur, so it's even inconsistent.
Any effect to the color should be by special cases (example is pressing a button), and not the default one which I expect to see.

[itsandreramon]

I have the same problem. Any updates on this?

[dsn5ft]

See https://stackoverflow.com/a/60803916/2153926 for some more discussion. This is intentional due to the Elevation Overlays that help communicate the elevation hierarchy of a UI in dark theme, since shadows are much less effective in a dark theme app:

https://material.io/develop/android/theming/dark
https://material.io/design/color/dark-theme.html

If you have specific colors and want to disable the overlays, you can add the following to your theme:

<item name="elevationOverlayEnabled">false</item>

[itsandreramon]

I understand what you mean, but read what @AndroidDeveloperLB said. I have the same problem. This is definitely a bug. Let's say that I have two screens with CardViews in them. The material CardView should inherit the ?colorSurface attribute from the app theme to adapt its background color. The problem here is, that on screen A the correct ?colorSurface from the theme is taken, and on screen B, some automatic overlay is put on the CardView.

[dsn5ft]

As long as both Activities have the same theme, or rely on the global app theme with no overrides, then I don't see any reason why 2 MaterialCardViews setup the same way would behave differently. Can you create a GitHub repo with a minimal app that reproduces the bug and attach some screenshots?

[AndroidDeveloperLB]

The point is that there is no way to predict which color we will get.

Suppose that I want to have color X when the MaterialCardView is in normal state, how can I achieve it without ruining everything that's related to how things work (meaning setting elevationOverlayEnabled to false) ?

[dsn5ft]

The purpose of the elevation overlay is to change the color of the card view in its normal state, so the only real way is set elevationOverlayEnabled to false. Also, the overlay will only be applied to the card if the card's background color matches the theme's colorSurface value.

If you want to disable elevation overlays for all cards and no other components, you could do the following:

  # Set in your app theme
  <item name="materialCardViewStyle">@style/Widget.MyApp.CardView</item>

  <style name="Widget.MyApp.CardView" parent="Widget.MaterialComponents.CardView">
    <item name="materialThemeOverlay">@style/ThemeOverlay.MyApp.ElevationOverlayDisabled</item>
  </style>

  <style name="ThemeOverlay.MyApp.ElevationOverlayDisabled" parent="">
    <item name="elevationOverlayEnabled">false</item>
  </style>

Or if you want to disable the elevation overlay for one just card, you can set the following on that card:

app:materialThemeOverlay="@style/ThemeOverlay.MyApp.ElevationOverlayDisabled"

[itsandreramon]

Another point to mention here is, that we define separate background and surface colors in our theme, but yet the surface color gets an overlay, resulting in duplicate brightening of the surface. To counter this, you would have to set the surface color of your theme to be the background color. Not really intuitive.

[dsn5ft]

By default, the background and surface colors that come with our Material themes are the same hex values. I agree that's not very intuitive.

But it sounds like if you are already setting the surface color to a lighter hex value in your dark theme, then you don't really want the elevation overlay functionality - because that's exactly what that functionality is supposed to do for you. And it's dynamic based on elevation, as opposed to one hardcoded surface color.

[AndroidDeveloperLB]

Again, how can I make sure the color will be the way the designer wanted, but without changing anything in the styles and how the cards behave?

[dsn5ft]

As I've already said before, the sole purpose of the elevation overlays is to change the color of the background in dark mode. If you want an exact hex color to appear, you need to disable the elevation overlays.

[AndroidDeveloperLB]

Without disabling it.

[GSala]

Again, how can I make sure the color will be the way the designer wanted, but without changing anything in the styles and how the cards behave?

I'm not really sure what answer you are looking for. The default behavior is to add an overlay on elevated dark theme surfaces. So what you are asking is equivalent to "how can I do something without doing anything".

What's the reason you don't want to disable the overlay if you don't want this overlay?

[AndroidDeveloperLB]

After the addition of the "overlay elevated dark theme there is a color.
I set the color to X, I get Y.
I want to know which X to set to get Y.