@apexnative/navigation 1.0.0-alpha.5 → 1.0.0-alpha.7

package/android/src/main/java/dev/apexnative/navigation/viewcontrollers/stack/StackViews.kt

@@ -15,6 +15,7 @@ import dev.apexnative.navigation.viewcontrollers.component.ComponentViewControll
 import dev.apexnative.navigation.viewcontrollers.externalcomponent.ExternalComponentViewController
 import dev.apexnative.navigation.viewcontrollers.stack.StackDisplay.Motion
 import dev.apexnative.navigation.viewcontrollers.viewcontroller.ViewController
+import dev.apexnative.navigation.views.animations.AnimationLayer
 import dev.apexnative.navigation.views.animations.AnimationRules
 import dev.apexnative.navigation.views.animations.SideAnimator
 import dev.apexnative.navigation.views.animations.SystemTransition
@@ -149,14 +150,17 @@ internal class StackViews(private val stack: StackController) : StackDisplay {
         }
     }
 
-    // The elements go into a layer over the screens, and back as the screen's animator ends or stops. A shared element
-    // without a duration takes the screen's fade: its own single `alpha`, else 300 ms.
+    // The elements play in their screens and the pairs' copies fly in a layer over them, all done as the screen's
+    // animator ends or stops. A shared element without a duration takes the screen's fade: its own single `alpha`,
+    // else 300 ms.
     override fun animateCustom(screen: ViewController<*>, custom: StackDisplay.Custom, done: () -> Unit) {
         stop(screen)
         val view = screen.peekView() ?: return done()
         custom.alpha?.let { view.alpha = it }
         val own = custom.side?.let { SideAnimator.build(view, it, SideAnimator.Base(alpha = custom.alpha)) }
         val fade = if (own == null) StackTransitions.fade(view, custom.fade) else null
+        // A fade of the whole screen draws it through a hardware layer, as the default transition does ([dress]).
+        for (animator in listOfNotNull(own, fade)) AnimationLayer.during(view, animator)
         val elements = custom.elements?.let { elements ->
             val layout = layout ?: return@let null
             val fadeLength = custom.side?.takeIf(AnimationRules::isSingleAlpha)?.let(AnimationRules::lengthOf)
@@ -196,7 +200,7 @@ internal class StackViews(private val stack: StackController) : StackDisplay {
 
     /**
      * Starts the preview of a back gesture over [top], [target] under it (`BackPreview`): none without the stack's view
-     * or a window. [onReveal] shows [target] and its bar as the preview's picture is there.
+     * or a window. [onReveal] shows [target] with its bar and its FAB as the preview's picture is there.
      */
     fun startBackPreview(
         top: ViewController<*>,
@@ -211,7 +215,9 @@ internal class StackViews(private val stack: StackController) : StackDisplay {
         val window = stack.activity.window ?: return null
         val topView = top.peekView() ?: return null
         val targetView = target.peekView() ?: return null
-        val started = BackPreview(layout, topView, targetView, fromLeft, touchY, bottomRoom, onReveal)
+        val started = BackPreview(layout, topView, targetView, fromLeft, touchY, bottomRoom, onReveal) {
+            stack.fab.shownView
+        }
         preview = started
         previewScreens = top to target
         started.start(window)

package/android/src/main/java/dev/apexnative/navigation/viewcontrollers/stack/fab/FabMotion.kt

@@ -0,0 +1,142 @@
+package dev.apexnative.navigation.viewcontrollers.stack.fab
+
+import dev.apexnative.navigation.viewcontrollers.stack.StackDisplay.BarMotion
+import dev.apexnative.navigation.views.animations.FadeThrough
+import dev.apexnative.navigation.views.animations.SystemTransition
+
+/**
+ * How a stack's FAB goes with a change of its screen on top, as the values alone: the new top's FAB arrives with its
+ * screen and a copy of the old one leaves with the screen it belonged to, from the start of the transition. A FAB with
+ * the same id stays where it is. The stack plays them on its views (`FabPresenter`).
+ */
+internal object FabMotion {
+    /** How the stack's transition goes, as its queue tells it (`StackQueue.Host.fabTransition`). */
+    enum class Move {
+        /** The system's push: each FAB rides with its screen along the line, as the tab bar does. */
+        WithPush,
+
+        /** The system's pop: the same, the other way. */
+        WithPop,
+
+        /** The fade through of a `setStackRoot`: the old one fades out first, the new one fades in and grows. */
+        FadeThrough,
+
+        /**
+         * A transition of the screens' own (`content`, elements): Material's swap at its start, the old one shrinking
+         * away, the new one growing from 60 %.
+         */
+        Swap,
+
+        /** No animation: the new top's FAB is there at once. */
+        AtOnce,
+    }
+
+    /** The curve a ride's move and scale take; its alpha changes on a straight line. */
+    enum class Curve { System, FadeThrough, Material }
+
+    /**
+     * A FAB's ride: along the x axis in dp, mirrored right to left; its scale on [curve] over [duration]; its alpha after
+     * a hold of [alphaDelay] over [alphaDuration], in ms.
+     */
+    data class Ride(
+        val fromX: Float,
+        val toX: Float,
+        val fromAlpha: Float,
+        val toAlpha: Float,
+        val fromScale: Float,
+        val toScale: Float,
+        val alphaDelay: Long,
+        val alphaDuration: Long,
+        val duration: Long,
+        val curve: Curve,
+    )
+
+    /** How long Material's swap takes, as the FAB shrinks or grows. */
+    const val SWAP_MILLIS = 200L
+
+    /** Where Material's swap grows the new FAB from. */
+    const val GROW_FROM = 0.6f
+
+    private const val FADE_THROUGH_SCALE = 0.92f
+
+    /**
+     * The move of the FAB with a change of the current child: none when the change comes at once or the new top shows
+     * already ([shown]: a back gesture's preview showed it); Material's swap with an animation of the screens' own
+     * ([own]); else the default transition's [row], as the bar's row goes.
+     */
+    fun moveOf(animated: Boolean, own: Boolean, row: BarMotion, shown: Boolean): Move = when {
+        !animated || shown -> Move.AtOnce
+        own -> Move.Swap
+        row == BarMotion.Push -> Move.WithPush
+        row == BarMotion.Pop -> Move.WithPop
+        else -> Move.FadeThrough
+    }
+
+    /**
+     * The new top's FAB comes with its screen: a push brings it from +96 dp (−96 dp on a pop), transparent for the hold
+     * of the screen's fade, then fading in; the fade through fades it in after the old one went and grows it from 92 %;
+     * the swap grows it from 60 %. None at once.
+     */
+    fun arrival(move: Move, rtl: Boolean): Ride? {
+        val distance = SystemTransition.DISTANCE_DP * if (rtl) -1 else 1
+        return when (move) {
+            Move.WithPush, Move.WithPop -> Ride(
+                fromX = if (move == Move.WithPush) distance else -distance,
+                toX = 0f,
+                fromAlpha = 0f,
+                toAlpha = 1f,
+                fromScale = 1f,
+                toScale = 1f,
+                alphaDelay = fadeDelay(move),
+                alphaDuration = SystemTransition.FADE_DURATION,
+                duration = SystemTransition.DURATION,
+                curve = Curve.System,
+            )
+            Move.FadeThrough -> Ride(
+                fromX = 0f,
+                toX = 0f,
+                fromAlpha = 0f,
+                toAlpha = 1f,
+                fromScale = FADE_THROUGH_SCALE,
+                toScale = 1f,
+                alphaDelay = fadeThroughOut(),
+                alphaDuration = FadeThrough.DURATION - fadeThroughOut(),
+                duration = FadeThrough.DURATION,
+                curve = Curve.FadeThrough,
+            )
+            Move.Swap -> Ride(0f, 0f, 1f, 1f, GROW_FROM, 1f, 0L, 0L, SWAP_MILLIS, Curve.Material)
+            Move.AtOnce -> null
+        }
+    }
+
+    /**
+     * The old top's FAB leaves with its screen, from where it is: a push takes it to −96 dp with the covered screen and
+     * fades it out as the new screen fades in over it; a pop takes it to +96 dp, fading with the leaving screen; the
+     * fade through fades it out in the first 35 %; the swap shrinks it to nothing. None at once.
+     */
+    fun departure(move: Move, rtl: Boolean): Ride? {
+        val distance = SystemTransition.DISTANCE_DP * if (rtl) -1 else 1
+        return when (move) {
+            Move.WithPush, Move.WithPop -> Ride(
+                fromX = 0f,
+                toX = if (move == Move.WithPush) -distance else distance,
+                fromAlpha = 1f,
+                toAlpha = 0f,
+                fromScale = 1f,
+                toScale = 1f,
+                alphaDelay = fadeDelay(move),
+                alphaDuration = SystemTransition.FADE_DURATION,
+                duration = SystemTransition.DURATION,
+                curve = Curve.System,
+            )
+            Move.FadeThrough -> Ride(0f, 0f, 1f, 0f, 1f, 1f, 0L, fadeThroughOut(), fadeThroughOut(), Curve.FadeThrough)
+            Move.Swap -> Ride(0f, 0f, 1f, 1f, 1f, 0f, 0L, 0L, SWAP_MILLIS, Curve.Material)
+            Move.AtOnce -> null
+        }
+    }
+
+    private fun fadeDelay(move: Move): Long =
+        if (move == Move.WithPush) SystemTransition.PUSH_FADE_DELAY else SystemTransition.POP_FADE_DELAY
+
+    private fun fadeThroughOut(): Long = (FadeThrough.DURATION * FadeThrough.OUT).toLong()
+}

package/android/src/main/java/dev/apexnative/navigation/viewcontrollers/stack/fab/FabPresenter.kt

@@ -1,9 +1,16 @@
 package dev.apexnative.navigation.viewcontrollers.stack.fab
 
+import android.animation.Animator
+import android.animation.AnimatorListenerAdapter
+import android.animation.AnimatorSet
+import android.animation.ObjectAnimator
+import android.animation.PropertyValuesHolder
 import android.app.Activity
 import android.view.Gravity
 import android.view.View
 import android.view.ViewGroup
+import android.view.animation.AccelerateDecelerateInterpolator
+import android.view.animation.LinearInterpolator
 import androidx.coordinatorlayout.widget.CoordinatorLayout
 import androidx.core.view.WindowInsetsCompat
 import dev.apexnative.navigation.options.FabOptions
@@ -11,16 +18,20 @@ import dev.apexnative.navigation.react.events.AppearanceDispatcher
 import dev.apexnative.navigation.utils.TestIds
 import dev.apexnative.navigation.viewcontrollers.viewcontroller.ScrollEventListener
 import dev.apexnative.navigation.viewcontrollers.viewcontroller.ViewController
+import dev.apexnative.navigation.views.animations.FadeThrough
+import dev.apexnative.navigation.views.animations.SystemTransition
 import dev.apexnative.navigation.views.stack.StackLayout
 import dev.apexnative.navigation.views.stack.fab.Fab
+import dev.apexnative.navigation.views.stack.fab.FabCopy
 import dev.apexnative.navigation.views.stack.fab.FabMenu
 
 /**
  * The FAB of one stack (`fab.*`), over the module's `Fab` and `FabMenu`: one FAB or one menu at a time, from the
  * resolved `fab` of the screen on top (its options over the stack's, its parents' and the defaults). It follows the top
- * at the end of each transition and the merges of `fab` into it; a press sends `ANN.NavigationButtonPressed` with the
- * screen whose options showed it, an action with its own id. Its views are children of the stack's view, over the
- * screens and the bar. Main thread only.
+ * from the start of each transition, going with the screens by [FabMotion], and the merges of `fab` into it; a press
+ * sends `ANN.NavigationButtonPressed` with the screen whose options showed it, an action with its own id. Its views are
+ * children of the stack's view, over the screens and the bar; a FAB that leaves goes as a copy ([FabCopy]). Main
+ * thread only.
  */
 internal class FabPresenter(
     private val activity: Activity,
@@ -38,38 +49,75 @@ internal class FabPresenter(
     var source: ViewController<*>? = null
         private set
 
+    // The ride of the FAB that shows as it arrives; none at rest.
+    private var ride: Animator? = null
+    // The copies of the FABs that leave, each with its ride.
+    private val copies = LinkedHashMap<FabCopy, Animator>()
+
+    // The top's FAB while a back gesture's preview shows the screen under the top with its own: out of the stack, as
+    // it was (hidden by the scroll, say).
+    private class Aside(
+        val fab: Fab?,
+        val menu: FabMenu?,
+        val shownId: String?,
+        var source: ViewController<*>?,
+        val alignStart: Boolean,
+    )
+
+    private var aside: Aside? = null
+
     private val view: View?
         get() = menu ?: fab
 
+    /** The view of the FAB or of its menu that shows; none. */
+    val shownView: View?
+        get() = view
+
     /**
-     * The screen on top became [source], with its resolved [options]: the same id updates the FAB that shows and grows
-     * it again, another id replaces it, none takes it away; the scroll of [scroll] hides it with `hideOnScroll`.
-     * Nothing when [source] already shows it.
+     * The screen on top became [source], with its resolved [options], in a transition that goes by [move]: the same id
+     * updates the FAB that shows, where it stays as it is, another id replaces it, none takes it away — the new FAB
+     * arrives and a copy of the old one leaves by [move]; the scroll of [scroll] hides it with `hideOnScroll`. An open
+     * menu closes. The copies of an older transition go, and with [FabMotion.Move.AtOnce] a FAB still riding comes to
+     * rest. Nothing when [source] already shows it.
      */
-    fun showFor(layout: StackLayout, source: ViewController<*>?, options: FabOptions, scroll: ScrollEventListener?) {
+    fun showFor(
+        layout: StackLayout,
+        source: ViewController<*>?,
+        options: FabOptions,
+        scroll: ScrollEventListener?,
+        move: FabMotion.Move = FabMotion.Move.Swap,
+    ) {
+        // At once, what still moves comes to rest, also when the top stays (a failed push).
+        if (move == FabMotion.Move.AtOnce) {
+            dropCopies()
+            stopRide(rest = true)
+        }
         if (source === this.source && this.layout === layout) return
         this.layout = layout
-        disableCollapse()
+        dropCopies()
         this.source = source
         when (FabPlan.step(shownId, menu != null, options)) {
             FabPlan.Step.None -> Unit
-            FabPlan.Step.Remove -> remove()
-            FabPlan.Step.Create -> create(layout, options, scroll)
+            FabPlan.Step.Remove -> leave(layout, move)
+            FabPlan.Step.Create -> {
+                create(layout, options, scroll)
+                arrive(move)
+            }
             FabPlan.Step.Replace -> {
-                remove()
+                leave(layout, move)
                 create(layout, options, scroll)
+                arrive(move)
             }
             FabPlan.Step.Update -> {
+                disableCollapse()
+                menu?.close()
                 apply(options, scroll)
                 // A new top whose options don't hide it shows it, even where the screen before hid it.
                 if (!options.visible.isFalse) {
                     fab?.show()
                     menu?.show()
                 }
-                view?.let {
-                    it.bringToFront()
-                    grow(it)
-                }
+                view?.bringToFront()
             }
         }
     }
@@ -83,11 +131,15 @@ internal class FabPresenter(
         this.source = source
         when (FabPlan.step(shownId, menu != null, options)) {
             FabPlan.Step.None -> Unit
-            FabPlan.Step.Remove -> remove()
-            FabPlan.Step.Create -> create(layout, options, scroll)
+            FabPlan.Step.Remove -> leave(layout, FabMotion.Move.Swap)
+            FabPlan.Step.Create -> {
+                create(layout, options, scroll)
+                arrive(FabMotion.Move.Swap)
+            }
             FabPlan.Step.Replace -> {
-                remove()
+                leave(layout, FabMotion.Move.Swap)
                 create(layout, options, scroll)
+                arrive(FabMotion.Move.Swap)
             }
             FabPlan.Step.Update -> apply(options, scroll)
         }
@@ -130,13 +182,57 @@ internal class FabPresenter(
         view.layoutParams = params
     }
 
+    /**
+     * A back gesture's preview shows the screen under the top: the FAB that shows goes aside, out of the stack but as it
+     * is, its menu closing, until [bringBack] or [dropAside]; the screen's own FAB shows next ([showFor]).
+     */
+    fun setAside() {
+        if (aside != null) return
+        dropCopies()
+        stopRide(rest = true)
+        menu?.close()
+        view?.let { (it.parent as? ViewGroup)?.removeView(it) }
+        aside = Aside(fab, menu, shownId, source, alignStart)
+        fab = null
+        menu = null
+        shownId = null
+        source = null
+    }
+
+    /** The gesture was cancelled: the FAB the preview showed goes, and the one set aside is back as it was. */
+    fun bringBack() {
+        val kept = aside ?: return
+        aside = null
+        val layout = layout ?: return discard(kept)
+        leave(layout, FabMotion.Move.AtOnce)
+        fab = kept.fab
+        menu = kept.menu
+        shownId = kept.shownId
+        source = kept.source
+        alignStart = kept.alignStart
+        view?.let { layout.addOverAll(it, it.layoutParams as? CoordinatorLayout.LayoutParams ?: params()) }
+        place()
+    }
+
+    /** The gesture was released: the FAB set aside goes with the top that leaves. */
+    fun dropAside() {
+        val kept = aside ?: return
+        aside = null
+        discard(kept)
+    }
+
     /** [node] was destroyed: a FAB it showed sends nothing more. */
     fun forget(node: ViewController<*>) {
         if (source === node) source = null
+        aside?.let { if (it.source === node) it.source = null }
     }
 
-    /** The stack goes: the FAB and its menu go at once, the scrim first. */
+    /** The stack goes: the FAB and its menu go at once, the scrim first, and the copies that leave. */
     fun destroy() {
+        aside?.let(::discard)
+        aside = null
+        dropCopies()
+        stopRide(rest = false)
         disableCollapse()
         menu?.let {
             it.removeScrim()
@@ -153,7 +249,7 @@ internal class FabPresenter(
     private fun create(layout: StackLayout, options: FabOptions, scroll: ScrollEventListener?) {
         val id = FabPlan.idOf(options) ?: return
         shownId = id
-        val params = CoordinatorLayout.LayoutParams(WRAP, WRAP)
+        val params = params()
         if (FabPlan.isMenu(options)) {
             val menu = FabMenu(activity, id)
             this.menu = menu
@@ -164,7 +260,6 @@ internal class FabPresenter(
             layout.addOverAll(fab, params)
         }
         apply(options, scroll)
-        view?.let(::grow)
     }
 
     // Every option of the FAB that shows; the collapse before the visibility, which `disableCollapse` would undo.
@@ -235,43 +330,120 @@ internal class FabPresenter(
         menu?.disableCollapse()
     }
 
-    // The FAB that shows goes: a button shrinks to 0 in 200 ms; a menu goes at once, its scrim first.
-    private fun remove() {
+    // The FAB that shows goes with its screen: a copy of it leaves by [move] while the button, or the menu, goes from the
+    // stack at once; an open menu closes, its scrim fading out by itself. At once nothing leaves, the scrim neither.
+    private fun leave(layout: StackLayout, move: FabMotion.Move) {
+        val view = view ?: return
+        val departure = FabMotion.departure(move, isRtl(layout))
+        val copy = departure?.let { FabCopy.of((view as? FabMenu)?.main ?: view, view, layout) }
+        stopRide(rest = false)
+        disableCollapse()
         menu?.let {
-            it.removeScrim()
+            if (departure != null) it.closeToLeave() else it.removeScrim()
             (it.parent as? ViewGroup)?.removeView(it)
         }
-        fab?.let { fab ->
-            fab.animate().cancel()
-            if (!fab.isAttachedToWindow) {
-                (fab.parent as? ViewGroup)?.removeView(fab)
-            } else {
-                fab.animate().scaleX(0f).scaleY(0f).setDuration(ANIMATION_MILLIS)
-                    .withEndAction { (fab.parent as? ViewGroup)?.removeView(fab) }.start()
-            }
-        }
+        fab?.let { (it.parent as? ViewGroup)?.removeView(it) }
         menu = null
         fab = null
         shownId = null
+        if (copy == null) return
+        copies[copy] = play(copy, departure, fromCurrent = true) { copies.remove(copy)?.let { removeCopy(copy) } }
+    }
+
+    // The new FAB arrives with its screen by [move]; one its options hide (`visible: false`) has nothing to show.
+    private fun arrive(move: FabMotion.Move) {
+        val view = view ?: return
+        if (((view as? FabMenu)?.main ?: view).visibility != View.VISIBLE) return
+        val arrival = FabMotion.arrival(move, layout?.let(::isRtl) ?: false) ?: return
+        ride = play(view, arrival, fromCurrent = false) { animator -> if (ride === animator) ride = null }
+    }
+
+    // A ride stops where it is; [rest]: the FAB is in its place again, opaque and whole.
+    private fun stopRide(rest: Boolean) {
+        val running = ride ?: return
+        ride = null
+        running.cancel()
+        if (!rest) return
+        view?.apply {
+            translationX = 0f
+            alpha = 1f
+            scaleX = 1f
+            scaleY = 1f
+        }
+    }
+
+    // The copies of an older transition go at once.
+    private fun dropCopies() {
+        if (copies.isEmpty()) return
+        val dropped = copies.toList()
+        copies.clear()
+        dropped.forEach { (copy, animator) ->
+            animator.cancel()
+            removeCopy(copy)
+        }
     }
 
-    // It comes to the top and grows from 60 % in 200 ms.
-    private fun grow(view: View) {
-        val target = (view as? FabMenu)?.main ?: view
-        target.animate().cancel()
-        target.scaleX = GROW_FROM
-        target.scaleY = GROW_FROM
-        target.animate().scaleX(1f).scaleY(1f).setDuration(ANIMATION_MILLIS).start()
+    private fun removeCopy(copy: FabCopy) {
+        (copy.parent as? ViewGroup)?.removeView(copy)
     }
 
+    // Plays [ride] on [view], from its start values or [fromCurrent] from where the view is; [end] at its end or stop.
+    private fun play(view: View, ride: FabMotion.Ride, fromCurrent: Boolean, end: (Animator) -> Unit): Animator {
+        val density = activity.resources.displayMetrics.density
+        if (!fromCurrent) {
+            view.translationX = ride.fromX * density
+            view.alpha = ride.fromAlpha
+            view.scaleX = ride.fromScale
+            view.scaleY = ride.fromScale
+        }
+        val move = ObjectAnimator.ofPropertyValuesHolder(
+            view,
+            PropertyValuesHolder.ofFloat(View.TRANSLATION_X, ride.toX * density),
+            PropertyValuesHolder.ofFloat(View.SCALE_X, ride.toScale),
+            PropertyValuesHolder.ofFloat(View.SCALE_Y, ride.toScale),
+        ).apply {
+            duration = ride.duration
+            interpolator = when (ride.curve) {
+                FabMotion.Curve.System -> SystemTransition.CURVE
+                FabMotion.Curve.FadeThrough -> FadeThrough.CURVE
+                FabMotion.Curve.Material -> AccelerateDecelerateInterpolator()
+            }
+        }
+        val animator = AnimatorSet()
+        if (ride.alphaDuration > 0) {
+            val fade = ObjectAnimator.ofFloat(view, View.ALPHA, ride.toAlpha).apply {
+                startDelay = ride.alphaDelay
+                duration = ride.alphaDuration
+                interpolator = LinearInterpolator()
+            }
+            animator.playTogether(move, fade)
+        } else {
+            animator.play(move)
+        }
+        animator.addListener(object : AnimatorListenerAdapter() {
+            override fun onAnimationEnd(animation: Animator) = end(animation)
+        })
+        animator.start()
+        return animator
+    }
+
+    // A FAB set aside that won't come back: it follows no scroll, its scrim goes.
+    private fun discard(kept: Aside) {
+        kept.fab?.disableCollapse()
+        kept.menu?.disableCollapse()
+        kept.menu?.removeScrim()
+    }
+
+    private fun params() = CoordinatorLayout.LayoutParams(WRAP, WRAP)
+
+    private fun isRtl(layout: StackLayout): Boolean = layout.layoutDirection == View.LAYOUT_DIRECTION_RTL
+
     companion object {
         private const val WRAP = ViewGroup.LayoutParams.WRAP_CONTENT
-        private const val ANIMATION_MILLIS = 200L
-        private const val GROW_FROM = 0.6f
 
         /**
          * A press on the FAB, or on an action of its menu, of [source] (EVT-NavigationButtonPressed): nothing once
-         * [source] is destroyed — its FAB still fades for 200 ms.
+         * [source] is destroyed.
          */
         fun press(source: ViewController<*>?, buttonId: String) {
             if (source == null || source.isDestroyed) return

package/android/src/main/java/dev/apexnative/navigation/viewcontrollers/stack/search/StackSearchPresenter.kt

@@ -3,8 +3,6 @@ package dev.apexnative.navigation.viewcontrollers.stack.search
 import android.app.Activity
 import android.content.Context
 import android.graphics.drawable.Drawable
-import android.view.Menu
-import android.view.MenuItem
 import android.view.View
 import android.view.ViewGroup
 import androidx.appcompat.R as AppCompatR
@@ -15,12 +13,14 @@ import androidx.core.view.WindowInsetsCompat
 import dev.apexnative.navigation.options.SearchBarOptions
 import dev.apexnative.navigation.options.params.ThemeColour
 import dev.apexnative.navigation.react.events.EventEmitter
+import dev.apexnative.navigation.utils.TestIds
 import dev.apexnative.navigation.utils.dp
 import dev.apexnative.navigation.viewcontrollers.parent.OptionsScreen
 import dev.apexnative.navigation.viewcontrollers.viewcontroller.ViewController
 import dev.apexnative.navigation.views.stack.topbar.TopBar
 import dev.apexnative.navigation.views.stack.topbar.TopBarDefaults
 import dev.apexnative.navigation.views.stack.topbar.search.SearchStyle
+import dev.apexnative.navigation.views.stack.topbar.titlebar.BarButtonView
 
 /**
  * The search of the screens of a stack (`topBar.searchBar`): each screen has its own while it is in the stack, and the
@@ -38,6 +38,7 @@ class StackSearchPresenter(
     private var suggestions: View? = null
     private var wasActive = false
     private var onActiveChanged: Runnable? = null
+    private var magnifier: BarButtonView? = null
 
     /** The search of the screen on top opened or closed: the bar's hideOnScroll stops or goes on. */
     fun setOnActiveChanged(listener: Runnable?) {
@@ -49,6 +50,7 @@ class StackSearchPresenter(
 
     fun bindTopBar(topBar: TopBar) {
         this.topBar = topBar
+        magnifier = null
         // The suggestions hang from the bar: they follow its height as the search opens and its scopes show.
         topBar.addOnLayoutChangeListener { _, _, _, _, _, _, _, _, _ -> topBar.post { positionSuggestions(topBar) } }
     }
@@ -91,28 +93,29 @@ class StackSearchPresenter(
         return true
     }
 
-    /** After the right buttons change: the magnifier of an integrated search goes back among them, last. */
+    /**
+     * After the right buttons change: the magnifier of an integrated search stands after them, before "⋮", as a button
+     * of the bar, with the id `<topBar.searchBar.testID>.button`.
+     */
     fun applyMagnifier() {
         val bar = topBar ?: return
-        val menu = bar.rightButtonBar.menu
-        val item = menu.findItem(MAGNIFIER_ID)
-        if (shown?.showsMagnifier != true) {
-            if (item != null) menu.removeItem(MAGNIFIER_ID)
+        val row = bar.rightButtonBar
+        val search = shown
+        if (search?.showsMagnifier != true) {
+            row.setTrailing(null)
             return
         }
-        if (item != null) return
-        val context = styleContext()
-        val label = context.getString(AppCompatR.string.abc_searchview_description_search)
-        menu.add(Menu.NONE, MAGNIFIER_ID, MAGNIFIER_ORDER, label).apply {
-            icon = AppCompatResources.getDrawable(context, AppCompatR.drawable.abc_ic_search_api_material)?.mutate()?.also {
-                it.setTint(TopBarDefaults.overflowIconColor(context))
-            }
-            setShowAsAction(MenuItem.SHOW_AS_ACTION_ALWAYS)
-            setOnMenuItemClickListener {
-                shown?.activate()
-                true
-            }
+        val button = magnifier ?: BarButtonView(row.context).also { button ->
+            val context = styleContext()
+            val icon = AppCompatResources.getDrawable(context, AppCompatR.drawable.abc_ic_search_api_material)?.mutate()
+            icon?.setTint(TopBarDefaults.overflowIconColor(context))
+            val label = context.getString(AppCompatR.string.abc_searchview_description_search)
+            button.show(label, icon, null, true)
+            button.setOnClickListener { shown?.activate() }
+            magnifier = button
         }
+        TestIds.apply(button, search.options.testID.get(null)?.let { "$it.button" })
+        row.setTrailing(button)
     }
 
     override fun refresh(search: ScreenSearch) {
@@ -132,7 +135,9 @@ class StackSearchPresenter(
     fun onConfigurationChanged(tint: ThemeColour) {
         shown?.takeTint(tint)
         searches.values.forEach { it.restyle() }
-        topBar?.rightButtonBar?.menu?.removeItem(MAGNIFIER_ID)
+        // The magnifier is made again in the new mode's colors.
+        magnifier = null
+        topBar?.rightButtonBar?.setTrailing(null)
         refresh()
     }
 
@@ -231,10 +236,4 @@ class StackSearchPresenter(
         lp.topMargin = top
         card.layoutParams = lp
     }
-
-    private companion object {
-        val MAGNIFIER_ID = View.generateViewId()
-        // The highest a menu order goes: after the screen's own buttons.
-        const val MAGNIFIER_ORDER = 0xFFFF
-    }
 }