Bottom navigation overlapping recycler view contents in android - android

I am using bottom navigation view and displaying three tabs,In one of the tab i have added recycler view, but the contents are overlapped by bottom navigation.Not able to scroll recycler view.Is there any way that i can hide the bottom navigation when i scroll item on recycler view.
<?xml version="1.0" encoding="utf-8"?> <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:fab="http://schemas.android.com/apk/res-auto"
xmlns:sv="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:context=".activity.patient.PatientsActivity">
<include
layout="#layout/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<RelativeLayout
android:id="#+id/asd"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="60dp"
android:orientation="vertical">
<co.moonmonkeylabs.realmrecyclerview.RealmRecyclerView
android:id="#+id/appointmentsList"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:rrvEmptyLayoutId="#layout/empty_view"
app:rrvLayoutType="LinearLayout"
app:rrvSwipeToDelete="true" />
<android.support.design.widget.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
app:itemBackground="#color/white"
app:layout_behavior=".BottomNavigationBehavior"
app:menu="#menu/bottom_navigation_main" />
</RelativeLayout>
</android.support.design.widget.CoordinatorLayout> </android.support.v4.widget.DrawerLayout>
image

First i think you could add an:
android:layout_above="#id/bottom_navigation"
To the Recyclerview
For the Scrolling part i would suggest looking for a ScrollingBehaviour
like in this question:
How to scroll up/down of bottom bar on scrolling of RecyclerView

add NestedScrollView just before RecyclerView this may work like above
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<co.moonmonkeylabs.realmrecyclerview.RealmRecyclerView
android:id="#+id/appointmentsList"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:rrvEmptyLayoutId="#layout/empty_view"
app:rrvLayoutType="LinearLayout"
app:rrvSwipeToDelete="true" />
</android.support.v4.widget.NestedScrollView>

Related

How to hide BottomNavigationView when recylerview scrolls up

Hello there I want to hide bottom nav when recylerview scrolls up but not when the recylerview is scrolled down and when the recylerview stop I want the bottom nav to appear
also like a slide animation like how a bottom sheet has
I have one main activity in which I have given bottom nav and a fragment container as an Include the fragment container contains all of my fragments
Here is my code
Note if anyone wants more reference of the code please tell me i will
update the question
ok i have used app:layout_behavior="#string/hide_bottom_view_on_scroll_behavior" in bootom nav xml but its not working
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/black"
tools:context=".MainActivity">
<include
android:id="#+id/fragment_container"
layout="#layout/fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<include
android:id="#+id/bottom_navigation_view"
layout="#layout/bottom_navigation_view" />
</RelativeLayout>
bottom_nav_view.xml
<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.bottomnavigation.BottomNavigationView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/bottom_navigation_view_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginStart="30dp"
android:layout_marginEnd="30dp"
android:layout_marginBottom="10dp"
android:background="#drawable/bottom_navigation_style"
android:elevation="5dp"
app:itemIconSize="30dp"
app:itemIconTint="#color/white"
app:itemRippleColor="#android:color/transparent"
app:labelVisibilityMode="unlabeled"
app:layout_behavior="#string/hide_bottom_view_on_scroll_behavior"
app:menu="#menu/bottom_navigation">
</com.google.android.material.bottomnavigation.BottomNavigationView>
You need to use CoordinatorLayout to achieve this "scroll-hide" feature:
<androidx.coordinatorlayout.widget.CoordinatorLayout //root Layout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.core.widget.NestedScrollView //or RecyclerView
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/main_linearLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" />
</androidx.core.widget.NestedScrollView>
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/main_bottomNavigationView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#android:color/white"
app:layout_behavior="com.google.android.material.behavior.HideBottomViewOnScrollBehavior"
app:menu="#menu/main" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Demo: https://youtu.be/3Gpeg6M82n4

Recyclerview inside coordinator layout not scrolls

