androidhere-apiheremaps-android-sdk

Here SDK Android resize on layout changes


We are having hard times to smoothly resize a here SDK map on Android.

We want to smoothly resize the map to the bottom sheet collapse and hidden state as shown in demo app

But as you can see it does not really resize instead its jumps to the new position while the map keeps its dimensions and does not scale.

And this is what we did:

...
<com.here.sdk.mapview.MapView
    android:id="@+id/map"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginBottom="@dimen/nine_grid_unit" />

<androidx.constraintlayout.widget.ConstraintLayout
    android:id="@+id/menuBottomSheet"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white"
    android:clickable="true"
    android:elevation="@dimen/four_grid_unit"
    android:focusable="true"
    app:behavior_hideable="true"
    app:behavior_peekHeight="@dimen/thirtytwo_grid_unit"
    app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior">

    <View
        android:id="@+id/tap_stop"
        android:layout_width="@dimen/nine_grid_unit"
        android:layout_height="@dimen/one_grid_unit"
        android:layout_marginTop="@dimen/one_grid_unit"
        android:background="@color/grey_light"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <edeka.digital.app.widget.SegmentedControlView
        android:id="@+id/tabSwitchSegmentedControl"
        android:layout_width="@dimen/thirtyfive_grid_unit"
        android:layout_height="wrap_content"
        android:paddingStart="@dimen/three_grid_unit"
        android:paddingEnd="@dimen/three_grid_unit"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/tap_stop"
        app:segmentCount="2"
        app:segmentTitles="@array/segment_titles_shop_search" />

</androidx.constraintlayout.widget.ConstraintLayout>
...

And code:

val bottomBehavior = BottomSheetBehavior.from(binding.menuBottomSheet)
    bottomBehavior.addBottomSheetCallback(object : BottomSheetBehavior.BottomSheetCallback() {
        val mapView = binding.map
        override fun onSlide(bottomSheet: View, slideOffset: Float) {

        }

        override fun onStateChanged(bottomSheet: View, newState: Int) {

            bottomSheetBehaviorObservable.onNext(newState)

            when (newState) {
                BottomSheetBehavior.STATE_COLLAPSED -> {
                    mapView.bottom = binding.menuBottomSheet.top
                    mapView.invalidate()

                }
                BottomSheetBehavior.STATE_HIDDEN -> {
                    mapView.bottom = binding.menuBottomSheet.top
                    mapView.invalidate()
                }
                else -> { /* void */
                }
            }
        }
    })

I would have expected some kind of resize() function or that it layouts itself if layout dimensions change.

What we really want is already implemented in HERE WeGo App. The whole maps scales (inc. here logo) if user swipes the bottom sheet:

Scaling Map in HERE WeGo

Can anyone help us out?

The demo shown in 1 can be found here:

https://github.com/edekadigital/heremaps-demo


Solution

  • The best solution that I've found to achieve it is to add a new method:

    private fun updateMapView(bottomSheetTop: Int) {
        val mapView = binding.map
    
        val principalY = Math.min(bottomSheetTop / 2.0, mapView.height / 2.0)
        mapView.camera.principalPoint = Point2D(mapView.width / 2.0, principalY)
    
        val logoMargin = Math.max(0, mapView.bottom - bottomSheetTop)
        mapView.setWatermarkPosition(WatermarkPlacement.BOTTOM_CENTER, logoMargin.toLong())
    }
    

    and call it in onSlide and onStateChanged like this:

    updateMapView(bottomSheet.top)
    

    Note that you need to have the HERE logo at the bottom center position, otherwise it can't use an adjustable margin.

    I was also trying to resize the map view, but the results were unsatisfying. Here is the code if you want to give a try:

    private fun updateMapView(bottomSheetTop: Int) {
        val mapView = binding.map
        mapView.layoutParams.height = bottomSheetTop
        mapView.requestLayout()
    }