How to mimic Google Maps' bottom-sheet 3 phases behavior?

Question

Background

I\'m assigned to make a UI that behaves similar to how Google Maps shows a bottom-sheet for a found result.

It has three different phases:

Answer 1

BIG UPDATE

Because there were like 4 or 5 question about the same topic, BUT with DIFFERENT requirements, and I tried to answer all of them, but a non-polite admin deleted/closed them, making me create a ticket for each one and changing them to avoid "copy paste" I will let you a link to the full answer in where you can find all the explanation about how to get full behavior like Google Maps.

---

Answering your question

How to mimic Google Maps' bottom-sheet 3 phases behavior?

With support library 23.x.x+ you can do it modifying the default BottomSheetBehavior, adding one more stat with following steps:

1. Create a Java class and extend it from CoordinatorLayout.Behavior
2. Copy paste code from default BottomSheetBehavior file to your new one.

3. Modify the method clampViewPositionVertical with the following code:

   @Override
   public int clampViewPositionVertical(View child, int top, int dy) {
       return constrain(top, mMinOffset, mHideable ? mParentHeight : mMaxOffset);
   }
   int constrain(int amount, int low, int high) {
       return amount < low ? low : (amount > high ? high : amount);
   }
   

4. Add a new state:

   public static final int STATE_ANCHOR_POINT = X;
   

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

I'm going to add those modified methods and a link to the example project.

And here is how its looks like: