Android UI Customization

The ConsumerMapStyle class has setter and getter methods that provide you with dynamic customization for markers and polylines. This class is exposed asynchronously using the ConsumerController.getConsumerMapStyle() method.

UI customization persists across device rotations and remains in effect until the ConsumerController is detached.

Custom markers

The method for setting the marker type and its properties is ConsumerMapStyle.setMarkerStyleOptions(). Your custom marker options override the default values provided by the Consumer SDK. To restore the default values, call setMarkerStyleOptions() using null for the MarkerOptions parameter. Retrieve the active MarkerOptions using getMarkerStyleOptions().

Marker types

The following markers are available for customization:

• TRIP_PICKUP_POINT
• TRIP_DROPOFF_POINT
• TRIP_INTERMEDIATE_DESTINATION
• TRIP_VEHICLE

TRIP_PICKUP_POINT and TRIP_DROPOFF_POINT display during trip monitoring.

TRIP_VEHICLE displays during trip monitoring. The marker icon does not change according to the actual vehicle type for the trip. The Consumer SDK updates the rotation of the TRIP_VEHICLE icon during trip monitoring to mimic the behavior of the actual vehicle as it travels the route.

Marker options

The customizable properties available for each marker are the set of properties provided by Google Maps MarkerOptions.

MarkerOptions is built using its constructor, and the customized properties are specified using 'Setter' style methods. Default values are provided for each property, so you only need to specify custom values.

You can turn off a marker by setting visible to false. Enough data should be provided to allow you to use your own UI element in its place.

Example

// Initializing marker options.
consumerController
    .getConsumerMapStyle()
    .addOnSuccessListener(
        consumerMapStyle -> {
          consumerMapStyle.setMarkerStyleOptions(
              MarkerType.TRIP_VEHICLE,
              new MarkerOptions()
                  .visible(false));
        });

// Reset marker options to default values.
consumerMapStyle.setMarkerStyleOptions(MarkerType.TRIP_VEHICLE, null);

// Initializing marker options.
consumerController
  .getConsumerMapStyle()
  .addOnSuccessListener({ consumerMapStyle ->
    consumerMapStyle.setMarkerStyleOptions(MarkerType.TRIP_VEHICLE, MarkerOptions().visible(false))
  })

// Reset marker options to default values.
consumerMapStyle.setMarkerStyleOptions(MarkerType.TRIP_VEHICLE, null)

Custom polylines

Polyline customization is set using the ConsumerMapStyle.setPolylineStyleOptions method. Setting custom polyline options overrides the default values provided by the Consumer SDK. The default values can be restored by calling setPolylineStyleOptions with null for the PolylineOptions parameter. The active PolylineOptions can be retrieved using the getPolylineStyleOptions method.

Polyline types

The following polyline types are available for customization:

• ACTIVE_ROUTE
• REMAINING_ROUTE

ACTIVE_ROUTE and REMAINING_ROUTE are displayed during trip monitoring and represent the vehicle's route.

Polyline Properties

The customizable properties available for each polyline are provided by Google Maps PolylineOptions. PolylineOptions is built using its constructor, and the customized properties are specified using 'Setter' style methods. Default values are provided for each property, so you only need to specify custom values. You can turn off the polyline by setting visible to false.

Example

// Initializing polyline style options.
consumerController
    .getConsumerMapStyle()
    .addOnSuccessListener(
        consumerMapStyle -> {
          consumerMapStyle.setPolylineStyleOptions(
              PolylineType.ACTIVE_ROUTE,
              new PolylineOptions()
                  .visible(false));
        });

// Reset polyline options to default values.
consumerMapStyle.setPolylineStyleOptions(PolylineType.ACTIVE_ROUTE, null);

// Initializing polyline options.
consumerController
  .getConsumerMapStyle()
  .addOnSuccessListener({ consumerMapStyle ->
    consumerMapStyle.setPolylineStyleOptions(
      PolylineType.ACTIVE_ROUTE,
      PolylineOptions().visible(false)
    )
  })

// Reset polyline options to default values.
consumerMapStyle.setPolylineStyleOptions(PolylineType.ACTIVE_ROUTE, null)

Active and Remaining Route

With Trip and Order Progress enabled, your app can customize the user's experience using polylines showing your vehicles active and remaining route.

