Customize view elements

This guide will cover customization of the fragment, customization such as choosing your own hero marker, show/hide UI elements.

UI components

1. Order Status Toolbar

By default, the Order Status Toolbar is enabled and it displays the order status and sub-status as the title and subtitle respectively.

Customizing Order Status Toolbar

To customize Order Status Toolbar, add a resource in your styles.xml file with the name HTOrderStatusToolbarTheme as shown below. You can then customize the style to something that goes well with your overall app theme.

 <!-- Customize HyperTrack Styles to support our AppTheme -->
<style name="HTOrderStatusToolbarTheme" parent="ThemeOverlay.AppCompat.ActionBar">
  <item name="android:background">@color/colorPrimary</item>
  <item name="colorControlNormal">@color/white</item>
  <item name="android:textColorPrimary">@color/white</item>
  <item name="titleTextColor">@color/white</item>
  <item name="subtitleTextColor">@color/white</item>
</style>

Use your toolbar

You can use your toolbar with customization. Toolbar title and subtitle will set by SDK according to the action status.

@Override
public Toolbar getToolbar(HyperTrackMapFragment hyperTrackMapFragment) {
  return null;
}

Hide/Show Order Status Toolbar

You can toggle Order Status Toolbar's visibility by overriding the method showOrderStatusToolbar.

@Override
public boolean showOrderStatusToolbar(HyperTrackMapFragment hyperTrackMapFragment) {
  return false;
}

2. Hero markers

By default, name of the user and eta will show up on hero marker.

Choosing a different Hero Marker icon or view per action

To use different hero marker view 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 View getHeroMarkerViewForActionID(HyperTrackMapFragment hyperTrackMapFragment, String actionID) {
  return null;
}

3. Trailing Polyline

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

Toggle Trailing Polyline Visibility

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

public boolean showTrailingPolyline() {
  return true;
}

[info] Only Single Action

Trailing Polyline is only visible when you are tracking single action. For multiple action tracking polyline will get disabled automatically.

4. Expected Place marker

Customizing Expected Place Marker Background Image (programatically)

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

@Override
public int getMultipleActionsExpectedPlaceMarkerIcon(HyperTrackMapFragment hyperTrackMapFragment) {
  return R.drawable.ic_ht_destination_marker_default;
}

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 getMultipleActionsExpectedPlaceMarkerView(HyperTrackMapFragment hyperTrackMapFragment) {
  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.

5. 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;
}

Address info

6. 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

[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.

Was this helpful? Yes, thanks! Not really

results matching ""

    No results matching ""