[Carousel] MaterialButton wrapped in MaskableFrameLayout doesn't draw its icon

[Emplexx]

Description: MaterialButton does not draw its icon when in a Carousel (see image below) I'm assuming this has something to do with MaskableFrameLayout

Expected behavior: Same layout wrapped in a normal FrameLayout:

Source code:

<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.carousel.MaskableFrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="180dp"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"

    app:shapeAppearance="?attr/shapeAppearanceCornerLarge"

    android:layout_marginStart="2dp"
    android:layout_marginEnd="2dp"
    >

    <ImageView
        android:id="@+id/imageBanner"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"

        tools:src="@tools:sample/backgrounds/scenic"
        />

    <ImageView
        android:id="@+id/imageDim"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        />

    <LinearLayout
        android:id="@+id/layoutContent"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"

        android:gravity="start|bottom"
        >

        <TextView
            android:id="@+id/textTitle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginHorizontal="16dp"

            android:textAppearance="?textAppearanceTitleLarge"
            android:maxLines="2"
            android:ellipsize="end"
            android:lastBaselineToBottomHeight="12dp"
            android:breakStrategy="balanced"
            />

        <TextView
            android:id="@+id/textMeta"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginHorizontal="16dp"
            android:layout_marginTop="-8dp"

            android:textAppearance="?textAppearanceLabelMedium"
            android:maxLines="1"
            android:firstBaselineToTopHeight="16dp"
            android:lastBaselineToBottomHeight="12dp"
            />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:layout_marginHorizontal="12dp"
            android:layout_marginBottom="12dp"
            >

            <com.google.android.material.button.MaterialButton
                android:id="@+id/buttonLike"
                android:layout_width="48dp"
                android:layout_height="48dp"

                android:insetLeft="4dp"
                android:insetRight="4dp"

                style="@style/Widget.Material3.Button.TonalButton.Icon"

                app:iconSize="18dp"
                android:paddingStart="11dp"
                android:paddingEnd="11dp"
                android:checkable="true"

                app:icon="@drawable/ic_thumb_up_24"
                />
            <com.google.android.material.button.MaterialButton
                android:id="@+id/buttonDislike"
                android:layout_width="48dp"
                android:layout_height="48dp"

                android:insetLeft="4dp"
                android:insetRight="4dp"

                style="@style/Widget.Material3.Button.TonalButton.Icon"

                app:iconSize="18dp"
                android:paddingStart="11dp"
                android:paddingEnd="11dp"
                android:checkable="true"

                app:icon="@drawable/ic_thumb_down_24"
                />

            <TextView
                android:id="@+id/textScore"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="4dp"

                android:textAppearance="?textAppearanceLabelMedium"

                tools:text="+400"
                />

        </LinearLayout>

    </LinearLayout>

</com.google.android.material.carousel.MaskableFrameLayout>

Android API version: 32

Material Library version: 1.12.0-alpha02, 1.11.0-rc01

Device: Pixel 3

To help us triage faster, please check to make sure you are using the latest version of the library.

We also happily accept pull requests.

[dsn5ft]

cc @hunterstich @imhappi

[hunterstich]

Hey @Emplexx. Thanks for filing this issue! I just made a sample and can reproduce this in our catalog app. I'm not sure what the issue is yet but am looking into the cause.