Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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:

  • https://github.com/vipulshah2010/BottomSheets
  • https://github.com/chikkutechie/androidexamples

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 :

  • https://code.google.com/p/android/issues/detail?id=203114
  • https://code.google.com/p/android/issues/detail?id=203115
  • https://code.google.com/p/android/issues/detail?id=203113
  • https://code.google.com/p/android/issues/detail?id=203654

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?

like image 816
android developer Avatar asked Mar 13 '16 14:03

android developer


People also ask

What is bottom sheet behavior?

Bottom Sheet is a well-written material design component that performs enter/exit animations, respond to dragging/swiping gestures, etc. For using it in your project you should implement next dependencies into your app build.gradle file: implementation "androidx.coordinatorlayout:coordinatorlayout:1.1.0"

What is persistent bottom sheet?

In android, there are two types of bottom sheets that use most of the time, Persistent Bottom Sheet and Modal Bottom Sheet. Persistent Bottom Sheet: It shows in-app content. It will display at the bottom of the mobile screen making some amount of the content visible.


1 Answers

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]

like image 56
MiguelHincapieC Avatar answered Sep 19 '22 11:09

MiguelHincapieC