How to handle issues of the new bottom sheet of the support/design library?

android developer picture android developer · Mar 13, 2016 · Viewed 7.2k times · Source

Background

I've used a modified version of bottom-sheet library (here, based on this library, also wrote about it here), in order to have a nice transition between collapsed (AKA "peeked") state and expanded state.

The library had its issues, but in general, I've fixed them all.

The problem

Recently we've found that after going back from all ad-networks screens, back to one that has a bottom sheet, the bottom sheet gets into a weird state of being expanded.

I've decided that it's time to try the new bottom-sheet of the support library (shown here), but I've found that it has a lot of basic related issues:

  1. the bottom sheet gets shown right away, and in the wrong height.
  2. it must have its height configured right away, without support for "wrap_content" and also can't have a height "match_parent" when expanded, as it will be on top of other views, including the toolbar.
  3. When it's hidden, it still reacts to touch events and be shown again.
  4. it will crash when I set its initial state.

And all this without even trying to handle what I wanted, which is the 3-phases I've done before.

What I've tried

At first, I thought I just don't use the library well, so I've tried 2 samples I've found:

I also tried some code I've found here on StackOverflow, but it seems all samples are about the same.

I've noticed they all have the same issues, so I've reported about them :

Now I try various ways to investigate and fix the issues, but I still fail to do so.

The question

Is there any way to deal with those issues? What should be the correct code to use bottom sheets using the support library?

Answer

MiguelHincapieC picture MiguelHincapieC · May 25, 2016

UPDATE Link to the full answer in where you can find all the explanation about how to get full behaviors like Google Maps.


Helping you with what you want

what I wanted, which is the 3-phases I've done before

Using Support Library 23.x+ you can do it modifying default BottomSheetBehavior adding one more stat with following steps:

  1. Create a Java class and extend it from CoordinatorLayout.Behavior<V>
  2. Copy paste code from default BottomSheetBehavior file to your new one.
  3. Modify the method clampViewPositionVertical:

  4. Add a new state

    public static final int STATE_ANCHOR_POINT = X;

  5. Modify the next methods: onLayoutChild, onStopNestedScroll, BottomSheetBehavior<V> from(V view) and setState (optional)

So now you have those states:
STATE_HIDDEN
STATE_COLLAPSED
STATE_DRAGGING
STATE_ANCHOR_POINT
STATE_EXPANDED.

You can use setBottomSheetCallback like you do in original BottomSheetBehavior

The XML (without anything about parallax image like google maps) looks like:

<CoordinatorLayout>

    <FrameLayout/>

    <AppBarLayout>
        <CollapsingToolbarLayout>
            <Toolbar/>
        </CollapsingToolbarLayout >
    </AppBarLayout >

    <NestedScrollView>
        <LinearLayout/>
    </NestedScrollView>

</CoordinatorLayout >



I'm going to add a link to the example project where you can find what you are looking for

And here is how its looks like:
[CustomBottomSheetBehavior]