Android material components bottom app bar cut off

Question

I have tried to implement the material components bottom app bar, following these guidelines and doing a refactor to AndroidX + updating my AppTheme. Material components - bottom app bar

So far so good, all working, but the button is cut off in my fragment.

The xml preview however shows this, which seems like everything is fine:

Here is my xml code:

<androidx.coordinatorlayout.widget.CoordinatorLayout 
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"
android:fitsSystemWindows="true">

<!-- Other components and views -->

<com.google.android.material.bottomappbar.BottomAppBar
    android:id="@+id/bottombar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    app:elevation="2dp"
    app:fabAlignmentMode="center"
    app:fabCradleVerticalOffset="10dp"
    app:fabCradleMargin="10dp" />


<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="top|center_horizontal"
    android:adjustViewBounds="true"
    app:layout_anchor="@id/bottombar"
    app:layout_anchorGravity="top|center"
    app:srcCompat="@drawable/marker" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

I even increased the fabCradleMargin and the fabCradleOffset - otherwise the button is completely in the bottom and not at all floating in that half circle as it is supposed to...

anyone got any clues for this? Thanks a lot!

The problem is not with the fab itself but with the layout that is in front of it. Please post that layout XML. — André Sousa, Nov 18 '18 at 00:00

score 1 · Answer 1 · answered Nov 18 '18 at 08:08

So I noticed it has to do with the height of the bottom app bar. If i manually set it to 80dp, the Fab shows as it is supposed to.

I tried around a bit more and noticed this manual height setting is only necessary in fragments. I only placed the bottom app bar in a fragment to test it anyways. So now I implemented it the same way as in the guideline in my MainActivityand then set up a function showFab(Boolean enable) that can then be called in different fragments based on the need.

Works like a charm, if anyone faces the same issues. I guess this might be as it is not supposed to be implemented in a single fragment only.

Android material components bottom app bar cut off

1 Answers1