android popup window from bottom when click on googlemap marker

Question

I am new to Android programming. Need help on how to make a pop up window from bottom of screen, when user click on a google map marker. Like Zillow app does. I searched for some time, seems coordinatorlayout can do it, not sure if there is a better / easier way to do it. Also looked at google map info window, it always shows on top of marker, not sure if its possible to make info window show from bottom of screen. Thanks in advance !

Answer 1

I believe the best way to do that is bottom sheets (material design ) these two links help :

https://code.tutsplus.com/articles/how-to-use-bottom-sheets-with-the-design-support-library--cms-26031

https://material.io/guidelines/components/bottom-sheets.html?authuser=0#bottom-sheets-specs

Answer 2

These codes worked for me @HappyFish, for the question you have asked. Code for MainActivity:

  public class MapsActivity extends FragmentActivity implements OnMapReadyCallback {

    private GoogleMap mMap;
    Marker marker;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_maps);
        // Obtain the SupportMapFragment and get notified when the map is ready to be used.
        SupportMapFragment mapFragment = (SupportMapFragment) getSupportFragmentManager()
                .findFragmentById(R.id.map);
        mapFragment.getMapAsync(this);
    }

    /**
     * Manipulates the map once available.
     * This callback is triggered when the map is ready to be used.
     * This is where we can add markers or lines, add listeners or move the camera. In this case,
     * we just add a marker near Sydney, Australia.
     * If Google Play services is not installed on the device, the user will be prompted to install
     * it inside the SupportMapFragment. This method will only be triggered once the user has
     * installed Google Play services and returned to the app.
     */
    @Override
    public void onMapReady(final GoogleMap googleMap) {
        mMap = googleMap;

        // Add a marker in Sydney and move the camera

    LatLng dehiwala= new LatLng(6.848174, 79.865041);
        LatLng sydney= new LatLng(-33.852766, 151.183472);

        mMap.addMarker(new MarkerOptions().position(dehiwala));
        mMap.addMarker(new MarkerOptions().position(sydney));
    mMap.moveCamera(CameraUpdateFactory.newLatLng(sydney));


     googleMap.setOnMarkerClickListener(new GoogleMap.OnMarkerClickListener() {
            @Override
            public boolean onMarkerClick(Marker marker) {
                openPopUpWindow();



             return true;
            }



        });
    }

    private void openPopUpWindow() {
       Intent popupwindow = new Intent (MapsActivity.this,PopUpWindow.class);
       startActivity(popupwindow);
    }

    ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

/////Add markers from firestore





}

code for activity_maps.xml:

<?xml version="1.0" encoding="utf-8"?>
<fragment xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:map="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/map"
    android:name="com.google.android.gms.maps.SupportMapFragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MapsActivity" />    
    
    
    

code for PopUpWindow :

public class PopUpWindow extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_pop_up_window);
        DisplayMetrics dm = new DisplayMetrics();
        getWindowManager().getDefaultDisplay().getMetrics(dm);
        int width =dm.widthPixels;
        int hight=dm.heightPixels;
      //  getWindow().setLayout((int)(width*.7),(int)(hight*.5));
        getWindow().setLayout((int)(width*.8),(int)(hight*.4));
        WindowManager.LayoutParams params = getWindow().getAttributes();
      params.gravity = Gravity.CENTER;
       // params.gravity = Gravity.BOTTOM;
        params.x=10;
        params.y=12;
        getWindow().setAttributes(params);

    }

}                     

code for activity_pop_up_window.xml :

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".PopUpWindow"
    android:background="#fff">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Pop Up Window"
        android:textColor="#fff"
        android:textSize="40sp"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"/>


</RelativeLayout>

code for styles.xml :

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
    <style name="AppTheme.popMe">
        <item name="android:windowIsTranslucent">true</item>
        <item name="android:windowCloseOnTouchOutside">true</item>
    </style>
</resources>