Material design 3 how to disable elevation overlay?

Question

Android material 3 has introduced elevation overlays(tonal color overlays). Which causes background color change for MaterialCard views if android:elevation is provided or increased and impacts the original background color.

1. How to style material 3 elevation overlays?
2. How to disable material 3 elevation overlays to avoid background color change for card views if elevation is provided to the view.

Documentation doesn't provide much information related to styling or disabling elevation overlays.

https://developer.android.com/jetpack/compose/designsystems/material3#elevation https://m3.material.io/styles/elevation/applying-elevation

Answer 1

As you can find in 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.

It is managed by the library.
Just an example with a MaterialCardView with app:cardElevation="4dp" and app:cardElevation="8dp".

Light mode:

Dark mode:

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>

You can also disable this behavior using in the app theme:

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

Many components in the Material Components Library support elevation overlays in dark theme but you can also apply it in your custom view using using the MaterialShapeDrawable.

For example you can use a LinearLayout:

LinearLayout linearLayout1= findViewById(R.id....);
MaterialShapeDrawable shapeDrawableLL1 = 
MaterialShapeDrawable.createWithElevationOverlay(this, 4.0f );
ViewCompat.setBackground(linearLayout1,shapeDrawableLL1);

LinearLayout linearLayout2= findViewById(R.id....);
MaterialShapeDrawable shapeDrawableLL2 = 
MaterialShapeDrawable.createWithElevationOverlay(this, 16.0f );
ViewCompat.setBackground(linearLayout2,shapeDrawableLL2);