Grey square shown on focused FAB on API 22

Step 1: Are you in the right place?

• I have verified there are no duplicate active or recent bugs, questions, or requests
• I have verified that I am using the latest version of the library.

Step 2: Describe your environment

• Library version: 3.2.0
• Android version: 5.1.1
• Support library version: 1.3.0 (androidx appcompat)
• Device brand: Nexus 6 Emulator (tried on one other device)
• Device model: Nexus 6 Emulator

Step 3: Describe the problem:

Steps to reproduce:

Open speed dial in basic app on API 22

Observed Results:

A grey square is visible overlaid on top of the first fab menu item (and on the main fab when opening, and any fab when focused or tapped)

Expected Results:

Look the same as e.g. API 23, with no squares

Relevant Code:

public class MainActivity extends AppCompatActivity {

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

        SpeedDialView speedDialView = findViewById(R.id.speedDial);
        speedDialView.addActionItem(new SpeedDialActionItem.Builder(R.id.first, getDrawable(R.drawable.ic_launcher_background)).create());
        speedDialView.addActionItem(new SpeedDialActionItem.Builder(R.id.second, getDrawable(R.drawable.ic_launcher_background)).create());
    }
}

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <com.leinardi.android.speeddial.SpeedDialView
        android:id="@+id/speedDial"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:sdMainFabClosedSrc="@android:drawable/btn_plus" />

</androidx.constraintlayout.widget.ConstraintLayout>

As a side note, I noticed this while trying to debug why the first FAB item was focused after updating to 3.2.0 before realizing that this was intentional: https://github.com/leinardi/FloatingActionButtonSpeedDial/issues/149 I understand the value of having the first button focused, but the difference in color looks inconsistent. Is it possible to turn off the color change for the focus state? I don’t see an easy way to manually specify the selector.

API 22:

API 23:

[leinardi]

I have opened an issue upstream, please consider giving it a 👍 for visibility: https://github.com/material-components/material-components-android/issues/2617

[leinardi]

I’m opening an issue on the material component library, I can reproduce the issue with just this simple layout:

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:clipChildren="false"
        android:clipToPadding="false"
        android:layout_gravity="center">

        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical|end"
            app:fabSize="mini"
            app:srcCompat="@drawable/ic_add_white_24dp"
            app:tint="@null"
            app:useCompatPadding="true" />
    </LinearLayout>