Optimize UI components for landscape

[Guardiola31337]

Optimize UI components for landscape e.g. displays on wide enough screens, moves so next always shown, etc.

cc @mapbox/navigation-android @mapbox/navigation-ios @d-prukop @zugaldia @truburt @AhmerKhan1 @jyrigo

[1ec5]

mapbox/mapbox-navigation-ios#1139 tracks a similar optimization on iOS.

[ve1oxby]

Details

submitted by: @ve1oxby date: 2022-07-24T07:16:01Z userid: JmmINGsGeQbIqbEMtcdZLTbVMk72 sessionid: 99df1802-35c5-48a8-ab70-2de5b93be792 app_version: v0.119.0 os_version: androidSdk=31 debug_info: appVersion: v0.119.0 navSdkVersion: 2.7.0-beta.1 navNativeVersion: 108.0.1 searchSdkVersion: 1.0.0-beta.34 mapStyle: mapbox://styles/mapbox-map-design/ckvmcnpk54xxy15tjy15i9pij userId: JmmINGsGeQbIqbEMtcdZLTbVMk72 sessionId: a242cadf-5013-467e-b4c7-bfc8a711d990 currentTime: 2022-07-24T07:15:00.390Z currentLocation: null sessionType: c sessionStartTime: 2022-07-24T07:13:26.104Z sessionStartLocation: lat.53.91536711702232, lon.27.575092717436814 navTilesVersion: no data routeTrafficUpdateTimestamp: 2022-07-24T07:13:25.095Z

---

Description

We received feedback from user.

The area used for route displaying is too small in landscape mode.

I am using application mostly in the landscape mode. The UI elements are obscuring almost all map space. Only 29% of the screen space is fully usable for route/map observation.

mode	area size 100%	Routeline and puck, incl. buttons	Absolutely clear area
	1080*2400	1080*1460 (61%)	720*1460 (41%)
	2310*1080	1030*1080 (45%)	670*1080 (29%)
	2310*1080	1310*1080 (57%)	1100*1080 (48%)

I have drawn some brief mockups on making us able for improving absolutely clear map area from 29 to 48 percent with the same UI elements text size. I believe that there are other ways UI designer can improve the solution.