Change the background color below the floating action button that is a part of a BottomAppBar

Question

I'd like to have a semi-transparent floating-action-button that is a part of a bottom-app-bar. I can tune all colors but the one underneath the FAB itself.

I guess it belongs to the bottom-app-bar but I cannot figure out how to change it. Do you know how to do it? It doesn't fit my color scheme as it's a darker black then the other blacks. There's also some strage whity circle. If possible I'd like to get rid of this one too.

This is their code:

    <com.google.android.material.bottomappbar.BottomAppBar
        android:id="@+id/bottomAppBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        app:menu="@menu/bottom_app_bar" />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/commit_FloatingActionButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:backgroundTint="#5A396283"
        app:layout_anchor="@id/bottomAppBar"
        app:srcCompat="@drawable/ic_round_check_24"
        app:tint="#D3D3D3" />

Answer 1

You can do it simply by:

1. Set android:backgroundTint="@android:color/transparent" on the FloatingActionButton
2. Create a custom drawable as a separate resource file containing background (which you obviously can control) and checkmark drawable.
3. set app:srcCompat value to point on newly created custom resource