CODEWITHSUNDEEP
androidandroid-layoutfloating-action-buttonandroid-bottomappbar
Benjoyo
Benjoyo

Reputation: 423

FloatingActionButton too high over BottomAppBar

I added a FAB to a BottomAppBar from API 28 like in the XML below. The problem is that it floats too high above the bottom bar instead of sitting in the cradle. There is no change if I set app:fabCradleVerticalOffset to 0dp.

enter image description here

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout android:paddingTop="30dp"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <android.support.design.bottomappbar.BottomAppBar
        android:id="@+id/bottomAppBar"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:layout_gravity="bottom"
        app:backgroundTint="@android:color/white"   
        app:fabAlignmentMode="center" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fabIncrement"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_exposure_plus_1_black_24dp"
        app:backgroundTint="@color/colorPrimary"
        app:fabSize="normal"
        app:layout_anchor="@id/bottomAppBar" />

</android.support.design.widget.CoordinatorLayout>

Upvotes: 3

Views: 2065

Answers (1)

Ben P.
Ben P.

Reputation: 54204

This appears to be a bug (or maybe a feature) of BottomAppBar. The vertical offset of the FAB is dependent on the height of the BottomAppBar; if you set layout_height to be 48dp instead, it will sit very nicely in the cradle. On the other hand, if you set the height to be 200dp you'll see that the FAB is even farther away.

Additionally (and unfortunately), app:fabCradleVerticalOffset must be a positive value. If you try to use a negative value (to push the FAB down), the app will crash when it runs.

I don't see any public API that will let you solve this. Instead you'll just have to use a smaller height for your BottomAppBar. Perhaps you'll be able to stitch two views together to simulate a taller bar.

Upvotes: 3

Related Questions