Home > database >  I want to build an Android app with overlay over the map, What layout should I use to achieve the re
I want to build an Android app with overlay over the map, What layout should I use to achieve the re

Time:02-02

enter image description here

Should I use fragments? but I want an overlay over the map activity. How can I achieve this?

So far, I have been trying, to add two buttons and on click of a button opens a floating map, but it doesn't give me this result, it resembles a bookmark bar on chrome with three dots on the sides which aren't what I want.

CodePudding user response:

Not sure what you are going to do when user will tap on go back or any button or back press

but here i assume it that you are going to remove that white overlay and only map will be shown

if yes then you can simply use map in your activity/fragment whatever you like and white overlay should be created and shown using BottomSheetDialogFragment

to understand how you will create BottomSheetDialogFragment , you can refer this example

https://medium.com/@kosta.palash/using-bottomsheetdialogfragment-with-material-design-guideline-f9814c39b9fc

CodePudding user response:

I think the best bet is using coordinatorLayout with a child layout that has BottomsheetBehaviour for the overlay. or simply BottomSheetDialogFragment if user isn't going to interact with map when the overlay is drawn up.

a layout with app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior" fits the picture. more on that here

CodePudding user response:

To build an Android app with a map overlay, you can use a RelativeLayout. A RelativeLayout is a flexible layout that allows you to position elements relative to each other. In this case, you can use a RelativeLayout to position a map view (using the MapView component from the Google Maps API) on the bottom of the layout, and overlay other views (e.g., buttons, text, images) on top of the map.

Here's an example of how you can create a simple RelativeLayout with a map view and an overlay view:

<RelativeLayout
      xmlns:android="http://schemas.android.com/apk/res/android"
      android:layout_width="match_parent"
      android:layout_height="match_parent">
    
      <com.google.android.gms.maps.MapView
        android:id="@ id/map_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
    
      <LinearLayout
        android:id="@ id/overlay_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:gravity="center_horizontal"
        android:layout_alignParentTop="true"
        android:background="#7F000000">
    
        <!-- Add your overlay views here (e.g. buttons, text, images) -->
    
      </LinearLayout>
    
    </RelativeLayout>

In this example, the map view takes up the entire layout and is positioned on the bottom of the RelativeLayout. The overlay view is a LinearLayout that is positioned on top of the map, aligned to the top of the layout, and has a semi-transparent black background. You can add your own views to the overlay view (e.g., buttons, text, images) as needed.

  • Related