2

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.

enter image description here

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" />
t3chb0t
  • 16,340
  • 13
  • 78
  • 118

1 Answers1

2

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
A. Shevchuk
  • 2,109
  • 14
  • 23
  • 1
    I found the property that sets the color by accident while chaning other colors. It was the parent element's color that leaked, in my case of a CoordinatorLayout. I've changed its background and now this small gap has the same color as other elements. – t3chb0t Jan 14 '21 at 17:27