material-components / material-components-android

Modular and customizable Material Design UI components for Android
Apache License 2.0
16.34k stars 3.06k forks source link

[BottomAppBar] fabCradleVerticalOffset only affects the position of the FAB, ignores the actual cradle #3649

Open Emplexx opened 12 months ago

Emplexx commented 12 months ago

Description: As the title says, the fabCradleVerticalOffset attribute on BottomAppBar, which I want to be 0dp, only affects the offset of the FAB, while the cradle stays the same as if the offset is set to 12dp (the default value) This is what it looks like: image Edit: I noticed this only happens when the FAB is square, settings FAB's shapeAppearance to a style that would make it fully circular makes the cradle display as expected

Expected behavior: Mockup of the expected behaviour: image

Source code:

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
    <include layout="@layout/content_main" />

    <com.google.android.material.bottomappbar.BottomAppBar
        android:id="@+id/bottomAppBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"

        style="@style/Widget.Material3.BottomAppBar"

        app:elevation="3dp"
        app:addElevationShadow="true"

        app:menu="@menu/menu_main"

        android:layout_gravity="bottom"
        android:minHeight="56dp"
        app:maxButtonHeight="56dp"

        app:fabAlignmentMode="end"
        app:fabAnimationMode="slide"
        app:fabAnchorMode="cradle"
        app:fabCradleMargin="8dp"
        app:fabCradleVerticalOffset="0dp"

        android:fitsSystemWindows="true"
        />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        android:backgroundTint="?attr/colorTertiaryFixedDim"
        app:tint="?attr/colorOnTertiaryFixedVariant"

        app:srcCompat="@drawable/ic_add_24"

        app:layout_anchor="@id/bottomAppBar"
        />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Android API version: My device is running Andriod 12 (SDK 32)

Material Library version: Tested on 1.10.0 and 1.9.0, occurs on both

Device: Google Pixel 3

pekingme commented 12 months ago

Thanks for reporting! The FAB cradle logic in BottomAppBar was not optimized for M3 style or shape, since there's no FAB cradling in M3 BottomAppBar. I'll mark this as a feature request instead.