7

I am using bottom app bar inside the coordinator layout. the rest of the content is coming from a fragment. the fragment content is being covered by the bottom app bar

Because I am using bottomAppBar it has to be inside a CoordintorLayout and all the children have to be inside of it as well. All layout above the BottomAppBar should fill the space reminding, but if I do so the views at the bottoms get covered. how do I ensure the view do not overlap with BottomAppBar

<androidx.drawerlayout.widget.DrawerLayout
android:id="@+id/drawerLayout_main"
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"
tools:context=".main.MainActivity">

<androidx.coordinatorlayout.widget.CoordinatorLayout
    android:id="@+id/coordinatorLayout"
    android:layout_width="0dp"
    android:layout_height="wrap_content">

    </androidx.constraintlayout.widget.ConstraintLayout>

    <fragment
        android:id="@+id/fragment_main_navHost"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:defaultNavHost="true"
        android:layout_gravity="top"
        app:navGraph="@navigation/nav_graph"/>


    <com.google.android.material.bottomappbar.BottomAppBar
        android:id="@+id/bottomAppBar_main"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        app:fabAlignmentMode="end"
        app:fabCradleMargin="4dp"
        app:hideOnScroll="true"/>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

<com.google.android.material.navigation.NavigationView
    android:id="@+id/navView_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    app:headerLayout="@layout/nav_header_layout"
    app:menu="@menu/main_navigation"/>

What I need is to ensure whatever content is replacing the fragment should not be covered by the bottom app bar and it should use all the white space not being used the bottom app bar. I another world the content should be above it while using rest the white space and still be inside the coordinator layout.

Mustafa ALMulla
  • 870
  • 2
  • 10
  • 23
  • You're using `app:hideOnScroll="true"`, so it certainly seems like you are expecting the Fragment content to go under the `BottomAppBar`'s area. – ianhanniballake Jan 07 '19 at 03:43
  • Thank you @ianhanniballake for your comment. In some cases I do expect it to go under the bottomAppBar, in other cases not. So I guess I have to handle this from the activity not the layout. I will give it a try. Thanks again – Mustafa ALMulla Jan 07 '19 at 03:47
  • Hi @ianhanniballake I have done the change and removed the app:hideOnScroll="true" and it did work and I tried to set to false and still I have the same result. part of the view is still hidden behind the bar. any advice – Mustafa ALMulla Jan 07 '19 at 16:29

3 Answers3

2

Just add margin to your fragment container :

  <fragment
    android:id="@+id/fragment_main_navHost"
    android:name="androidx.navigation.fragment.NavHostFragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginBottom="{bottom_navigation_height}"
    android:layout_marginTop="{tool_bar_height}"
    app:defaultNavHost="true"
    android:layout_gravity="top"
    app:navGraph="@navigation/nav_graph"/>
Marzi Heidari
  • 2,660
  • 4
  • 25
  • 57
1

According to the CoordinatorLayout Documentation, edges where a View in CoordinatorLayout expects to overlap with another View can be specified with layout_dodgeInsetEdges=”bottom”. So if your fragment is being overlapped by your BottomAppBar, you add this attribute to the fragment. You must also specify that you wish to dodge the BottomAppBar. This is done by adding layout_insetEdge=”bottom” to it.

To be more specific for your case, do the following:

Add app:layout_dodgeInsetEdges="bottom" to the <fragment> like so:

<fragment
    app:layout_dodgeInsetEdges="bottom" <--- THIS
    android:id="@+id/fragment_main_navHost"
    android:name="androidx.navigation.fragment.NavHostFragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:defaultNavHost="true"
    android:layout_gravity="top"
    app:navGraph="@navigation/nav_graph"/>

Add app:layout_insetEdge="bottom" to BottomAppBar. (Note that this step my be unnecessary if BottomAppBar applies this inset by default so try also without it): 

<com.google.android.material.bottomappbar.BottomAppBar
    app:layout_insetEdge="bottom" <---- THIS
    android:id="@+id/bottomAppBar_main"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    app:fabAlignmentMode="end"
    app:fabCradleMargin="4dp"
    app:hideOnScroll="true"/>

There's a really good article that shows examples with animated giffs that I highly recommend you to check out.

Nimrod Dayan
  • 3,050
  • 4
  • 29
  • 45
B. Plüster
  • 564
  • 3
  • 11
0

Try adding app:layout_behavior="@string/appbar_scrolling_view_behavior" to the fragment.

Charan M
  • 489
  • 3
  • 7