Android BottomSheet with FloatButton

Question

How to make this interaction Bottom sheet and FloatButton like in Google Map? The first screenshot shows two FloatButtons.After clicking on map, the second button change icon and scroll up and hooking on bottomSheet edge.(Screenshot2).

First Screenshot

Second Screenshot

Ezana

Answer 1

I suppose that FAB firstly is anchored to the right|bottom of the MapView and has the same elevation as the BottomSheet view.

Once the BottomSheet is peeking to some height and BottomSheet top is equal to the half of the height of the FAB, then a new anchor id is attached to FAB CoordinatorLayout.Params, which basically is the id BottomSheet view.

Just to give you code pointers:

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());
}

Benton

Answer 2

Here is a good reference to get you started:

How to implement BottomSheets

Android Developer Blog on Bottom Sheets

To help you further, please post existing code and what you've tried.

Heartsome