[Chip] Elevation overlay not applied for chips in the bottom sheet dialog for dark theme

[interblitz]

Description:

Made simple test project with dark theme, bottom sheet dialog and chips. On the first screenshot chips at the main activity are lighter then parent layout, but on the second one chips are darker. It seems to be a bug or I've missed something?

Expected behavior:

Background of chips at the bottom sheet dialog should be lighter.

Source code:

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

</resources>

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#fff5f5f5</color>
    <color name="colorPrimaryDark">@android:color/black</color>
    <color name="colorAccent">#ff80cbc4</color>
</resources>

Main activity layout

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"

        android:orientation="vertical"
        >

        <com.google.android.material.button.MaterialButton
            android:id="@+id/dialogButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"

            android:text="Bottom sheet dialog"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Linear layout" />

        <include layout="@layout/activity_main_item"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Material card" />

        <com.google.android.material.card.MaterialCardView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            >

            <include layout="@layout/activity_main_item"/>

        </com.google.android.material.card.MaterialCardView>

    </LinearLayout>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

activity_main_item layout

<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android"
    >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"

        android:orientation="horizontal"
        >

        <com.google.android.material.chip.Chip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Not styled1"
            />

        <com.google.android.material.chip.Chip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Entry"
            style="@style/Widget.MaterialComponents.Chip.Entry"
            />

        <com.google.android.material.chip.Chip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Action"
            style="@style/Widget.MaterialComponents.Chip.Action"
            />

        <com.google.android.material.chip.Chip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Filter"
            style="@style/Widget.MaterialComponents.Chip.Filter"
            />

    </LinearLayout>

</merge>

Main activity code:

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        MaterialButton dialogButton = findViewById(R.id.dialogButton);
        dialogButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                BottomSheetDialog dialog = new BottomSheetDialog(MainActivity.this);
                dialog.setContentView(R.layout.activity_main);

                dialog.setCancelable(true);
                dialog.show();
            }
        });

        AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES);
    }
}

Android API version: 22 - 29

Material Library version: 1.2.1

Device: Emulator

[dsn5ft]

Hi @interblitz, it looks like this is due to the colorSurface/colorOnSurface compositing that Chip does to arrive at its default background color, as per the Material spec:

• https://github.com/material-components/material-components-android/blob/7c6dc5f70bea54cb32bd116a0a242021ca0eb99e/lib/java/com/google/android/material/chip/ChipDrawable.java#L1044-L1053
• https://github.com/material-components/material-components-android/blob/7c6dc5f70bea54cb32bd116a0a242021ca0eb99e/lib/java/com/google/android/material/chip/res/values/styles.xml#L49-L50
• https://github.com/material-components/material-components-android/blob/7c6dc5f70bea54cb32bd116a0a242021ca0eb99e/lib/java/com/google/android/material/chip/res/color/mtrl_chip_surface_color.xml#L20
• https://github.com/material-components/material-components-android/blob/7c6dc5f70bea54cb32bd116a0a242021ca0eb99e/lib/java/com/google/android/material/chip/res/color/mtrl_chip_background_color.xml#L19-L24

Elevation overlays are only applied to UI elements with a background that matches the colorSurface hex value (ignoring alpha), and in this case I guess the final blended colorSurface/colorOnSurface value doesn't match colorSurface, so by default the overlay is not applied.

One possible workaround for dark theme is to set app:chipBackgroundColor="@empty" on your Chip and then give it some android:elevation. That will result in the elevation overlay being applied in dark theme. For example:

[interblitz]

Hi @dsn5ft,

Thank you for clarifications. I have one more related issue :) When chips are placed in the bottom sheet layout (linear layout with layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior") an elevation applied unexpectedly (see chips at the bottom). This confuses chips usage...

All layouts and java code is the same, only main activity layout changed, layout_bottom_sheet added.

 <LinearLayout
        android:id="@+id/layout_bottom_sheet"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"

        android:minHeight="35dp"
        android:orientation="vertical"
        app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior"
        app:behavior_peekHeight="100dp"
        app:behavior_hideable="false"
        >

        <include layout="@layout/activity_main_item"/>

    </LinearLayout>

Main activity layout:

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"

        android:orientation="vertical"
        >

        <com.google.android.material.button.MaterialButton
            android:id="@+id/dialogButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"

            android:text="Bottom sheet dialog"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Linear layout" />

        <include layout="@layout/activity_main_item"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Material card" />

        <com.google.android.material.card.MaterialCardView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            >

            <include layout="@layout/activity_main_item"/>

        </com.google.android.material.card.MaterialCardView>

    </LinearLayout>

    <LinearLayout
        android:id="@+id/layout_bottom_sheet"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"

        android:minHeight="35dp"
        android:orientation="vertical"
        app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior"
        app:behavior_peekHeight="100dp"
        app:behavior_hideable="false"
        >

        <include layout="@layout/activity_main_item"/>

    </LinearLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

[dsn5ft]

No problem.

Re: your related issue, I'm not following. Looking at your screenshot, I don't see what you mean by "an elevation applied unexpectedly". Can you explain more?

[interblitz]

Due to mtrl_chip_background_color selector expected behavior of chips is skipping parents elevation. But when chips are placed in layout with app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior" their background suddenly becomes lighter, so my guess is elevation overlay is applied. This is a bit confusing. That what I mean.

[dsn5ft]

I'm sorry but I'm still not really following. When I compare the background colors of the chips in your first screenshot, I see that the "Not styled1" chip's background is rgb(60, 60, 60) and the other chip ("Entry", "Action", etc.) backgrounds are rgb(42, 42, 42), regardless of whether they're in the "Linear layout", "Material card", or bottom sheet layout. So to me it doesn't seem like the chips are lighter within the layout that has app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior".

[interblitz]

You are right, color picker says background colors are same. I'm really sorry for wasting your time.