Customize view elements

In the previous guide, we added the Map Fragment to your app's view. This guide will cover customization of the fragment, customization such as choosing your own hero marker, show/hide UI elements.

UI components

1. Address Info View

By default, the Address Info view is enabled and it displays the expected place address for the ongoing action

Toggle Address Info View visibility

To toggle the visibility of Address Info view, override showAddressInfoViewForActionID method. Once it's hidden, you can add your own custom UI, if required.

@Override
public boolean showAddressInfoViewForActionID(HyperTrackMapFragment hyperTrackMapFragment, String actionID) {
  return true;
}

2. Map Initial State

By default the map's initial state is set to [0, 0]. To customize this, override getMapFragmentInitialState method. Use Android's CameraUpdateFactory class to return an instance of CameraUpdate object defining the map's initial camera state.

@Override
public CameraUpdate getMapFragmentInitialState(HyperTrackMapFragment hyperTrackMapFragment) {
  return CameraUpdateFactory.newLatLngZoom(INITIAL_MAP_LATLNG, INITIAL_MAP_ZOOM);
}

Map state

3. Source Place marker

Customizing Source Place Marker Background Image (by adding resources)

To customize the background image of this view, add a drawable resource in your application with the name ic_ht_source_place_marker.

Customizing Source Place Marker Background Image (programatically)

To customize the background image of this view, override getSourceMarkerIconForActionID method of HyperTrackMapAdapter.

@Override
public int getSourceMarkerIconForActionID(HyperTrackMapFragment hyperTrackMapFragment, String actionID) {
  return R.drawable.ic_ht_source_place_marker;
}

Customizing Source Place Marker View

To add a different view for the Source Place Marker, implement the getSourceMarkerViewForActionID method. The view that is provided in this method would replace the source place marker's default view.

@Override
@NonNull
public View getSourceMarkerViewForActionID(HyperTrackMapFragment hyperTrackMapFragment, String actionID) {
  return null;
}

4. Trailing Polyline

Trailing Polyline is the path covered by user. By default, trailing polyline is enabled.

Toggle Trailing Polyline Visibility

To toggle the visibility of trailing polyline, implement showTrailingPolyline method.

public boolean showTrailingPolyline() {
  return true;
}

5. Hero markers

Choosing a different Hero Marker icon or view per action

To use different hero marker for each action, override getHeroMarkerIconForActionID method in order to set an icon as hero marker or getHeroMarkerViewForActionID method in order to set a view as hero marker.

@Override
public int getHeroMarkerIconForActionID(HyperTrackMapFragment hyperTrackMapFragment, String actionID) {
  return R.drawable.ic_hero_marker;
}
@Override
public View getHeroMarkerViewForActionID(HyperTrackMapFragment hyperTrackMapFragment, String actionID) {
  return null;
}

[warning] Customizating Hero Marker programatically

getHeroMarkerViewForActionID method's implementation will override the one specified in getHeroMarkerIconForActionID.

Additional Customizations for Hero Marker

  • You can disable/enable rotation of hero marker by overwriting rotateHeroMarker method.
  • You can set the anchor (with respect to lat/lng position) by overwriting getHeroMarkerAnchorValues method.
@Override
public boolean rotateHeroMarker(HyperTrackMapFragment hyperTrackMapFragment, String actionID) {
  return true;
}

@Override
public float[] getHeroMarkerAnchorValues(HyperTrackMapFragment hyperTrackMapFragment, String actionID) {
  return new float[]{0.5f, 0.5f};
}

6. Expected Place marker

By default, Expected Place Marker is a custom view with ETA text as a part of this view.

Customizing Expected Place Marker Background Image (by adding resources)

To customize the background image of this view, add a drawable resource in your application with the name ic_ht_expected_place_marker.

Customizing Expected Place Marker Background Image (programatically)

To customize the background image of this view, override getExpectedPlaceMarkerIconForActionID method of HyperTrackMapAdapter.

@Override
public int getExpectedPlaceMarkerIconForActionID(HyperTrackMapFragment hyperTrackMapFragment, String actionID) {
  return R.drawable.ic_ht_expected_place_marker;
}

Customizing Expected Place Marker View

To add a different view for the Expected Place Marker, override the getExpectedPlaceMarkerViewForActionID method. The view that is provided in this method would replace the expected place marker's default view.

@Override
@NonNull
public View getExpectedPlaceMarkerViewForActionID(HyperTrackMapFragment hyperTrackMapFragment, String actionID) {
  return null;
}

[info] Customization for Other Map Markers

There are similar methods available to customize other Markers on the map such as Expected Place Marker, Source Marker and Action Summary Markers. Refer to HyperTrackMapAdapter reference for more info.

7. Action Detail Layout

By default, the Action Detail layout is enabled, showing the action status, duration remaining (ETA), distance remaining, action progress circular bar and user call button icon.

Toggle Action Detail Layout visibility

To toggle Action Detail layout visibility, override the showActionDetailForActionID method. Once it's hidden you can add your custum UI view.

@Override
public boolean showActionDetailForActionID(HyperTrackMapFragment hyperTrackMapFragment, String actionID) {
  return true;
}

8. Call button

By default, the Call Button is enabled provided the user's contact number had been set while creating the user entity.

Toggle Call button visibility

To toggle call button visibility, override the showCallButtonForActionID method. The Dialer intent is fired on the click of this button, taking the user to phone's dialer screen with the contact number entered.

@Override
public boolean showCallButtonForActionID(HyperTrackMapFragment hyperTrackMapFragment, String actionID) {
  return true;
}

Call button

9. User Info View

By default, the User Info View is enabled and it displays the User information such as name, photo, speed, distance travelled, battery, last updated time etc.

Toggle User Info View visibility

To toggle the visibility of User Info view, override showUserInfoForActionID method. Once it's hidden, you can add your own custom UI, if required.

@Override
public boolean showUserInfoForActionID(HyperTrackMapFragment hyperTrackMapFragment, String actionID) {
  return true;
}

10. Action Summary View

By default, the Action Summary View is enabled and it displays the starting and completion information for the Action including the metering details such as distance travelled, time taken, start and completion address etc.

Toggle Action Summary View

To toggle the Action Summary view visibility, override the showActionSummaryForActionID method. The Trip Summary View will be visible automatically on action completion, hiding the Hero Marker & the Expected Place Marker for the action.

@Override
public boolean showActionSummaryForActionID(HyperTrackMapFragment hyperTrackMapFragment, String actionID) {
  return true;
}

Summary

[success] Customizing the Consumer UI

In this guide, we covered customisations of the UI elements in the Map View. In addition, you can customize the zoom levels of the Map. These customisations are covered in the following guide.

We would like to make sure that you can design your end-consumer product experience the way you want. Do let us know if you need additional customisations on the map fragment by reaching out to us through our support channels.

results matching ""

    No results matching ""