Android: GoogleMaps marker details fragment

Question

I'm a beginner in Android and I'm trying to achieve something similar to Google Maps App. When I press on a marker I want a new fragment with details to appear on top of my SupportMapFragment , like this:

How can I achieve that?

Is that a default layout for that fragment?

Is that even a fragment or just a modified info window?

Answer 1

yes you can easily achieve it using this lib, its support 2 layouts when minimized and stretched, I have implemented similar behavior following google maps app as getting data like below and setting it in layout

here is link

and sample usage is

    <com.sothree.slidinguppanel.SlidingUpPanelLayout
    xmlns:sothree="http://schemas.android.com/apk/res-auto"
    android:id="@+id/sliding_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="bottom"
    sothree:umanoPanelHeight="68dp"
    sothree:umanoShadowHeight="4dp">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="Main Content"
        android:textSize="16sp" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center|top"
        android:text="The Awesome Sliding Up Panel"
        android:textSize="16sp" />
</com.sothree.slidinguppanel.SlidingUpPanelLayout>

Answer 2

I figured it out. What I need is called a Bottom Sheet Dialog . Here is a very useful guide that I used as source of inspiration.

Step 1

Implement Material Components Library in `app.gradle`:

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:layout_gravity="bottom">
   
        <androidx.appcompat.widget.AppCompatButton
            android:id="@+id/btn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:text="Rent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent" />
    </androidx.constraintlayout.widget.ConstraintLayout>

Step 2

In res->layout create a layout of your choice. Mine looks like this:

 @Override
   public boolean onMarkerClick(Marker marker) {
      showBottomSheetDialog();
      return false;
   } 

The layout is aligned to bottom.

Step 3

Define a method that instantiate the BottomSheetDialog:

 private void showBottomSheetDialog() { final BottomSheetDialog bottomSheetDialog = new BottomSheetDialog(getContext()); bottomSheetDialog.setContentView(R.layout.MY_LAYOUT_NAME); AppCompatButton btn = bottomSheetDialog.findViewById(R.id.btn_view); bottomSheetDialog.show(); }

Step 4

This step is extra, just if you want to see how to call the BottomSheetDialog by pressing on a GoogleMap marker.

Make sure that the class that handles the MapSupportFragment implements OnMapReadyCallback , GoogleMap.OnMarkerClickListener and (if you need clusters of markers) ClusterManager.OnClusterItemClickListener . Override the necessary methodes:

 @Override public boolean onMarkerClick(Marker marker) { showBottomSheetDialog(); return false; }

If you need clusters, in @onMapReady() dont't forget to add:

 map.setOnCameraIdleListener(clusterManager); map.setOnMarkerClickListener(clusterManager); clusterManager.setOnClusterItemClickListener(this);

Voila!