Recyclerview covered by BottomNavigationView in CoordinatorLayout

Question

I tried Google Support Library BottomNavigationView with a Framelayout for my Fragments .

Here are my code

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

<android.support.design.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"
tools:context="com.bottombarnavigation.MainActivity">

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.AppBarOverlay">

  <include layout="@layout/toolbar"/>

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

<include layout="@layout/content_main" />

<android.support.design.widget.BottomNavigationView
    android:background="#fcfcfc"
    android:id="@+id/bottom_navigation"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    app:menu="@menu/bottom_navigation" />

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

When i populate my Recyclerview inside the Fragment, it's content got covered up by the BottomNavigationView .

I have no idea why this happens. I look through other people tutorial and it works fine.

EDIT Here is my content_main.xml file

<?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout 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:background="@android:color/white"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.bottombarnavigation.MainActivity"
    tools:showIn="@layout/activity_main">


<FrameLayout
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"></FrameLayout>
</RelativeLayout>

Try this [link](http://stackoverflow.com/a/40153446/2891686). I think attributes app:layout_anchor and app:layout_anchorGravity are missed. — Dmitriy Kaluzhin, Dec 17 '16 at 15:02
@DmitriyKaluzhin i just tried it and the results are the same. recyclerview content is still behind bottomnavigationview — EggRollMan, Dec 17 '16 at 15:04

score 27 · Accepted Answer · answered Jan 03 '17 at 21:11

Here my solution, is working for me.

I have almost the same layout as you, I moved the BottomNavigationView out of the CoordinatorLayout as I don't need any animation on it. I've aligned BottomNavigationView to the parent's bottom, and added layout_above to CoordinatorLayout to have it above the BottomNavigationView but filling all the screen.

With this configuration I fixed the overlapping issue, I hope this would help you.

Here you have my layout.

    <RelativeLayout         
            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=".ui.activities.MainActivity">

        <android.support.design.widget.CoordinatorLayout
                android:id="@+id/main_coordinator"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                android:layout_above="@+id/dashboard_navigation">

            <android.support.design.widget.AppBarLayout
                    android:id="@+id/main_appbar"
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    android:elevation="16dp">

                    <android.support.v7.widget.Toolbar
                        android:id="@+id/dashboard_toolbar"
                        android:layout_width="match_parent"
                        android:layout_height="?attr/actionBarSize"
                        android:background="@color/colorPrimary"/>
            </android.support.design.widget.AppBarLayout>

            <FrameLayout
                    android:id="@+id/main_frame_layout"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"/>

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

        <android.support.design.widget.BottomNavigationView
                android:id="@+id/dashboard_navigation"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:background="@color/colorPrimaryDark"
                app:itemTextColor="@color/colorAccent"
                app:menu="@menu/menu_main"/>
    </RelativeLayout>

Wasted so much time to fix this issue, finally such a simple trick fixes the problem. Thanks for sharing... — Rinav, Dec 03 '18 at 11:19

score 6 · Answer 2 · answered Jan 29 '18 at 06:19

6

One of the most useful feature of CoordinatorLayout is view dodging.

Child views of the CoordinatorLayout can be assigned as "insetting" an edge. Any other child view that you assign as dodging that same edge will then be adjusted to suit.

In your case you would do something like the following:

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.AppBarOverlay">

  <include layout="@layout/toolbar"/>

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

<include 
    layout="@layout/content_main"
    app:layout_dodgeInsetEdges="bottom" />   <-- Specifies this view dodges any views that inset the bottom edge

<android.support.design.widget.BottomNavigationView
    android:background="#fcfcfc"
    android:id="@+id/bottom_navigation"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    app:menu="@menu/bottom_navigation"
    app:layout_insetEdge="bottom" />      <-- Specifies that this view insets the bottom edge

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

answered Jan 29 '18 at 06:19

Sound Conception

5,263
5
30
47

11

This solve the bottom overlap issue but causes top overlap by AppBarLayout (even though appbar_scrolling_view_behavior is used) – Desmond Lua May 06 '18 at 12:56
1

@DanieleSegato it's not. Add `app:layout_behavior="@string/hide_bottom_view_on_scroll_behavior"` to your `BottomNavigationView` and check what happens )) – Farid Aug 09 '19 at 16:42
This is the one I was looking for. Additionally: Bottom is the default layout_dodgeInsetEdges of FAB button, if you want to ignore it NONE doesn't work, so make it TOP or something else. – zgr Aug 29 '19 at 07:07
1

Toolbar is missing when applied. Any idea? – kelalaka Apr 23 '20 at 12:36
Worked for me! Had this issue with a BottomAppBar and those settings solved it beautifully. Would you care to link to the source for how you knew to do this? – Matt Mc May 14 '20 at 04:21

score 2 · Answer 3 · edited Sep 24 '17 at 16:30

You can put the RecyclerView and the BottomNavigationView in a LinearLayout, and then put the LinearLayout in the CoordinatorLayout. Set the attribute of RecyclerView as layout_height="0dp" layout_weight="1", and the attribute of the BottomnavigationView as layout_height="wrap_content" layout_gravity="bottom".

Here is part of my code, wish to help you.

<android.support.design.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.v7.widget.Toolbar
            android:id="@+id/manager_main_toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

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

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <android.support.v4.widget.SwipeRefreshLayout
            android:id="@+id/swipe_refresh"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1">

            <android.support.v7.widget.RecyclerView
                android:id="@+id/recycler_view"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />

        </android.support.v4.widget.SwipeRefreshLayout>

        <android.support.design.widget.BottomNavigationView
            android:id="@+id/bottom_nav"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:background="?android:attr/windowBackground" />

    </LinearLayout>

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

If `app:layout_scrollFlags="scroll|enterAlways"` is used for toolbar, it will cause `BottomNavigationView` to be hidden when scroll down. — Desmond Lua, May 06 '18 at 13:03
This doesn't allow Coordinator functions to be used on BottomNavigationView, like moving snackbars and floating actions buttons above it — Carson Holzheimer, Oct 01 '19 at 05:29

score 1 · Answer 4 · answered Dec 17 '16 at 15:41

1

Set the recycle veiw or whatever view its in, height to 0dp and weight 1. This will make it take all the available space left.

answered Dec 17 '16 at 15:41

nebuchadnezzar I

125
1
12

could you put up the content_main layout? – nebuchadnezzar I Dec 17 '16 at 18:06
1

at the include layout line, make it 0dp and weight 1. If that doesn't work then try doing it for the frame layout/relative layout – nebuchadnezzar I Dec 18 '16 at 01:39

score 1 · Answer 5 · answered Mar 27 '17 at 11:14

Move your BottomNavigationView to content_main.xml and place it inside RelativeLayout
Add attribute android:layout_alignParentBottom="true" to BottomNavigationView
Add attribute android:layout_above="@id/bottom_navigation" to container FrameLayout

Update your layout XML's as below:

activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.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"
    tools:context="com.bottombarnavigation.MainActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

      <include layout="@layout/toolbar"/>
    </android.support.design.widget.AppBarLayout>

    <include layout="@layout/content_main" />

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

content_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:background="@android:color/white"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.bottombarnavigation.MainActivity"
    tools:showIn="@layout/activity_main">

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="#fcfcfc"
        app:menu="@menu/bottom_navigation" />

    <FrameLayout
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@id/bottom_navigation" />
</RelativeLayout>

Hope this will help~

score 1 · Answer 6 · answered Apr 17 '17 at 16:51

You can add an ItemDecorator to your recycler view that adds some padding. I'm using Kotlin instead of Java, but the general idea is:

 recyclerView.addItemDecoration(object : RecyclerView.ItemDecoration() {
        override fun getItemOffsets(outRect: Rect?, view: View?, parent: RecyclerView?, state: RecyclerView.State?) {
            // Get the position of the view in the recycler view
            val position = parent?.getChildAdapterPosition(view)
            if (position == null || position == RecyclerView.NO_POSITION) {
                return
            }

            if (position == parent.adapter.itemCount - 1) {
                // Add padding to the last item. You should probably use a @dimen resource.
                outRect?.bottom = 200
            }
        }
    })

Nice solution! Could you explain how to set a margin instead of a padding, if it is possible? — marcolav, Sep 20 '19 at 09:42

score 1 · Answer 7 · answered Mar 30 '20 at 22:51

I have a simple solution, may not be the best, but it does the job, just create a View with height as the height of an appBar (toolbar) with actionBarSize , the height of the appbar and the bottomnav are the same, so you can constrain your recyclerview to the top of this view, doing this it will not be covered by your bottomnav

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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=".ui.pedidos.PedidoFragment">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintBottom_toTopOf="@+id/view3"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <View
        android:id="@+id/view3"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

score 0 · Answer 8 · answered Dec 17 '16 at 15:10

0

Give some static height in dp for BottomNavigationView instead of wrap_content because your parent layout i,e coordinator layout extends framelayout which its default behavior is placing its child views one above the other. Thats y your fragment container is covered up by botomnavigationview.

answered Dec 17 '16 at 15:10

sohan shetty

289
1
16

or give static height for fragment container – sohan shetty Dec 17 '16 at 15:44
or remove your coordinator layout replace with relative layout and add rules to its child views to achieve your ui – sohan shetty Dec 17 '16 at 15:56

score -1 · Answer 9 · answered Sep 24 '17 at 17:43

-1

In the main content that you are included into your layout. Give the margin bottom to the recycler view. Because recycler view is hide behind the bottom navigation view

answered Sep 24 '17 at 17:43

Gaurav sappal

81
1
5

Recyclerview covered by BottomNavigationView in CoordinatorLayout

9 Answers9