CODEWITHSUNDEEP
androidgoogle-mapsbottom-sheet
Hamza Ahmed Khan
Hamza Ahmed Khan

Reputation: 516

Google Map view inside a bottom sheet

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).

Upvotes: 5

Views: 3995

Answers (2)

zeenosaur
zeenosaur

Reputation: 1007

I need to implement the same feature. In my case, I used a BottomSheetDialogFragment that contains SupportMapFragment. The problem was, I could only make horizontal gestures on the map like panning it, but not vertical gestures. What needs to be done is to disable the BottomSheet's touch listener while the user is doing some gestures on the map. You can refer to my similar post here to see how it should be done https://stackoverflow.com/a/53740355/1767167

Upvotes: 0

Harsh Patel
Harsh Patel

Reputation: 667

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.

Upvotes: 11

Related Questions