Map UI Extensions

The Android Maps SDK provides the following built-in UI views:

  • Compass button
  • Current location button
  • Panning controls
  • Zooming controls
  • TomTom logo

You can toggle the visibility of these views using the UiSettings class. Changes made on this class are reflected on the map immediately. Each UI element has a pre defined style that determines its position relative to the edge of the map. This style can be overridden to provide a custom position, adjust size, or replace default colors. It is also possible to alter these parameters in runtime by modifying the view’s LayoutParams.

To use this library, add the following dependency to the build.gradle file:

api("com.tomtom.online:sdk-maps-ui-extensions:{libversion}")

Compass

By default, the compass button is enabled and located in the top left corner of the map - ‘MapView'. The compass appears only when the map orientation is different than zero (‘North' position). When the user clicks on the compass button, the map orientation is set to zero and the compass disappears.

Default

Pressed

North up

  • To disable the compass button:
JAVA
KOTLIN
tomtomMap.getUiSettings().getCompassView().hide();
tomtomMap.uiSettings.compassView.hide()
  • To enable the compass button:
JAVA
KOTLIN
tomtomMap.getUiSettings().getCompassView().show();
tomtomMap.uiSettings.compassView.show()
  • To override the default style:
1<style name="CompassView" parent="BaseCompactView">
2 <item name="android:layout_gravity">top|start</item>
3 <item name="android:layout_marginStart">@dimen/compass_default_margin_start</item>
4 <item name="android:layout_marginTop">@dimen/compass_default_margin_top</item>
5</style>

Current location

By default, the current location button is enabled and placed in the bottom left corner of the map -'MapView'. The current location button appears only when the map center position on the screen is different from user’s current location. When the user clicks on the current location button, the map location is set to the user’s location and the button disappears. The default action for the button centers the map on the user’s location if 'MapView' has been set up to show the current position on 'YES'.

Default

Pressed

  • To disable the current location button:
JAVA
KOTLIN
tomtomMap.getUiSettings().getCurrentLocationView().hide();
tomtomMap.uiSettings.currentLocationView.hide()
  • To enable the current location button:
JAVA
KOTLIN
tomtomMap.getUiSettings().getCurrentLocationView().show();
tomtomMap.uiSettings.currentLocationView.show()
  • To override the default style:
1<style name="CenterOnCurrentLocationView" parent="BaseCenterOnCurrentLocationView">
2 <item name="android:layout_gravity">bottom|start</item>
3 <item name="android:layout_marginStart">@dimen/compass_default_margin_start</item>
4 <item name="android:layout_marginBottom">@dimen/current_location_default_margin_bottom</item>
5</style>

Panning controls

By default, the panning controls view is disabled and it is placed vertically in the center and horizontally on right site of the map -'MapView'. The default action for the view is to move the map in the desired direction.

Pan down

Pan left

Pan right

Pan up

  • To enable the panning controls:
JAVA
KOTLIN
tomtomMap.getUiSettings().getPanningControlsView().show();
tomtomMap.uiSettings.panningControlsView.show()
  • To disable the panning controls:
JAVA
KOTLIN
tomtomMap.getUiSettings().getPanningControlsView().hide();
tomtomMap.uiSettings.panningControlsView.hide()
  • To override the default style:
1<style name="ArrowButton" parent="GenericControlButton" />
2
3<style name="ArrowButtonsGroup" parent="GenericControlButtonsGroup">
4 <item name="android:layout_width">150dp</item>
5 <item name="android:layout_marginRight">80dp</item>
6</style>

Zooming controls

By default, the zooming controls view is disabled and it is placed vertically in the center and horizontally on right site of the map -'MapView'. The default action for the view is to zoom in or zoom out the map.

Zoom in

Zoom out

  • To enable the zooming controls:
JAVA
KOTLIN
tomtomMap.getUiSettings().getZoomingControlsView().show();
tomtomMap.uiSettings.zoomingControlsView.show()
  • To disable the zooming controls:
JAVA
KOTLIN
tomtomMap.getUiSettings().getZoomingControlsView().hide();
tomtomMap.uiSettings.zoomingControlsView.hide()
  • To override the default style:
1<style name="ZoomButton" parent="GenericControlButton" />
2
3<style name="ZoomButtonsGroup" parent="GenericControlButtonsGroup">
4 <item name="android:layout_width">@dimen/control_button_default_size</item>
5</style>

By default, logo is placed vertically on the bottom and horizontally on the left site of the map -'MapView'. However, the position of the logo can be changed around MapView.

Default logo

Inverted logo colors

  • To change logo gravity:
JAVA
KOTLIN
tomtomMap.getUiSettings().getLogoView().setGravity(gravity);
tomtomMap.uiSettings.logoView.setGravity(gravity)
  • To restore logo gravity:
JAVA
KOTLIN
tomtomMap.getUiSettings().getLogoView().restoreDefaultGravity();
tomtomMap.uiSettings.logoView.restoreDefaultGravity()
  • To change logo margins:
JAVA
KOTLIN
tomtomMap.getUiSettings().getLogoView().setMargins(left, top, right, bottom);
tomtomMap.uiSettings.logoView.setMargins(left, top, right, bottom)
  • To restore logo margins:
JAVA
KOTLIN
tomtomMap.getUiSettings().getLogoView().restoreDefaultMargins();
tomtomMap.uiSettings.logoView.restoreDefaultMargins()
  • To apply inverted logo colors:
JAVA
KOTLIN
tomtomMap.getUiSettings().getLogoView().applyInvertedLogo();
tomtomMap.uiSettings.logoView.applyInvertedLogo()
  • To apply default logo colors:
JAVA
KOTLIN
tomtomMap.getUiSettings().getLogoView().applyDefaultLogo();
tomtomMap.uiSettings.logoView.applyDefaultLogo()
  • To override the default style:
1<style name="LogoView" parent="BaseLogoView" >
2 <item name="android:layout_gravity">bottom|left</item>
3 <item name="android:layout_margin">@dimen/common_layout_zero_dp</item>
4</style>

API Reference

JavaDocMapUiExtensions_2.4.807 (JavaDocMapUiExtensions_2.4.807.zip)