I have following activity
<?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:id="#+id/coordinator">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorWhite"
android:id="#+id/catalog_view">
<View
android:layout_width="match_parent"
android:layout_height="1dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginTop="79dp"
android:background="#color/gray238"
android:id="#+id/top_separator"/>
..
</android.support.constraint.ConstraintLayout>
<include layout="#layout/check_view_sheet"/>
</android.support.design.widget.CoordinatorLayout>
check_view_sheet
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/check_bottom_sheet"
android:layout_width="match_parent"
android:layout_height="500dp"
android:background="#color/colorWhite"
android:orientation="vertical"
app:behavior_hideable="false"
app:behavior_peekHeight="80dp"
app:layout_behavior="android.support.design.widget.BottomSheetBehavior">
<FrameLayout
app:layout_behavior="android.support.design.widget.BottomSheetBehavior"
android:layout_width="400dp"
android:layout_height="235dp"
android:id="#+id/catalog_view_check_fragment"
/>
<TotalView.TotalView
android:layout_width="match_parent"
android:layout_height="#dimen/totalViewHeight"
android:id="#+id/catalog_total_view" />
</LinearLayout>
View inside framelayout
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/check_recycler_view"
android:paddingBottom="#dimen/checkBottomPadding"
android:clipToPadding="false"
app:layout_behavior="android.support.design.widget.BottomSheetBehavior">
</android.support.v7.widget.RecyclerView>
</android.support.constraint.ConstraintLayout>
The problem is that recycler view is not scrolling.
I tried wrapping framelayout in nestedScrollView, but performance of scroll is horrible - its very laggy and it hides sheet when I try to scroll recycler view down.
How canto fix this ?
Because you are trying do nested scrolling, bottom sheet has scrollable behavior.
try this in RecyclerView
android:nestedScrollingEnabled="true"
if scrolling it in bottom sheet is really mandatory otherwise try by setting it to "false".

Fragment is not scrolling inside viewpager

I am using ViewPager to show 4 different fragments.
The component tree of my activity:
|_FrameLayout
|_ LinearLayout (Vertical)
Toolbar
ViewPager
TabLayout
RelativeLayout
And this is the component tree of my first fragment:
ScrollView
|_LinearLayout(Vertical)
LinearLayout(Horizontal)
|_LinearLayout(Horizontal)
|_CardView
TextView
LinearLayout(Horizontal)
LinearLayout(Horizontal)
But the Fragment inside the Viewpager is not scrolling when the device is in portrait mode. When in landscape mode, it scrolls a bit (so the scroll is working) but views inside the cardview are shrinked. Is CardView is responsible for all this (As it is scroll-able)? How to fix this ? Please help.
You should replace your ScrollView with a NestedScrollView that helps you with nested scrolling
Wrap both the viewpager.xml and fragment.xml in the scroll view like below:
viewpager.xml
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.view.ViewPager
android:id="#+id/view_pager_id"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v4.view.ViewPager>
</RelativeLayout>
</ScrollView>
fragment.xml
<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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:fillViewport="true">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Text"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<!-- Along with other widgets -->
</android.support.constraint.ConstraintLayout>
</ScrollView>
activity.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"
tools:context=".MyActivity">
<RelativeLayout
android:id="#+id/layout1"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- Top App Bar -->
<RelativeLayout
android:id="#+id/layout2"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:elevation="0dp">
<!-- Top Action Bar -->
<include layout="#layout/action_bar" />
<!-- Top Tabs -->
<include layout="#layout/top_tabs" />
</android.support.design.widget.AppBarLayout>
</RelativeLayout>
<!-- Middle Section (Body) -->
<RelativeLayout
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/layout2">
<include layout="#layout/viewpager" />
</RelativeLayout>
<!-- Bottom Navigation View -->
<include layout="#layout/bottom_navigation_view" />
</RelativeLayout>
</android.support.design.widget.CoordinatorLayout>

The Button Bar Overlapping with recycler view issue

