Recyclerview covered by BottomNavigationView

Question

I tried the Google BottomNavigationView support library with Framelayout for my snippets.

Here is 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, its contents are closed by the BottomNavigationView.

I have no idea why this is happening. I am looking at other people's textbook and it works great.

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> 

Answer 1

Here my solution works for me.

I have almost the same layout as you, I moved BottomNavigationView from CoordinatorLayout , because I do not need animation. I aligned the BottomNavigationView to the bottom of the parent and added layout_above to the CoordinatorLayout to have it above the BottomNavigationView , but filling the entire screen.

With this configuration, I fixed the overlap problem, hope this helps 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> 

Answer 2

One of the most useful features of CoordinatorLayout is to avoid viewing.

CoordinatorLayout children’s views can be assigned as edge inserts. Any other child view that you designate as avoiding the same edge will then be adjusted as required.

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> 

Answer 3

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

Here is part of my code, I want 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> 

Answer 4

Set a recycle view or any other view of it, with a height of up to 0dp and a weight of 1. This will force all remaining space to be left.

Answer 5

Give some static height in dp for the BottomNavigationView instead of wrap_content, because your parent i, e Coordinator layout extends the framelayout, by default its behavior puts its child views one on top of the other. That your container with fragments is closed by botomnavigationview.

Answer 6

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

Update your XML layout as shown 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 helps ~

Answer 7

You can add ItemDecorator to your recycler view, which adds some addition. I use 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 } } }) 

Answer 8

The main content that you included in your layout. Give the lower border of the field for viewing in the recycler. Since the recycler view is hidden behind the bottom navigation view

Answer 9

You can add another element to the end of your list and set its invisible or null parameters