CODEWITHSUNDEEP
androidxmlandroid-layoutandroid-bottomappbar
Paolo Erdman
Paolo Erdman

Reputation: 331

How to prevent BottomAppBar from overlapping content

I would like to use a CoordinatorLayout to include a BottomAppBar at the bottom of the screen, and to display some content in the remaining space (for example using a ConstraintLayout).

If I add a ConstraintLayout to the CoordinatorLayout, and then I add a button which is placed at the bottom of the ConstraintLayout, the button is covered by the BottomAppBar.

I would like the ConstraintLayout to use up all the vertical space, except for where the BottomAppBar is located, so that the button is not covered.

I tried including app:layout_behavior="@string/appbar_scrolling_view_behavior" in the ConstraintLayout, as suggested on some sites, but it doesn't work. Also, setting app:layout_insetEdge="bottom" in the BottomAppBar, and then setting app:layout_dodgeInsetEdges="bottom" in the ConstraintLayout does not work properly, since the ConstraintLayout then overflows at the top of the screen (but the bottom is not covered anymore).

Below is the xml layout file where the BottomAppBar covers the button. Thank you

    <?xml version="1.0" encoding="utf-8"?>

    <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:id="@+id/coordinatorLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="top"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <Button
        android:id="@+id/myButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

    </androidx.constraintlayout.widget.ConstraintLayout>

    <com.google.android.material.bottomappbar.BottomAppBar
        android:id="@+id/bottomAppBar"
        style="@style/Widget.MaterialComponents.BottomAppBar.Colored"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom" />    
    </androidx.coordinatorlayout.widget.CoordinatorLayout>

The BottomAppBar is covering the button

Upvotes: 10

Views: 858

Answers (1)

Muz
Muz

Reputation: 5980

I haven't found a proper fix, but what works for me is adding a margin to the one overlapping the BottomAppBar,

android:layout_marginBottom="?attr/actionBarSize"

e.g.

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"     
    android:layout_height="match_parent"
    android:layout_gravity="top"
    android:layout_marginBottom="?attr/actionBarSize"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <Button
        android:id="@+id/myButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Upvotes: 2

Related Questions