I am trying to add a button bar at the bottom of a screen which already contains a recycler view. When i do so the button bar overlaps the last item of the recycler view and if i try to click on the button bar the item under it in the recycler view gets clicked. Here is my 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.example.owaisnizami.navigation.MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_main"/>
<LinearLayout
android:id="#+id/buttonBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
style="#android:style/ButtonBar"
android:background="#F44336"
android:layout_gravity="bottom|end">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="30sp"
android:layout_gravity="center"
android:text="Advertisements Here"
android:textColor="#FFFFFF"/>
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
content_main contains the recycler view and here is its xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:showIn="#layout/activity_main"
tools:context=".MainActivity">
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scrollbars="vertical"/>
</RelativeLayout>
I have had and have now solved this problem and the solution is not as complicated as I was thinking.
In the layout in content_main that holds your RecyclerView, set
android:layout_marginBottom="<height-of-your-button-bar>"
Set this for the RelativeLayout which holds your RecyclerView, not your RecyclerView itself.
Now, when you scroll to the bottom of your list it will continue to scroll so that the last item is not hidden by the button bar.
Looking at your layout, you may need to identify the height of your button bar so that you can set this margin accordingly.
Hope this helps.
Full disclosure, I used this solution with a NestedScrollView instead of a RelativeLayout though don't know why it wouldn't work - also, if you switch to a NestedScrollView your CollapsableToolbar will be able to collapse.
Move your button bar layout inside your content_main as below
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:showIn="#layout/activity_main"
tools:context=".MainActivity">
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/buttonBar"
android:scrollbars="vertical"/>
<LinearLayout
android:id="#+id/buttonBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
style="#android:style/ButtonBar"
android:background="#F44336"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="30sp"
android:layout_gravity="center"
android:text="Advertisements Here"
android:textColor="#FFFFFF"/>
</LinearLayout>
</RelativeLayout>
This way you can be sure that recyclerView ends before button bar layout

Fragment from View Pager hiding behind Tab Bar

I am having an issue with a Tab bar and ViewPager in my android project. What the app does it has an activity which hosts a tab layout and then has 2 fragment which represents each of the tabs.
When the activity is opened it posts to an API to get some data and puts the data into a data adapter for a Recycler View and Card layout in each of the fragments.
The recycler view will contain 3 items but only 2 are being shown as the first is being hidden under the toolbar and/or the tab bar as shown in the screenshot below.
Below is the layout file of my activity
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context="com.BoardiesITSolution.CritiMonApp.AppsActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<include layout="#layout/toolbar" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="fixed"
app:tabGravity="fill" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<!--app:layout_behaviour="#string/appbar_scrolling_view_behaviour" />-->
</android.support.design.widget.CoordinatorLayout>
Below is the layout of the fragment
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<view
android:id="#+id/recycler_view"
class="android.support.v7.widget.RecyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true" />
</LinearLayout>
Below is the layout for card layout
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:cardview="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="80dp"
android:layout_margin="8dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="80dp"
android:elevation="5dp">
<TextView
android:id="#+id/txtApplicationName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:maxLines="3"
android:padding="8dp"
android:textColor="#222"
android:textSize="15dp"
android:layout_centerInParent="true"/>
</RelativeLayout>
</android.support.v7.widget.CardView>
Below is the screenshot as mentioned above which shows the problem. I've pixelated some of the text but it should you what I mean, there should be 3 items but the first item is hiding underneath the tab bar.
Edit: As suggested below by #smeet and #hardik, adding the scroll behavior app:layout_behavior="#string/appbar_scrolling_view_behavior" should fix the problem while preserving the scroll behavior. Scroll behaviors only work if the view is a direct child of the coordinator layout.
Old Answer
Just Wrap your appbar layout and viewpager in a vertical LinearLayout
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context="com.BoardiesITSolution.CritiMonApp.AppsActivity">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
//appbar layout
//viewpager
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
From the docs, CoordinatorLayout is a super-powered FrameLayout. So you can expect the typical "lay views on top of other views" FrameLayout behavior.
Adding :
app:layout_behavior="#string/appbar_scrolling_view_behavior"
in ViewPager resolved issue in my case.
if we will wrap app bar layout with linear layout than toolbar will not hide when you scroll so accepted answer might not help you if you want to hide toolbar when you scroll.
Smeet did it right way but not explained! here is full example with explanation.
add app namspace to CoordinatorLayout
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:app="http://schemas.android.com/apk/res-auto"
......
>
and just add below line in your ViewPager
app:layout_behavior="#string/appbar_scrolling_view_behavior"
complete xml will be as below
<?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.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay" />
<android.support.design.widget.TabLayout
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewPager"
android:layout_width="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_height="match_parent" />
</android.support.design.widget.CoordinatorLayout>

Categories

Resources