Abstract
Trying something similar to Google Maps layout behaviour
Detail
I'm trying to implement a BottomSheetBehavior that has a
ViewGroup (any) -> ViewPager(Fragments) -> RecyclerView (Vertical) -> Multiple horizontally scrollable RecyclerView / or any scrollable view.
The horizontally scrollable child RecyclerViews are part of ItemHolders of parent RecyclerView (vertically scrollable)
<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=".bottom.BottomSheetActivity">
<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_bottom_sheet" />
<android.support.v4.widget.NestedScrollView
android:id="#+id/frame_bottom"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:behavior_hideable="false"
app:behavior_peekHeight="240dp"
android:background="#android:color/white"
app:layout_behavior="android.support.design.widget.BottomSheetBehavior">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView_bottom"
android:layout_width="match_parent"
android:nestedScrollingEnabled="true"
android:layout_height="match_parent"/>
</FrameLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
Problem
When a user touches inside the horizontal scrollable element & tries to scroll vertically, the parent RecyclerView is not scrolling up/down.
When the user touches outside the horizontal scrollable element & tries to scroll vertically, the parent RecyclerView is WORKING as usual.
This problem happens only when using BottomSheetBehavior, without BottomSheetBehavior, it works perfectly fine.
I tried with a FrameLayout instead of a NestedScrollView, also tried directly putting ReyclerView as the BottomSheetBehavior viewgroup. It didn't work.
So, how do I pass the vertical scroll touch events from a horizontally scrollable reyclerView which is part of a viewHolder to the parent RecyclerView when using a BottomSheetBehavior?
Related
I have a view that acts like BottomSheetBehavior and this view has ViewPager2 inside. Each ViewPager2's page is a vertical RecyclerView. The issue is that BottomSheet doesn't scroll down when current vertical RecyclerView (which is a page of ViewPager) can't scroll vertically anymore. Everything works file when instead of ViePager I have only one vertical RecyclerView.
The temporary solution is to wrap ViewPager with NestedScrollView but it's horrible for performance and has it's own bugs.
The original layout:
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.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:id="#+id/core"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#C7C7C7"
tools:context=".MainActivity">
<LinearLayout
android:id="#+id/bottom_sheet"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFFFFF"
android:elevation="8dp"
android:orientation="vertical"
app:behavior_hideable="true"
app:behavior_peekHeight="300dp"
app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior">
<com.google.android.material.tabs.TabLayout
android:id="#+id/tab_layout"
android:layout_width="wrap_content"
android:layout_height="24dp"
android:layout_gravity="center_horizontal"
app:tabGravity="center"
app:tabMode="scrollable" />
<androidx.viewpager2.widget.ViewPager2
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
[Here's how it looks (sorry for the gif quality)]
I've found a solution for this case, I set isNestedScrollingEnabled = false for inner RecyclerView so that BottomSheetBehavior finds another scrolling view
viewPager.children.find { it is RecyclerView }?.let {
(it as RecyclerView).isNestedScrollingEnabled = false
}
BottomSheetBehaviour only detects the first scrollable view. So it is always recommended to use only one scrollable view inside of it.
For More information check this answer bottomsheetbehavior-with-two-recyclerview
And this one also Scroll not working for multiple RecyclerView in BottomSheet
If you really want to have the two scrollable views I recommend you to take a look at this library also AndroidSlidingUpPanel
I have a screen where i need to display a toolbar at the top, a slideshow below the toolbar and a recyclerview below the slideshow.
For displaying the slideshow I am using a viewPager which slides images horizontally.
The problem I am currently facing is that when the recyclerview is scrolled the viewPager needs to scroll with it and the toolbar should stay pinned.
I tried putting the viewPager and the recyclerview inside a nested Scroll but since a nested scroll requires a single child i had to put both the viewpager and recyclerview inside a linear layout because of which the scrolling behaviour of the recyclerview went for a toss ( i am monitoring the recyclerview scroll so i can load more results when it reaches the bottom ).
You can solve this problem by using CoordinatorLayout, AppBarLayout, and CollapsingToolbarLayout. You put your Toolbar and ViewPager in the CollapsingToolbarLayout, and you use the RecyclerView as the scrolling sibling to the AppBarLayout so that it can correctly collapse the ViewPager.
Here's some example XML I used to achieve what I think you described:
<android.support.design.widget.CoordinatorLayout
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">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_marginTop="?attr/actionBarSize"/>
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_collapseMode="pin"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
app:layoutManager="LinearLayoutManager"/>
</android.support.design.widget.CoordinatorLayout>
The only tricky bit is that the <Toolbar> tag has to come after the <ViewPager> tag, since they're both inside a view that derives from FrameLayout. Normally, this would mean that the toolbar obscures the top portion of the viewpager, but the viewpager's marginTop attribute stops that from happening.
I have a fragment which uses a coordinator layout to show an AppBarLayout and a recycler view like this:
The layout file is thus far:
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:layout_width="wrap_content"
app:elevation="4dp"
android:layout_height="wrap_content">
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|snap">
<!-->Content removed<-->
</RelativeLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/fragment_recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>
The problem I'm having is that if I fling the recycler view so that the list scrolls all the way to the top, the AppBarLayout doesn't reveal unless I specifically pull down again. Is there a scroll flag to make the AppBarLayout come down when the recycler view reaches the top, as if it's attached to the first item in the recycler view?
No, transferring inertial is a known issue with nested scrolling in general, both with the platform APIs and those used by CoordinatorLayout.
<android.support.design.widget.CoordinatorLayout
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">
<! -- Your Scrollable View -->
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
...
app:layout_scrollFlags="scroll|enterAlways">
<android.support.design.widget.TabLayout
...
app:layout_scrollFlags="scroll|enterAlways">
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
when i scoll the recyclerview by touch ( on screen) the scroll behaviour works as expected , but when i scroll the recyclerview programmatically
LinearLayoutManager layoutManager = ((LinearLayoutManager) getLayoutManager());
layoutManager.scrollToPositionWithOffset(spanCount * exactItemPos / mScrollPosState.rowHeight,
-(exactItemPos % mScrollPosState.rowHeight));
the recyclerview scrolls toolbar does not
You could put
appBarLayout.setExpanded(false);
before you do scrollToPositionWithOffset
CoordinatorLayout.Behaviour is works with only NestedScroll event. When you try to scroll RecyclerView programmatically it is treat as normal scroll.
Write below line to inform RecyclerView start NesteadScroll, With ViewCompat.SCROLL_AXIS_VERTICAL and ViewCompat.TYPE_NON_TOUCH
ViewCompat.SCROLL_AXIS_VERTICAL: Indicates scrolling along the vertical axis.
ViewCompat.TYPE_NON_TOUCH: Indicates that the input type for the gesture is caused by something which is not a user touching a screen. This is usually from a fling which is settling.
recycler_view.startNestedScroll(ViewCompat.SCROLL_AXIS_VERTICAL, ViewCompat.TYPE_NON_TOUCH)
recycler_view.smoothScrollBy(0,200)
I have following layout:
What I would like to achieve is to scroll out the ViewPager out of the screen when you scroll in any of the listviews at the half bottom of the screen. As the ViewPager would be getting out of the screen the ListViews should take up more and more screen. Toolbar should stay pinned.
I was having look at the Support Design Library.
In my case from the examples the most interesting piece of code was this:
<android.support.design.widget.CoordinatorLayout
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">
<! -- Your Scrollable View -->
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
...
app:layout_scrollFlags="scroll|enterAlways">
<android.support.design.widget.TabLayout
...
app:layout_scrollFlags="scroll|enterAlways">
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
Do I need to change my ListViews to RecyclerViews in order to achieve scrolling out the ViewPager from the screen - while the ListViews would increase their height as the ViewPager would getting out of the screen? Is that even possible with the Coordinator Layout?