Recyclerview covered by BottomNavigationView in CoordinatorLayout
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.
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>
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>
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>