[FIXED] Android - Chip background color changes when used with BottomSheet Material 3

Issue

This is my chip XML code:

<com.google.android.material.chip.Chip
    android:id="@+id/income_type_chip"
    android:layout_width="0dp"
    style="@style/Widget.Material3.Chip.Filter"
    android:layout_height="wrap_content"
    android:layout_marginTop="24dp"
    android:layout_marginEnd="16dp"
    android:layout_marginStart="16dp"
    android:checkable="true"
    android:enabled="true"
    android:text="@string/income_label"
    app:layout_constraintEnd_toStartOf="@+id/expense_type_chip"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintHorizontal_chainStyle="spread_inside"
    app:layout_constraintStart_toEndOf="@+id/category_type_label"
    app:layout_constraintTop_toBottomOf="@+id/category_name_input_layout" />

When I use the same code outside the modal bottom sheet everything is normal:

But when I used it inside bottomsheet it's background color (when unchecked) changes to something else:

I have tried to set chips background to custom selector drawable and even I override some color styles in the chip themes styles as listed here in the Chip's guideline for MDC android. But nothing worked.

I have done these customization in bottomsheet.

    <style name="ModalBottomSheetDialog" parent="Widget.Material3.BottomSheet.Modal">
        <item name="backgroundTint">#fff</item>
    </style>

    <style name="CustomBottomSheetDialogTheme" parent="ThemeOverlay.Material3.BottomSheetDialog">
        <item name="bottomSheetStyle">@style/ModalBottomSheetDialog</item>
    </style>

In the theme

    <style name="Theme.MoneyMonitor" parent="Theme.Material3.Light.NoActionBar">
...
        <item name="bottomSheetDialogTheme">@style/CustomBottomSheetDialogTheme</item>
    </style>

else nothing has been customized.

I want a the background color of the chip when used outside the bottomsheet to be in the chip when used inside bottomsheet.

Solution

I want to thank to DrHowdyDoo. His answer in this question saved me Why the background color of the top bar changes automatically not as I set it? Material Design 3

This is actually has to do with elevation. Now I come to know why some elevated components get some other tint of primaryColor. Material 3 overlays tint of primary color on elevated components such as BottomSheets, toolbar etc based on their elevation. Thus since my chip is on my bottom sheet which is elevated from the surface so my chips are also getting elevated. So to disable this overlay feature on the specific components do the following.

In style.xml- just disable elevationOverlayEnabled in the desired components' overlay theme. Here I am disabling it for filter chips.

    <style name="Widget.App.Chip.Filter" parent="Widget.Material3.Chip.Filter">
        <item name="materialThemeOverlay">@style/ThemeOverlay.App.Chip</item>
    </style>

    <style name="ThemeOverlay.App.Chip" parent="">
        <item name="elevationOverlayEnabled">false</item>
    </style>

In the chip layout (or in the component you want to disable this)

        <com.google.android.material.chip.Chip
            android:id="@+id/expense_type_chip"
            style="@style/Widget.App.Chip.Filter"
            .... />

Answered By - Prem Thakur
Answer Checked By - David Marino (JavaFixing Volunteer)