Google Map view inside a bottom sheet

Question

I want to make a view like Sample image

in which a want to show google maps inside a bottom sheet fragment.

What I've tried

I've tried to show maps inside a bottom sheet dialog fragment but the output isn't what I desire.

What I require is a fixed size view which should be able to display maps. Currently my view is also responding to user gestures to change bottom sheet state but I require gestures to work on map only (e.g for map panning).

Answer 1

When we use the map on BottomSheet, it conflicts touch events. So, need to disallow touch of BottomSheet.

Please find a below custom class which allows the map to move.

public class BottomSheetMapView extends MapView {

public BottomSheetMapView(Context context) {
    super(context);
}

public BottomSheetMapView(Context context, AttributeSet attrs) {
    super(context, attrs);
}

public BottomSheetMapView(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);
}

public BottomSheetMapView(Context context, MapboxMapOptions options) {
    super(context, options);
}
@Override
public boolean onInterceptTouchEvent(final MotionEvent event) {
    switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            getParent().requestDisallowInterceptTouchEvent(true);
            break;
        case MotionEvent.ACTION_UP:
            getParent().requestDisallowInterceptTouchEvent(false);
            break;
        default:
            break;
    }

    return super.onInterceptTouchEvent(event);
}

}

I am using Mapbox. So, I use com.example.BottomSheetMapView instead of com.mapbox.mapboxsdk.maps.MapView in xml. Similarly, you can use Google map.

This satisfies your requirement.