The active route is the path the vehicle is currently traveling to reach the next waypoint in the consumer's active trip. The remaining route is the path the vehicle will travel past the active route. When the active route waypoint is the last trip waypoint, the remaining route does not exist.

Active and remaining polylines can be customized and visibility controlled by your app. By default, the active route is visible and the remaining route is not visible.

Example

// Initializing polyline options.
consumerController
    .getConsumerMapStyle()
    .addOnSuccessListener(
        consumerMapStyle -> {
          consumerMapStyle.setPolylineStyleOptions(
              PolylineType.ACTIVE_ROUTE,
              new PolylineOptions()
                  .color(Color.BLUE));
          consumerMapStyle.setPolylineStyleOptions(
              PolylineType.REMAINING_ROUTE,
              new PolylineOptions()
                  .color(Color.BLACK)
                  .width(5)
                  .visible(true));
        });

// Reset polyline options to default values.
consumerMapStyle.setPolylineStyleOptions(PolylineType.ACTIVE_ROUTE, null);
consumerMapStyle.setPolylineStyleOptions(PolylineType.REMAINING_ROUTE, null);

// Initializing polyline options.
consumerController
  .getConsumerMapStyle()
  .addOnSuccessListener({ consumerMapStyle ->
    {
      consumerMapStyle.setPolylineStyleOptions(
        PolylineType.ACTIVE_ROUTE,
        PolylineOptions().color(Color.BLUE)
      )

      consumerMapStyle.setPolylineStyleOptions(
        PolylineType.REMAINING_ROUTE,
        PolylineOptions().color(Color.BLACK).width(5).visible(true)
      )
    }
  })

// Reset polyline options to default values.
consumerMapStyle.setPolylineStyleOptions(PolylineType.ACTIVE_ROUTE, null)

consumerMapStyle.setPolylineStyleOptions(PolylineType.REMAINING_ROUTE, null)

Traffic-aware polylines

The traffic layer of the polyline is disabled by default. When it is enabled, segments representing stretches of non-normal traffic are drawn above the route polyline at the z-index PolylineOptions.getZIndex() plus an offset depending on the traffic condition.

Traffic conditions are represented as one of four speed types. You can customize the color for each speed type.

In order to enable the "Traffic-aware polylines", you must construct a TrafficStyle object which then will be passed to ConsumerMapStyle by calling setPolylineTrafficStyle().

Example

// TrafficStyle is part of the Consumer SDK.
TrafficStyle trafficStyle = TrafficStyle.builder()
  .setTrafficVisibility(true)
  .setTrafficColor(SpeedType.NO_DATA, Color.GREY)
  .setTrafficColor(SpeedType.NORMAL_VALUE, Color.BLUE)
  .setTrafficColor(SpeedType.SLOW_VALUE, Color.ORANGE)
  .setTrafficColor(SpeedType.TRAFFIC_JAM, Color.RED)
  .build();

consumerMapStyle.setPolylineTrafficStyle(PolylineType.ACTIVE_ROUTE, trafficStyle);

// TrafficStyle is part of the Consumer SDK.
val trafficStyle =
  TrafficStyle.builder()
    .setTrafficVisibility(true)
    .setTrafficColor(SpeedType.NO_DATA, Color.GREY)
    .setTrafficColor(SpeedType.NORMAL_VALUE, Color.BLUE)
    .setTrafficColor(SpeedType.SLOW_VALUE, Color.ORANGE)
    .setTrafficColor(SpeedType.TRAFFIC_JAM, Color.RED)
    .build()

consumerMapStyle.setPolylineTrafficStyle(PolylineType.ACTIVE_ROUTE, trafficStyle)

Adjusting the camera zoom to focus on a journey

The default My Location button built in to the Maps SDK centers the camera on the device location. If there is an active Trip and Order Progress session, you may want to center the camera to focus on the journey rather than the device location.

Consumer SDK for Android built-in solution: AutoCamera

To let you focus on the journey instead of the device location, the Consumer SDK provides an AutoCamera feature that is enabled by default. The camera zooms to focus on the Trip and Order Progress route and the next trip waypoint.

Customizing camera behavior

If you require more control of camera behavior, you can disable or enable AutoCamera using ConsumerController.setAutoCameraEnabled().

ConsumerController.getCameraUpdate() returns the recommended camera bounds at that moment. You can then provide this CameraUpdate as an argument to GoogleMap.moveCamera() or GoogleMap.animateCamera().