How to change design of title and snippet above google maps marker

Question

i am currently working on an application involving google maps. I want to change the design of the information above the location marker. But i cannot figure out how to do this.

To explain;

i have this:

and i want this:

I have the design for the blue box as an image. But i do not know if i need to use the image or write code to make it look like the image.

Here is the code i have so far:

MainActivity

import android.content.Context;
import android.location.Criteria;
import android.location.Location;
import android.location.LocationManager;
import android.os.Build;
import android.os.Bundle;
import android.provider.Settings;
import android.support.v4.app.FragmentActivity;
import android.text.TextUtils;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.TextView;

import com.google.android.gms.location.LocationListener;
import com.google.android.gms.maps.CameraUpdateFactory;
import com.google.android.gms.maps.GoogleMap;
import com.google.android.gms.maps.SupportMapFragment;
import com.google.android.gms.maps.model.BitmapDescriptorFactory;
import com.google.android.gms.maps.model.LatLng;
import com.google.android.gms.maps.model.Marker;
import com.google.android.gms.maps.model.MarkerOptions;


public class MainActivity extends FragmentActivity implements     LocationListener {

    GoogleMap map;
    LatLng myPosition;

protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    isLocationEnabled(this);


    // Getting reference to the SupportMapFragment of activity_main.xml
    SupportMapFragment fm = (SupportMapFragment) getSupportFragmentManager().findFragmentById(R.id.map);

    // Getting GoogleMap object from the fragment
    map = fm.getMap();

    // remove geolocation button
    map.getUiSettings().setMyLocationButtonEnabled(false);

    // Enabling MyLocation Layer of Google Map
    map.setMyLocationEnabled(true);

    // Getting LocationManager object from System Service LOCATION_SERVICE
    LocationManager locationManager = (LocationManager) getSystemService(LOCATION_SERVICE);

    // Creating a criteria object to retrieve provider
    Criteria criteria = new Criteria();

    // Getting the name of the best provider
    String provider = locationManager.getBestProvider(criteria, true);

    // Getting Current Location
    Location location = locationManager.getLastKnownLocation(provider);

    if (location != null) {
        // Getting latitude of the current location
        double latitude = location.getLatitude();

        // Getting longitude of the current location
        double longitude = location.getLongitude();

        // Creating a LatLng object for the current location
        LatLng latLng = new LatLng(latitude, longitude);

        myPosition = new LatLng(latitude, longitude);
        LatLng amsterdam = new LatLng(52.3667, 4.9000);


        // create marker
        MarkerOptions marker = new MarkerOptions().position(myPosition);
        // setting custom marker
        marker.icon(BitmapDescriptorFactory.fromResource(R.drawable.map_marker));

        MarkerOptions markerOptions = new MarkerOptions();
        markerOptions.position(myPosition);
        markerOptions.icon(BitmapDescriptorFactory.fromResource(R.drawable.map_marker));
        markerOptions.title(" Title");

        markerOptions.snippet(" Here comes the address ");


        // create and add marker
        Marker locationMarker = map.addMarker(markerOptions);
        // always show info text
        locationMarker.showInfoWindow();
        // opening maps zoomed in at current location
        map.moveCamera(CameraUpdateFactory.newLatLngZoom(amsterdam, 17.0f));



    }
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    // Inflate the menu; this adds items to the action bar if it is present.
    getMenuInflater().inflate(R.menu.menu_main, menu);
    return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    // Handle action bar item clicks here. The action bar will
    // automatically handle clicks on the Home/Up button, so long
    // as you specify a parent activity in AndroidManifest.xml.
    int id = item.getItemId();

    //noinspection SimplifiableIfStatement
    if (id == R.id.action_settings) {
        return true;
    }

    return super.onOptionsItemSelected(item);
}


@Override
public void onLocationChanged(Location location) {


}

public static boolean isLocationEnabled(Context context) {
    int locationMode = 0;
    String locationProviders;

    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
        try {
            locationMode = Settings.Secure.getInt(context.getContentResolver(), Settings.Secure.LOCATION_MODE);

        } catch (Settings.SettingNotFoundException e) {
            e.printStackTrace();
        }

        return locationMode != Settings.Secure.LOCATION_MODE_OFF;

    } else {
        locationProviders = Settings.Secure.getString(context.getContentResolver(), Settings.Secure.LOCATION_PROVIDERS_ALLOWED);
        return !TextUtils.isEmpty(locationProviders);
    }


    }
}

activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

<TextView
    android:id="@+id/tv_location"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

<fragment xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/map"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_below="@id/tv_location"
    class="com.google.android.gms.maps.SupportMapFragment"
    tools:layout="@layout/abc_action_bar_title_item" />


</RelativeLayout>

Excuse me in advance if i used sloppy coding or bad practices. These files are a playground for me to create the functionality so that i can put it in the actual application later on.

Answer 1

To change the look of the info window ("the information above the location marker"), you use an InfoWindowAdapter . In your case, you want to replace the whole window, both the contents and the frame (the thing with the caret that points to the marker). So, your InfoWindowAdapter would implement getInfoWindow() and return the View to use for the given Marker . You then call setInfoWindowAdapter() on your GoogleMap to tell it to ask your InfoWindowAdapter for the View to use when the user taps on a Marker .

This sample app demonstrates the concept, though I override getInfoContents() instead of getInfoWindow() , as I wanted to replace the contents but use the existing info window frame. You wind up with something like this: