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 driver 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>

Hide/Show Order Status Toolbar

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

@Override
public boolean showOrderStatusToolbar(HTMapFragment mapFragment) {
  return false;
}

2. Hero markers

By default, following are the Hero Markers for Vehicle Types Bike, Car, Van & Walk respectively.

Hero markers

Choosing your own Hero Marker icon

To use your own hero marker icon, add drawable resources in your application with the same name as following.

  • ic_ht_hero_marker_bike.png
  • ic_ht_hero_marker_car.png
  • ic_ht_hero_marker_van.png
  • ic_ht_hero_marker_walk.png

Choosing a different Hero Marker icon per task

To use different hero marker for each task, override getHeroMarkerIconForTaskID method in order to set an icon as hero marker or getHeroMarkerViewForTaskID method in order to set a view as hero marker.

@Override
public int getHeroMarkerIconForTaskID(HTMapFragment htMapFragment, String taskID) {
  return R.drawable.ic_hero_marker;
}

[warning] Customizating Hero Marker programatically

getHeroMarkerViewForTaskID method's implementation will override the one specified in getHeroMarkerIconForTaskID.

Customize hero markers

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(HTMapFragment htMapFragment, String taskID) {
  return true;
}

@Override
public float[] getHeroMarkerAnchorValues(HTMapFragment mapFragment, String taskID) {
  return new float[]{0.5f, 0.5f};
}

3. Destination marker

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

Customizing Destination 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_destination_marker.

Customizing Destination Marker Background Image (programatically)

To customize the background image of this view, override getDestinationMarkerIconForTaskID method of HTMapAdapter.

Customizing Destination Marker View

To add a different view for the Destination Marker, override the getDestinationMarkerViewForTaskID method. The view that is provided in this method would replace the destination marker's default view.

Customize destination markers

[info] Customization for Other Map Markers

There are similar methods available to customize other Markers on the map such as Destination Marker, Source Marker and Task Summary Markers. Refer to HTMapAdapter reference for more info.

4. Driver Info View

By default, the Driver Info View is enabled and it displays the Driver information such as Driver's Photo, Driver's Name etc.

Toggle Driver Info View visibility

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

@Override
public boolean showDriverInfoForTaskID(HTMapFragment htMapFragment, String taskID) {
  return true;
}

Driver info

5. Address Info View

By default, the Address Info view is enabled and it displays the destination address for the ongoing task

Toggle Address Info View visibility

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

@Override
public boolean showAddressInfoViewForTaskID(HTMapFragment htMapFragment, String taskID) {
  return true;
}

Address info

6. Edit Destination

By default, the Edit Destination functionality is enabled and it allows the observer to edit the destination for the driver.

There are callbacks available in HTMapFragmentCallback notifying about the events while editing destination. Also, the updated destination is then notified to the driver with the updated ETA.

Disable Edit Destination functionality

To disable Edit Destination, override the disableEditDestinationForTaskID method as shown below.

@Override
public boolean disableEditDestinationForTaskID(HTMapFragment mapFragment, String taskID) {
  return true;
}

Edit destination

7. 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(HTMapFragment mapFragment) {
  return CameraUpdateFactory.newLatLngZoom(INITIAL_MAP_LATLNG, INITIAL_MAP_ZOOM);
}

Map state

8. Order Details button

By default, the Order Details Button is hidden but it can be used to show more details about the order.

Toggle Order Details Button Visibility

To toggle the visibility of Order Details Button, override the showOrderDetailsButtonForTaskID method. A callback is fired on the click of this event which can be customized to perform an action as per the business logic of your application.

@Override
public boolean showOrderDetailsButtonForTaskID(HTMapFragment htMapFragment, String taskID) {
  return true;
}

Order detail

9. Call button

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

Toggle Call button visibility

To toggle call button visibility, override the setCallButtonVisibility 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 showCallButtonForTaskID(HTMapFragment htMapFragment, String taskID) {
  return true;
}

Call button

10. Trip Summary View

By default, the Trip Summary View is enabled and it displays the starting and completion information for the Task including the metering details such as Distance travelled, Time taken etc.

Toggle Trip Summary View

To toggle the Trip Summary view visibility, override the showTaskSummaryForTaskID method. The Trip Summary View will be visible automatically on task completion, hiding the Hero Marker & the Destination Marker for the task.

@Override
public boolean showTaskSummaryForTaskID(HTMapFragment htMapFragment, String taskID) {
  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 ""