Skip to main content

Safe area

Vehicles can have various shapes of displays (for example circle displays, displays with a rounded corner) so the app should be able to fit its content properly.

Navigation SDK UX Framework allows developers to set the margins around UI elements defining so-called "Safe Area" - it's a rectangular area the whole UI fits in (excluding the map, the map should take the whole available space).

To redefine these margins you need to put the following values in your dimens.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>
<dimen name="safe_area_top_margin">50dp</dimen>
<dimen name="safe_area_bottom_margin">50dp</dimen>
<dimen name="safe_area_left_margin">100dp</dimen>
<dimen name="safe_area_right_margin">100dp</dimen>
</resources>

To show this safe area (the red rectangle on the screenshot above) you need to switch the corresponding toggle in the debug setting.

Was this page helpful?