Android BottomSheet with FloatButton

Question

How to make this interaction Bottom Sheet and FloatButton, like on a Google map? The first screen shot shows two FloatButtons. After clicking on the map, the second button will change the icon and scroll up and hook the bottom edge of the sheet. (Screenshot 2).

First screenshot

Second screenshot

Answer 1

I believe that the FAB is first anchored to the right|bottom MapView and has the same elevation as the BottomSheet .

As soon as the BottomSheet at some height and the top of the BottomSheet is half the height of the FAB, then a new binding identifier is attached to the FAB CoordinatorLayout.Params , which is basically the id of the BottomSheet view.

Just to give you pointers to code:

 CoordinatorLayout.Behavior behavior = (CoordinatorLayout.Behavior)fab.getLayoutParams(); int boundary = fab.getTop() + (fab.getHeight() * 0.5); //inside `BottomSheet` callback methods if(sheetView.getTop() >= boundary){ //sheet is expanding or its peeking height was changed behavior.setAnchorId(sheetView.getId()); } else if (sheetView.getTop() <= boundary){ //sheet is animating to collapse, being collapsed behavior.setAnchorId(mapView.getId()); } 

Answer 2

Here is a good link to get you started:

How to implement BottomSheets

Android Developer Blog Bottom Sheets

To help you further, post your existing code and what you have tried.