AppBarLayout with scrolling behavior alternative/ sticky view on scrolling/ large height AppBarLayout causing weird scroll

user_8523867 0
Viewed 291

Video of my current state,for better understanding of my situation:
video
everything above RecyclerView is inside AppbarLayout

Example of reddit app with similar behavior:
video

Goal:
1-Implement scrolling screen with views in order from top to bottom

a)[several views that need to scroll top until gone, their combined height is several screen sizes]  
b)[view that scrolls until it reaches screen top and then sticks there]  
c)[RecyсlerView that scrolls beneath view that sticks on screens top] or [ViewPager with fragments containing RecyclerViews]

2-Need it to work both with RecyclerView and ViewPager containing fragments containing RecyclerViews

3-Retain RecyclerViews recycling.

My solution so far:

Coordinator layout, AppBarLayout with appbar_scrolling_view_behavior and scroll|exitUntilCollapsed.
Basically placing treating all the views above RecyclerView as AppBarLayout and setting attribute scroll|exitUntilCollapsedto the ones that need scroll off and not setting any scroll attribute to the one that needs to stick.

Explanation:

I wanted to use RecyclerView with multiple view types and treat the views in group a and b above as different ViewHolders and place them at 0 and 1 indexes of the list supplied to RecyclerView.

But didn't find any solution on how to make ViewHolder sticky to top of screen while retaining its clickability (interactivity). All the solutions just draw a view that you can't communicate in anyway..

In a hurry I used CoordinatorLayout with AppBarLayout and set scroll behavior and scroll flags

Problem:

Scrolling experience is super weird, laggy and with jittering when initial scroll gesture happened inside AppBar and the second in child view (RecyclerView or RecyclerView inside ViewPager) or in opposite order.

If found custom behavior implementation and it got rid of jitter but there is still some inconsistency in scrolling experience.

QUESTION:
I'm not asking how to fix scroll in my current solution. I'm convinced there is no solution since probably AppbarLayout should not have height of a whole screen in the first place. So i did not post video emphasizing scroll bug.

Can I ditch CoordinatorLayout with AppBarLayout completely and achieve intended scroll behfvior? I spent hours(if not days) looking for ways to implement this T_T.
Please let me know, if you need more info.

android-appbarlayout android-viewpager2 android-coordinatorlayout android-recyclerview android
2 Answers

TL;DR;

Maybe this library will help. It has RecyclerView with Sticky Headers that are clickable. https://github.com/davideas/FlexibleAdapter

end of TL;DR;

Personal advice Android is another Linux distribution with preexisting UI widgets. Imagine you were given Linux distro without UI and had to implement them yourself while using Android as a reference. The best thing would be to read AOSP source code and also source code of relevant Github projects.However the task is quite daunting so first you have to divide them in manageable chunks.

What you are dealing with is logic of Scrolling and Touch. Scrolling is difficult, especially nested scrolling Android has 3 iterations of NestedScrollingChild and NestedScrolling Parent. It is used in BottomSheets and every other place with the CoordinatorLayoutBehaviour, in NumberPickers, in ViewPagers, RecyclerViews and everywhere there is a scroll.

Watch talks about touch handling/recyclerview by Dave Smith, custom view video by Chiuki Chan, other relevant videos. Articles about nested scrolling:https://www.androiddesignpatterns.com/2018/01/experimenting-with-nested-scrolling.html

Finally read source code from relevant Github projects, experiment with them: https://github.com/frogermcs/InstaMaterial

https://github.com/trafi/anchor-bottom-sheet-behavior

https://github.com/ZieIony/Carbon

https://github.com/AndroidDeveloperLB/LollipopContactsRecyclerViewFastScroller

And many others you will find when looking for a smaller issue of your encompassing problem.

This will take time not a day, a week, but months. However at the end you will understand how View work on Android and what its limitations are.

user_87207480

The reason why the Reddit app behaves differently is because it seems to use a WebView; this is CSS scrolling behavior. But one can nest XML or Compose components the same. This might not be wrapped in an AppBarLayout, but definitely nested into the actual content area of ViewPager2.

Assume such structure:

Fragment
    ViewPager2

        Fragment
            CoordinatorLayout
                AppBarLayout <-- maybe, maybe not
                    CollapsingToolbarLayout <-- most definitely
                        Toolbar
                    NestedScrollView <-- scroll happens here
                        RecylerView

NestedScrollView app:layout_behavior and the scroll flag of CollapsingToolbarLayout control this. I'm unsure whether an AppBarLayout is required in there, because CollapsingToolbarLayout resides in package appbar. Please consider both possibilities. It matters what is being wrapped with the NestedScrollView (which is not the parent Fragment, in which ViewPager2 resides).

user_5493720
Related