Using BottomSheetBehavior with a inner CoordinatorLayout
Solution 1
I have finally released my implementation. Find it on Github or directly from jcenter:
compile 'com.otaliastudios:bottomsheetcoordinatorlayout:1.0.0’
All you have to do is using BottomSheetCoordinatorLayout
as the root view for your bottom sheet. It will automatically inflate a working behavior for itself, so don’t worry about it.
I have been using this for a long time and it shouldn’t have scroll issues, supports dragging on the ABL etc.
Solution 2
I have just followed the way you asked the above question and come up with solution that might need more explanation.Please follow your sample code and integrate the extra part in your xml to make it behave like BottomSheeet behaviour
<CoordinatorLayout>
<AppBarLayout>
<Toolbar
app:layout_collapseMode="pin">
</Toolbar>
</AppBarLayout>
<NestedScrollView
app:layout_behavior=“@string/bottom_sheet_behavior” >
<include layout="@layout/items" />
</NestedScrollView>
<!-- Bottom Sheet -->
<BottomSheetCoordinatorLayout>
<AppBarLayout
<CollapsingToolbarLayout">
<ImageView />
<Toolbar />
</CollapsingToolbarLayout>
</AppBarLayout>
<NestedScrollView">
<include layout="@layout/items" />
</NestedScrollView>
</BottomSheetCoordinatorLayout>
</CoordinatorLayout>
Note : Solution that worked for me already explained in last comment of your question
Better explantion : https://github.com/laenger/BottomSheetCoordinatorLayout
![natario](https://i.stack.imgur.com/r3LAB.jpg?s=256&g=1)
natario
Updated on June 16, 2022Comments
-
natario about 2 years
The design support library
v. 23.2
introducedBottomSheetBehavior
, which allows childs of a coordinator to act as bottom sheets (views draggable from the bottom of the screen).What I’d like to do is to have, as a bottom sheet view, the following view (the typical coordinator + collapsing stuff):
<CoordinatorLayout app:layout_behavior=“@string/bottom_sheet_behavior”> <AppBarLayout> <CollapsingToolbarLayout> <ImageView /> </CollapsingToolbarLayout> </AppBarLayout> <NestedScrollView> <LinearLayout> < Content ... /> </LinearLayout> </NestedScrollView> </CoordinatorLayout>
Unfortunately, bottom sheet views should implement nested scrolling, or they won’t get scroll events. If you try with a main activity and then load this view as a bottom sheet, you’ll see that scroll events only act on the “sheet” of paper, with some strange behavior, as you can see if you keep reading.
I am pretty sure that this can be handled by subclassing
CoordinatorLayout
, or even better by subclassingBottomSheetBehavior
. Do you have any hint?Some thoughts
-
requestDisallowInterceptTouchEvent()
should be used, to steal events from the parent in some conditions:- when the
AppBarLayout
offset is > 0 - when the
AppBarLayout
offset is == 0, but we are scrolling up (think about it for a second and you’ll see)
- when the
the first condition can be obtained by setting an
OnOffsetChanged
to the inner app bar;-
the second requires some event handling, for example:
switch (MotionEventCompat.getActionMasked(event)) { case MotionEvent.ACTION_DOWN: startY = event.getY(); lastY = startY; userIsScrollingUp = false; break; case MotionEvent.ACTION_CANCEL: case MotionEvent.ACTION_UP: userIsScrollingUp = false; break; case MotionEvent.ACTION_MOVE: lastY = event.getY(); float yDeltaTotal = startY - lastY; if (yDeltaTotal > touchSlop) { // Moving the finger up. userIsScrollingUp = true; } break; }
Issues
Needless to say, I can’t make this work right now. I am not able to catch the events when the conditions are met, and not catch them in other cases. In the image below you can see what happens with a standard CoordinatorLayout:
The sheet is dismissed if you scroll down on the appbar, but not if you scroll down on the nested content. It seems that nested scroll events are not propagated to the Coordinator behavior;
There is also a problem with the inner appbar: the nested scroll content does not follow the appbar when it is being collapsed..
I have setup a sample project on github that shows these issues.
Just to be clear, desired behavior is:
Correct behavior of appbars/scroll views inside the sheet;
When sheet is expanded, it can collapse on scroll down, but only if the inner appbar is fully expanded too. Right now it does collapse with no regards to the appbar state, and only if you drag the appbar;
When sheet is collapsed, scroll up gestures will expand it (with no effect on the inner appbar).
An example from the contacts app (which probably does not use BottomSheetBehavior, but this is what I want):
-