[Drop-In UI] Ability to inject custom End Navigation button via Binder. (#6331)

tomaszrybakiewicz · web-flow · commit 1dc164d6c14b · 2022-09-15T14:29:45.000-07:00
* Introduced ViewBinderCustomization.infoPanelEndNavigationButtonBinder that allows injection of a custom Info Panel End Navigation Button.
Updated InfoPanelHeaderActiveGuidanceBinder and InfoPanelHeaderArrivalBinder layouts, and binding logic to use infoPanelEndNavigationButtonBinder.
Added InfoPanelEndNavigationButtonBinder that programmatically adds the End Navigation button.

* CHANGELOG entry and QA-Test-App example.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,7 @@ Mapbox welcomes participation and contributions from everyone.
 #### Features
 - Added `ViewBinderCustomization.infoPanelHeaderFreeDriveBinder`, `ViewBinderCustomization.infoPanelHeaderDestinationPreviewBinder`, `ViewBinderCustomization.infoPanelHeaderRoutesPreviewBinder`, `ViewBinderCustomization.infoPanelHeaderActiveGuidanceBinder` and `ViewBinderCustomization.infoPanelHeaderArrivalBinder` that allows injection of a custom header content for each Navigation State in `NavigationView`. [#6273](https://github.com/mapbox/mapbox-navigation-android/pull/6273)
 - Introduced `MapboxExtendableButtonParams` to allow end users to customize the default Drop-In UI buttons. [#6327](https://github.com/mapbox/mapbox-navigation-android/pull/6327)
+- Added `ViewBinderCustomization.infoPanelEndNavigationButtonBinder` that allows injection of a custom Info Panel End Navigation Button in `NavigationView`. [#6331](https://github.com/mapbox/mapbox-navigation-android/pull/6331)
 #### Bug fixes and improvements
 - Optimized calls to modify route arrow layer visibility. [#6308](https://github.com/mapbox/mapbox-navigation-android/pull/6308)
 - Provide better java support for `MapboxNavigationApp`. [#6292](https://github.com/mapbox/mapbox-navigation-android/pull/6292)
diff --git a/libnavui-dropin/api/current.txt b/libnavui-dropin/api/current.txt
@@ -116,6 +116,7 @@ package com.mapbox.navigation.dropin {
     method public java.util.List<com.mapbox.navigation.dropin.ActionButtonDescription>? getCustomActionButtons();
     method public com.mapbox.navigation.dropin.binder.infopanel.InfoPanelBinder? getInfoPanelBinder();
     method public com.mapbox.navigation.ui.base.lifecycle.UIBinder? getInfoPanelContentBinder();
+    method public com.mapbox.navigation.ui.base.lifecycle.UIBinder? getInfoPanelEndNavigationButtonBinder();
     method public com.mapbox.navigation.ui.base.lifecycle.UIBinder? getInfoPanelHeaderActiveGuidanceBinder();
     method public com.mapbox.navigation.ui.base.lifecycle.UIBinder? getInfoPanelHeaderArrivalBinder();
     method public com.mapbox.navigation.ui.base.lifecycle.UIBinder? getInfoPanelHeaderBinder();
@@ -132,6 +133,7 @@ package com.mapbox.navigation.dropin {
     method public void setCustomActionButtons(java.util.List<com.mapbox.navigation.dropin.ActionButtonDescription>?);
     method public void setInfoPanelBinder(com.mapbox.navigation.dropin.binder.infopanel.InfoPanelBinder?);
     method public void setInfoPanelContentBinder(com.mapbox.navigation.ui.base.lifecycle.UIBinder?);
+    method public void setInfoPanelEndNavigationButtonBinder(com.mapbox.navigation.ui.base.lifecycle.UIBinder?);
     method public void setInfoPanelHeaderActiveGuidanceBinder(com.mapbox.navigation.ui.base.lifecycle.UIBinder?);
     method public void setInfoPanelHeaderArrivalBinder(com.mapbox.navigation.ui.base.lifecycle.UIBinder?);
     method public void setInfoPanelHeaderBinder(com.mapbox.navigation.ui.base.lifecycle.UIBinder?);
@@ -148,6 +150,7 @@ package com.mapbox.navigation.dropin {
     property public final java.util.List<com.mapbox.navigation.dropin.ActionButtonDescription>? customActionButtons;
     property public final com.mapbox.navigation.dropin.binder.infopanel.InfoPanelBinder? infoPanelBinder;
     property public final com.mapbox.navigation.ui.base.lifecycle.UIBinder? infoPanelContentBinder;
+    property public final com.mapbox.navigation.ui.base.lifecycle.UIBinder? infoPanelEndNavigationButtonBinder;
     property public final com.mapbox.navigation.ui.base.lifecycle.UIBinder? infoPanelHeaderActiveGuidanceBinder;
     property public final com.mapbox.navigation.ui.base.lifecycle.UIBinder? infoPanelHeaderArrivalBinder;
     property public final com.mapbox.navigation.ui.base.lifecycle.UIBinder? infoPanelHeaderBinder;
diff --git a/libnavui-dropin/src/main/java/com/mapbox/navigation/dropin/ViewBinder.kt b/libnavui-dropin/src/main/java/com/mapbox/navigation/dropin/ViewBinder.kt
@@ -77,6 +77,11 @@ internal class ViewBinder {
     val infoPanelTripProgressBinder: StateFlow<UIBinder?>
         get() = _infoPanelTripProgressBinder.asStateFlow()
 
+    private val _infoPanelEndNavigationButtonBinder: MutableStateFlow<UIBinder?> =
+        MutableStateFlow(null)
+    val infoPanelEndNavigationButtonBinder: StateFlow<UIBinder?>
+        get() = _infoPanelEndNavigationButtonBinder.asStateFlow()
+
     private val _infoPanelContentBinder: MutableStateFlow<UIBinder?> = MutableStateFlow(null)
     val infoPanelContentBinder: StateFlow<UIBinder?> get() = _infoPanelContentBinder.asStateFlow()
 
@@ -111,6 +116,9 @@ internal class ViewBinder {
             _infoPanelTripProgressBinder.emitOrNull(it)
         }
         customization.infoPanelContentBinder?.also { _infoPanelContentBinder.emitOrNull(it) }
+        customization.infoPanelEndNavigationButtonBinder?.also {
+            _infoPanelEndNavigationButtonBinder.emitOrNull(it)
+        }
     }
 
     private fun <T : UIBinder> MutableStateFlow<T?>.emitOrNull(v: T) {
diff --git a/libnavui-dropin/src/main/java/com/mapbox/navigation/dropin/ViewBinderCustomization.kt b/libnavui-dropin/src/main/java/com/mapbox/navigation/dropin/ViewBinderCustomization.kt
@@ -89,6 +89,12 @@ class ViewBinderCustomization {
      */
     var infoPanelContentBinder: UIBinder? = null
 
+    /**
+     * Customize the Info Panel End Navigation Button by providing your own [UIBinder].
+     * Use [UIBinder.USE_DEFAULT] to reset to default.
+     */
+    var infoPanelEndNavigationButtonBinder: UIBinder? = null
+
     /**
      * Customize the Action Buttons by providing your own [UIBinder].
      * Use [UIBinder.USE_DEFAULT] to reset to default.
diff --git a/libnavui-dropin/src/main/java/com/mapbox/navigation/dropin/ViewStyleCustomization.kt b/libnavui-dropin/src/main/java/com/mapbox/navigation/dropin/ViewStyleCustomization.kt
@@ -270,7 +270,10 @@ class ViewStyleCustomization {
          */
         fun defaultEndNavigationButtonParams(context: Context) = MapboxExtendableButtonParams(
             R.style.DropInStyleExitButton,
-            context.defaultLayoutParams(),
+            context.defaultLayoutParams().apply {
+                marginEnd =
+                    context.resources.getDimensionPixelSize(R.dimen.mapbox_infoPanel_paddingEnd)
+            },
         )
 
         /**
diff --git a/libnavui-dropin/src/main/java/com/mapbox/navigation/dropin/binder/infopanel/InfoPanelEndNavigationButtonBinder.kt b/libnavui-dropin/src/main/java/com/mapbox/navigation/dropin/binder/infopanel/InfoPanelEndNavigationButtonBinder.kt
@@ -0,0 +1,22 @@
+package com.mapbox.navigation.dropin.binder.infopanel
+
+import android.view.ViewGroup
+import com.mapbox.navigation.base.ExperimentalPreviewMapboxNavigationAPI
+import com.mapbox.navigation.core.lifecycle.MapboxNavigationObserver
+import com.mapbox.navigation.dropin.NavigationViewContext
+import com.mapbox.navigation.dropin.component.infopanel.EndNavigationButtonComponent
+import com.mapbox.navigation.ui.base.lifecycle.UIBinder
+
+@ExperimentalPreviewMapboxNavigationAPI
+internal class InfoPanelEndNavigationButtonBinder(
+    private val context: NavigationViewContext
+) : UIBinder {
+
+    override fun bind(viewGroup: ViewGroup): MapboxNavigationObserver {
+        return EndNavigationButtonComponent(
+            context.store,
+            viewGroup,
+            context.styles.endNavigationButtonParams
+        )
+    }
+}
diff --git a/libnavui-dropin/src/main/java/com/mapbox/navigation/dropin/binder/infopanel/InfoPanelHeaderActiveGuidanceBinder.kt b/libnavui-dropin/src/main/java/com/mapbox/navigation/dropin/binder/infopanel/InfoPanelHeaderActiveGuidanceBinder.kt
@@ -30,7 +30,7 @@ internal class InfoPanelHeaderActiveGuidanceBinder(
         return context.run {
             navigationListOf(
                 tripProgressComponent(binding.tripProgressLayout),
-                endNavigationButtonComponent(binding.endNavigationContainer)
+                endNavigationButtonComponent(binding.endNavigationButtonLayout)
             )
         }
     }
diff --git a/libnavui-dropin/src/main/java/com/mapbox/navigation/dropin/binder/infopanel/InfoPanelHeaderArrivalBinder.kt b/libnavui-dropin/src/main/java/com/mapbox/navigation/dropin/binder/infopanel/InfoPanelHeaderArrivalBinder.kt
@@ -30,7 +30,7 @@ internal class InfoPanelHeaderArrivalBinder(
         return context.run {
             navigationListOf(
                 arrivalTextComponent(binding.arrivedText),
-                endNavigationButtonComponent(binding.endNavigation)
+                endNavigationButtonComponent(binding.endNavigationButtonLayout)
             )
         }
     }
diff --git a/libnavui-dropin/src/main/java/com/mapbox/navigation/dropin/internal/NavigationViewContextEx.kt b/libnavui-dropin/src/main/java/com/mapbox/navigation/dropin/internal/NavigationViewContextEx.kt
@@ -7,9 +7,9 @@ import androidx.appcompat.widget.AppCompatTextView
 import com.mapbox.navigation.base.ExperimentalPreviewMapboxNavigationAPI
 import com.mapbox.navigation.core.lifecycle.MapboxNavigationObserver
 import com.mapbox.navigation.dropin.NavigationViewContext
+import com.mapbox.navigation.dropin.binder.infopanel.InfoPanelEndNavigationButtonBinder
 import com.mapbox.navigation.dropin.binder.infopanel.InfoPanelTripProgressBinder
 import com.mapbox.navigation.dropin.component.infopanel.ArrivalTextComponent
-import com.mapbox.navigation.dropin.component.infopanel.EndNavigationButtonComponent
 import com.mapbox.navigation.dropin.component.infopanel.POINameComponent
 import com.mapbox.navigation.dropin.component.infopanel.RoutePreviewButtonComponent
 import com.mapbox.navigation.dropin.component.infopanel.StartNavigationButtonComponent
@@ -29,8 +29,14 @@ internal fun NavigationViewContext.startNavigationButtonComponent(buttonContaine
     StartNavigationButtonComponent(store, buttonContainer, styles.startNavigationButtonParams)
 
 @ExperimentalPreviewMapboxNavigationAPI
-internal fun NavigationViewContext.endNavigationButtonComponent(buttonContainer: ViewGroup) =
-    EndNavigationButtonComponent(store, buttonContainer, styles.endNavigationButtonParams)
+internal fun NavigationViewContext.endNavigationButtonComponent(
+    endNavigationButtonLayout: ViewGroup
+): MapboxNavigationObserver {
+    val binderFlow = uiBinders.infoPanelEndNavigationButtonBinder.map {
+        it ?: InfoPanelEndNavigationButtonBinder(this)
+    }
+    return reloadOnChange(binderFlow) { it.bind(endNavigationButtonLayout) }
+}
 
 @ExperimentalPreviewMapboxNavigationAPI
 internal fun NavigationViewContext.arrivalTextComponent(textView: AppCompatTextView) =
diff --git a/libnavui-dropin/src/main/java/com/mapbox/navigation/dropin/internal/extensions/MapboxExtendableButtonEx.kt b/libnavui-dropin/src/main/java/com/mapbox/navigation/dropin/internal/extensions/MapboxExtendableButtonEx.kt
@@ -0,0 +1,27 @@
+@file:JvmName("MapboxExtendableButtonEx")
+package com.mapbox.navigation.dropin.internal.extensions
+
+import android.content.res.Resources
+import androidx.annotation.StyleRes
+import com.mapbox.navigation.base.ExperimentalPreviewMapboxNavigationAPI
+import com.mapbox.navigation.ui.base.view.MapboxExtendableButton
+import com.mapbox.navigation.utils.internal.logE
+
+/**
+ * Safely change the style of the receiver [MapboxExtendableButton].
+ *
+ * This method calls [MapboxExtendableButton.updateStyle] and captures [Resources.NotFoundException].
+ *
+ * @see [MapboxExtendableButton.updateStyle]
+ */
+@ExperimentalPreviewMapboxNavigationAPI
+internal fun MapboxExtendableButton.tryUpdateStyle(@StyleRes style: Int) {
+    try {
+        updateStyle(style)
+    } catch (e: Resources.NotFoundException) {
+        logE(
+            "Failed to update style: ${e.localizedMessage}",
+            "MapboxExtendableButton"
+        )
+    }
+}
diff --git a/libnavui-dropin/src/main/res/layout/mapbox_info_panel_header_active_guidance_layout.xml b/libnavui-dropin/src/main/res/layout/mapbox_info_panel_header_active_guidance_layout.xml
@@ -14,19 +14,22 @@
         android:layout_height="wrap_content"
         android:layout_marginTop="20dp"
         app:layout_constraintTop_toTopOf="parent"
-        app:layout_constraintEnd_toStartOf="@id/endNavigationContainer"
-        app:layout_constraintStart_toStartOf="parent" />
+        app:layout_constraintEnd_toStartOf="@id/endNavigationButtonLayout"
+        app:layout_constraintStart_toStartOf="parent"
+        tools:layout_height="52dp"
+        tools:background="#ccc" />
 
     <FrameLayout
-        android:id="@+id/endNavigationContainer"
+        android:id="@+id/endNavigationButtonLayout"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
-        android:maxWidth="72dp"
-        android:layout_marginEnd="10dp"
+        android:maxWidth="82dp"
+        android:layout_marginTop="26dp"
         app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintTop_toTopOf="parent"
-        tools:layout_height="52dp"
-        tools:layout_width="72dp" />
+        tools:layout_width="@dimen/mapbox_infoPanel_buttonWidth"
+        tools:layout_height="@dimen/mapbox_infoPanel_buttonHeight"
+        tools:layout_marginEnd="@dimen/mapbox_infoPanel_paddingEnd"
+        tools:background="#ddd" />
 
 </merge>
diff --git a/libnavui-dropin/src/main/res/layout/mapbox_info_panel_header_arrival_layout.xml b/libnavui-dropin/src/main/res/layout/mapbox_info_panel_header_arrival_layout.xml
@@ -17,20 +17,23 @@
         android:text="@string/mapbox_drop_in_arrived"
         android:maxLines="2"
         android:ellipsize="end"
-        app:layout_constraintTop_toTopOf="@+id/endNavigation"
-        app:layout_constraintBottom_toBottomOf="@+id/endNavigation"
+        app:layout_constraintTop_toTopOf="@+id/endNavigationButtonLayout"
+        app:layout_constraintBottom_toBottomOf="@+id/endNavigationButtonLayout"
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintHorizontal_bias="0.5" />
 
-    <com.mapbox.navigation.ui.base.view.MapboxExtendableButton
-        tools:style="@style/DropInStyleExitButton"
-        android:id="@+id/endNavigation"
-        android:layout_width="72dp"
-        android:layout_height="52dp"
+    <FrameLayout
+        android:id="@+id/endNavigationButtonLayout"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:maxWidth="82dp"
         android:layout_marginTop="26dp"
-        android:layout_marginEnd="10dp"
         app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintTop_toTopOf="parent" />
+        app:layout_constraintTop_toTopOf="parent"
+        tools:layout_width="@dimen/mapbox_infoPanel_buttonWidth"
+        tools:layout_height="@dimen/mapbox_infoPanel_buttonHeight"
+        tools:layout_marginEnd="@dimen/mapbox_infoPanel_paddingEnd"
+        tools:background="#ddd" />
 
 </merge>
diff --git a/libnavui-dropin/src/main/res/values/dimens.xml b/libnavui-dropin/src/main/res/values/dimens.xml
@@ -4,6 +4,10 @@
 
     <dimen name="mapbox_infoPanel_peekHeight">104dp</dimen>
 
+    <dimen name="mapbox_infoPanel_buttonWidth">72dp</dimen>
+    <dimen name="mapbox_infoPanel_buttonHeight">52dp</dimen>
+    <dimen name="mapbox_infoPanel_paddingEnd">10dp</dimen>
+
     <dimen name="mapbox_infoPanel_text_headline">27sp</dimen>
     <dimen name="mapbox_speed_limit_text_regular">14sp</dimen>
     <dimen name="mapbox_road_name_text_regular">14sp</dimen>
diff --git a/qa-test-app/src/main/java/com/mapbox/navigation/qa_test_app/view/customnavview/CustomInfoPanelEndNavButtonBinder.kt b/qa-test-app/src/main/java/com/mapbox/navigation/qa_test_app/view/customnavview/CustomInfoPanelEndNavButtonBinder.kt
@@ -0,0 +1,40 @@
+package com.mapbox.navigation.qa_test_app.view.customnavview
+
+import android.view.Gravity
+import android.view.ViewGroup
+import androidx.core.view.setPadding
+import com.mapbox.navigation.base.ExperimentalPreviewMapboxNavigationAPI
+import com.mapbox.navigation.core.MapboxNavigation
+import com.mapbox.navigation.core.lifecycle.MapboxNavigationObserver
+import com.mapbox.navigation.dropin.NavigationViewApi
+import com.mapbox.navigation.qa_test_app.R
+import com.mapbox.navigation.ui.base.lifecycle.UIBinder
+import com.mapbox.navigation.ui.base.lifecycle.UIComponent
+import com.mapbox.navigation.ui.base.view.MapboxExtendableButton
+
+@OptIn(ExperimentalPreviewMapboxNavigationAPI::class)
+class CustomInfoPanelEndNavButtonBinder(
+    private val api: NavigationViewApi
+) : UIBinder {
+    override fun bind(viewGroup: ViewGroup): MapboxNavigationObserver {
+        val button = MapboxExtendableButton(viewGroup.context)
+        button.updateStyle(R.style.DropInStyleExitButton)
+        button.setPadding(0)
+        button.setBackgroundResource(R.drawable.mapbox_bg_circle_outline)
+        button.foregroundGravity = Gravity.CENTER
+        val lp = ViewGroup.MarginLayoutParams(52.dp, 52.dp).apply {
+            marginEnd = 30.dp
+        }
+        viewGroup.removeAllViews()
+        viewGroup.addView(button, lp)
+
+        return object : UIComponent() {
+            override fun onAttached(mapboxNavigation: MapboxNavigation) {
+                super.onAttached(mapboxNavigation)
+                button.setOnClickListener {
+                    api.startFreeDrive()
+                }
+            }
+        }
+    }
+}
diff --git a/qa-test-app/src/main/java/com/mapbox/navigation/qa_test_app/view/customnavview/CustomizedViewModel.kt b/qa-test-app/src/main/java/com/mapbox/navigation/qa_test_app/view/customnavview/CustomizedViewModel.kt
@@ -10,6 +10,7 @@ class CustomizedViewModel : ViewModel() {
     val useCustomInfoPanelLayout = MutableLiveData(false)
     val useCustomInfoPanelStyles = MutableLiveData(false)
     val showCustomInfoPanelContent = MutableLiveData(false)
+    val showCustomInfoPanelEndNavButton = MutableLiveData(false)
     val showBottomSheetInFreeDrive = MutableLiveData(false)
     val enableDestinationPreview = MutableLiveData(true)
     val isInfoPanelHideable = MutableLiveData(false)
diff --git a/qa-test-app/src/main/java/com/mapbox/navigation/qa_test_app/view/customnavview/MapboxNavigationViewCustomizedActivity.kt b/qa-test-app/src/main/java/com/mapbox/navigation/qa_test_app/view/customnavview/MapboxNavigationViewCustomizedActivity.kt
@@ -267,6 +267,11 @@ class MapboxNavigationViewCustomizedActivity : DrawerActivity() {
             viewModel.showCustomInfoPanelContent,
             ::toggleCustomInfoPanelContent
         )
+        bindSwitch(
+            menuBinding.toggleCustomInfoPanelEndNavButton,
+            viewModel.showCustomInfoPanelEndNavButton,
+            ::toggleCustomInfoPanelEndNavButton
+        )
         bindSwitch(
             menuBinding.toggleCustomInfoPanel,
             viewModel.useCustomInfoPanelLayout,
@@ -527,6 +532,17 @@ class MapboxNavigationViewCustomizedActivity : DrawerActivity() {
         }
     }
 
+    private fun toggleCustomInfoPanelEndNavButton(enabled: Boolean) {
+        binding.navigationView.customizeViewBinders {
+            if (enabled) {
+                infoPanelEndNavigationButtonBinder =
+                    CustomInfoPanelEndNavButtonBinder(binding.navigationView.api)
+            } else {
+                infoPanelEndNavigationButtonBinder = UIBinder.USE_DEFAULT
+            }
+        }
+    }
+
     private fun toggleCustomInfoPanelLayout(enabled: Boolean) {
         binding.navigationView.customizeViewBinders {
             infoPanelBinder =
diff --git a/qa-test-app/src/main/res/layout/layout_drawer_menu_nav_view_custom.xml b/qa-test-app/src/main/res/layout/layout_drawer_menu_nav_view_custom.xml
@@ -155,6 +155,15 @@
                 android:text="Custom Content"
                 android:textAllCaps="true" />
 
+            <androidx.appcompat.widget.SwitchCompat
+                android:id="@+id/toggleCustomInfoPanelEndNavButton"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:layout_weight="1"
+                android:paddingVertical="10dp"
+                android:text="Custom End Nav. Button"
+                android:textAllCaps="true" />
+
             <androidx.appcompat.widget.SwitchCompat
                 android:id="@+id/toggleIsInfoPanelHideable"
                 android:layout_width="match_parent"

Original file line number	Diff line number	Diff line change
`@@ -30,7 +30,7 @@ internal class InfoPanelHeaderActiveGuidanceBinder(`
`30`	`30`	`return context.run {`
`31`	`31`	`navigationListOf(`
`32`	`32`	`tripProgressComponent(binding.tripProgressLayout),`
`33`		`- endNavigationButtonComponent(binding.endNavigationContainer)`
	`33`	`+ endNavigationButtonComponent(binding.endNavigationButtonLayout)`
`34`	`34`	`)`
`35`	`35`	`}`
`36`	`36`	`}`