MaterialButton android:foreground doesn't work on BottomSheetDialogFragment

[slm]

Description:
MaterialButton android:foreground attribute doesn't work inside of a BottomSheetDialogFragment. But It works as expected in Fragment.

Expected behavior:
The foreground of MaterialButton should be shown inside of the BottomSheetDialogFragment.

material button inside of the Fragment

material button inside of BottomSheetDialogFragment.

Source code: The code snippet which is causing this issue

        <com.google.android.material.button.MaterialButton
            android:id="@+id/editButton"
            style="@style/AppTheme.Button.BottomActionButton"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/d1"
            android:foreground="@drawable/ic_arrow_drop_down_24dp"
            android:gravity="center_vertical|center_horizontal"
            android:text="@string/close_app"
            android:textColor="@color/white" />

Minimal sample app repro:

Android API version: Android API version here

Material Library version: 1.5.0, 1.8.0-alpha01

Device: Emulator API 31

[pekingme]

Could you verify if it works in an AppCompatDialogFragment (as the parent of the BottomSheetDialogFregment)? I suspect that this is an issue in AppCompat.

[slm]

I tried different combinations

MaterialButton in AppCompatDialogFragment

MaterialButton in BottomSheetDialogFragment

on layout inspector.

the code of button.

        <com.google.android.material.button.MaterialButton
            android:id="@+id/button_second"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:foreground="@drawable/ic_baseline_5g_24"
            android:foregroundGravity="center"
            android:foregroundTint="@color/white"
            app:layout_constraintBottom_toTopOf="@id/textview_second"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

MaterialButton doesn't work properly when its inside of BottomSheetDialogFragment. It's working well with AppCompatDialogFragment

source code of tests
ButtonForegroundTest.zip

[slm]

is there any update?

[bkonrad-check]

@pekingme ping, having the same bug here, test by @slm is reproducing the behavior

[Javernaut]

I also faced this issue, but in a more interesting way. I'm using version 1.9.0 of the material components library. The issue is still reproducible in the latest alpha versions: 1.10.0-alpha05 and 1.11.0-alpha01.

The ExoPlayer library (from media3) has PlayerControlView. Although it is highly customizable, the default implementation of 'rewind' and 'forward' buttons use exactly android:foreground attribute for displaying circle arrows. Both of them are just Buttons in the layout files, so they will be inflated as MaterialButtons at runtime (while using M3 theme). When PlayerControlView is used in a BottomSheetDialogFragment, those circle arrows are just not visible.

PlayerControlView in Activity:

PlayerControlView in BottomSheetDialogFragment:

[Javernaut]

In a BottomSheetDialogFragment component a Button xml element receives the Widget.Material3.Button.TextButton.Dialog style (or Widget.MaterialComponents.Button.TextButton.Dialog for M2). These styles have singleLine attribute set to true.

When singleLine is set to true and the text alignment is centered (in case of a Button), the TextView's code does a pretty interesting thing: it sets the scrollX to about 500k. The foreground image remains at position 0, which makes it effectively hidden. This is done by the Android framework code, and not by MDC.

Here is a scrollTo call on a custom MaterialButton, which doesn't have any text, but only a 24dp square foreground image.

The regular buttons on Activity use another style by default. This is why they don't have the problem with hidden foreground images.

A bunch of workarounds are possible on clients, surely. But why limiting the Button's line number on a Dialog? Shouldn't this constraint be applied only for action button on an AlertDialog?

UPD:
A simplest solution to the problem (in case there is an access to the layout file editing) is to set android:singleLine="false" for the problematic button.