@apexnative/navigation 1.0.0-alpha.6 → 1.0.0-alpha.8

package/android/src/main/java/dev/apexnative/navigation/views/element/animators/ViewMorph.kt

@@ -0,0 +1,108 @@
+package dev.apexnative.navigation.views.element.animators
+
+import android.graphics.Canvas
+import android.graphics.Paint
+import android.graphics.Picture
+import android.graphics.PorterDuff
+import android.graphics.PorterDuffXfermode
+import android.graphics.RectF
+import android.view.View
+import dev.apexnative.navigation.utils.borderRadius
+import kotlin.math.roundToInt
+
+/**
+ * A shared view moves as two pictures of itself, as on iOS: of the view that goes away and of the one that comes, each
+ * with its children. The copy goes from where the one is drawn — its center, its size at the scale it is drawn at, its
+ * angle and corner radius — to where the other is drawn in its screen ([FlightGeometry]), the angle along the shorter
+ * arc; both pictures fill it, and the picture of the destination shows over the other on the way. Where a parent cuts
+ * a view (`overflow: hidden`, a scroll view, the screen's edge), only the part that shows flies, the mask going from
+ * one end's part to the other's ([FlightMask]), as on iOS. The pictures are drawing commands, taken before the views
+ * hide: an avatar's letter grows sharp, and what changes in the views meanwhile shows when they are back.
+ */
+internal class ViewMorph private constructor(
+    private val start: ViewPicture,
+    private val end: ViewPicture,
+) : FlightPicture() {
+    private val flight = FlightGeometry(start.end, end.end)
+    private val cut = FlightMask.of(start.visible, end.visible)?.let(::MaskCut)
+    private var at = start.end
+    private var progress = 0f
+    private val rect = RectF()
+    private val maskPaint = Paint(Paint.ANTI_ALIAS_FLAG)
+    // What is drawn over the mask keeps only the mask's pixels: the corners stay smooth (a clip path on the hardware
+    // canvas is not anti-aliased).
+    private val contentPaint = Paint().apply { xfermode = PorterDuffXfermode(PorterDuff.Mode.SRC_IN) }
+
+    override fun update(time: Float, progress: Float) {
+        this.progress = progress
+        at = flight.at(progress, time)
+        cut?.update(time, progress)
+    }
+
+    override fun draw(canvas: Canvas) {
+        rect.set(-at.width / 2, -at.height / 2, at.width / 2, at.height / 2)
+        if (rect.isEmpty) return
+        val radius = lerp(start.radius, end.radius)
+        // The copy turns about its center, mirrored where a view is.
+        canvas.translate(at.centerX, at.centerY)
+        canvas.rotate(at.rotation)
+        canvas.scale(at.mirrorX, at.mirrorY)
+        canvas.saveLayer(rect, null)
+        canvas.drawRoundRect(rect, radius, radius, maskPaint)
+        cut?.draw(canvas, rect)
+        canvas.saveLayer(rect, contentPaint)
+        draw(canvas, start, start.alpha)
+        draw(canvas, end, end.alpha * progress)
+    }
+
+    // A picture fills the copy, as on iOS.
+    private fun draw(canvas: Canvas, view: ViewPicture, shown: Float) {
+        val alpha = (shown * 255).roundToInt().coerceIn(0, 255)
+        if (alpha == 0) return
+        val width = view.picture.width.toFloat()
+        val height = view.picture.height.toFloat()
+        val count = canvas.save()
+        canvas.translate(rect.left, rect.top)
+        canvas.scale(rect.width() / width, rect.height() / height)
+        // The picture fades as a whole: its children and background don't show through each other.
+        if (alpha < 255) canvas.saveLayerAlpha(0f, 0f, width, height, alpha)
+        canvas.drawPicture(view.picture)
+        canvas.restoreToCount(count)
+    }
+
+    private fun lerp(from: Float, to: Float) = from + (to - from) * progress
+
+    companion object {
+        /**
+         * The morph of [from] into [to] in [layer], each cut by its parents up to the view of its screen ([fromRoot],
+         * [toRoot]); none when a picture of either can't be taken.
+         */
+        fun of(from: View, to: View, fromRoot: View?, toRoot: View?, layer: View): ViewMorph? {
+            val start = ViewPicture.of(from, LayerPlace.of(from, layer, fromRoot)) ?: return null
+            val end = ViewPicture.of(to, LayerPlace.of(to, layer, toRoot)) ?: return null
+            return ViewMorph(start, end)
+        }
+    }
+}
+
+// A view's picture, where it is drawn in the transition layer, its corner radius there, its opacity and the part of it
+// that shows.
+private class ViewPicture(
+    val picture: Picture,
+    val end: FlightEnd,
+    val radius: Float,
+    val alpha: Float,
+    val visible: VisiblePart,
+) {
+    companion object {
+        fun of(view: View, place: LayerPlace): ViewPicture? {
+            if (view.width <= 0 || view.height <= 0) return null
+            val picture = recordPicture(view) ?: return null
+            val end = place.end(view.width, view.height)
+            val radius = view.borderRadius
+            return ViewPicture(
+                picture, end, radius * end.scale, view.alpha, place.visible(view.width, view.height, radius),
+            )
+        }
+    }
+}

package/android/src/main/java/dev/apexnative/navigation/views/stack/fab/FabCopy.kt

@@ -0,0 +1,85 @@
+package dev.apexnative.navigation.views.stack.fab
+
+import android.annotation.SuppressLint
+import android.content.Context
+import android.graphics.Canvas
+import android.graphics.Outline
+import android.graphics.Picture
+import android.os.Build
+import android.view.Gravity
+import android.view.View
+import android.view.ViewGroup
+import android.view.ViewOutlineProvider
+import androidx.coordinatorlayout.widget.CoordinatorLayout
+import dev.apexnative.navigation.views.element.animators.recordPicture
+
+/**
+ * The picture of a FAB that leaves with its screen while the new top's FAB arrives: drawn as the button was, with the
+ * shadow of its shape, taking no touches and hidden from accessibility. The live button goes from its parent at once.
+ */
+@SuppressLint("ViewConstructor")
+internal class FabCopy private constructor(
+    context: Context,
+    private val picture: Picture,
+    shape: Outline,
+) : View(context) {
+    init {
+        importantForAccessibility = IMPORTANT_FOR_ACCESSIBILITY_NO_HIDE_DESCENDANTS
+        outlineProvider = object : ViewOutlineProvider() {
+            override fun getOutline(view: View, outline: Outline) = outline.set(shape)
+        }
+    }
+
+    override fun onDraw(canvas: Canvas) {
+        canvas.drawPicture(picture)
+    }
+
+    companion object {
+        /**
+         * A copy of [button] in [container], a child of [parent] (the button itself, or its menu), as it shows now: in
+         * its place in [parent], moved, scaled and faded as it is. None when it doesn't show or can't be recorded (a
+         * hardware bitmap in its icon before Android 9).
+         */
+        fun of(button: View, container: View, parent: ViewGroup): FabCopy? {
+            if (container.parent !== parent || !button.isAttachedToWindow) return null
+            if (button.width <= 0 || button.height <= 0) return null
+            if (container.visibility != VISIBLE || button.visibility != VISIBLE) return null
+            val inner = button !== container
+            val alpha = container.alpha * if (inner) button.alpha else 1f
+            val scale = container.scaleX * if (inner) button.scaleX else 1f
+            if (alpha <= 0f || scale <= 0f) return null
+            val picture = recordPicture(button) ?: return null
+            val shape = Outline().apply {
+                // As the view counts its own outline: opaque unless the provider says otherwise.
+                this.alpha = 1f
+                button.outlineProvider?.getOutline(button, this)
+            }
+            val copy = FabCopy(button.context, picture, shape)
+            val left = container.left + if (inner) button.left else 0
+            val top = container.top + if (inner) button.top else 0
+            copy.translationX = container.translationX + if (inner) button.translationX else 0f
+            copy.translationY = container.translationY + if (inner) button.translationY else 0f
+            copy.scaleX = scale
+            copy.scaleY = scale
+            copy.alpha = alpha
+            copy.elevation = button.elevation
+            copy.translationZ = button.translationZ
+            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P) {
+                copy.outlineAmbientShadowColor = button.outlineAmbientShadowColor
+                copy.outlineSpotShadowColor = button.outlineSpotShadowColor
+            }
+            parent.addView(copy, CoordinatorLayout.LayoutParams(button.width, button.height).apply {
+                gravity = Gravity.TOP or Gravity.LEFT
+                leftMargin = left
+                topMargin = top
+            })
+            // In its place before the next layout, so its first frame draws.
+            copy.measure(
+                MeasureSpec.makeMeasureSpec(button.width, MeasureSpec.EXACTLY),
+                MeasureSpec.makeMeasureSpec(button.height, MeasureSpec.EXACTLY),
+            )
+            copy.layout(left, top, left + button.width, top + button.height)
+            return copy
+        }
+    }
+}

package/android/src/main/java/dev/apexnative/navigation/views/stack/fab/FabMenu.kt

@@ -120,6 +120,19 @@ class FabMenu(context: Context, val fabId: String) : LinearLayout(context), FabA
         (view.parent as? ViewGroup)?.removeView(view)
     }
 
+    /**
+     * The menu closes and leaves its parent next: a scrim that shows fades out by itself and goes from the parent at
+     * the end of its fade, which the menu no longer owns; it takes no touches meanwhile, which belong to the new screen.
+     */
+    fun closeToLeave() {
+        close()
+        scrim?.apply {
+            setOnClickListener(null)
+            isClickable = false
+        }
+        scrim = null
+    }
+
     override fun show() = main.show()
 
     override fun hide() {

package/android/src/main/java/dev/apexnative/navigation/views/stack/topbar/TitleBar.kt

@@ -7,15 +7,14 @@ import android.util.TypedValue
 import android.view.View
 import android.view.ViewGroup
 import androidx.appcompat.widget.AppCompatTextView
-import com.google.android.material.appbar.MaterialToolbar
-import dev.apexnative.navigation.utils.MaterialTheme
 import dev.apexnative.navigation.utils.UiUtils
+import dev.apexnative.navigation.views.stack.topbar.titlebar.ButtonRow
 import kotlin.math.max
 import kotlin.math.min
 
 /**
  * The row of the bar: the left buttons with the back button at the start ([leftButtonBar]), the right buttons and "⋮"
- * at the end ([rightButtonBar]), both Material 3 toolbars, and between them the title and the subtitle, or a React
+ * at the end ([rightButtonBar]), each a [ButtonRow], and between them the title and the subtitle, or a React
  * title ([titleComponent]). It lays them out in its own coordinates, so a shift of the row (`topBar.title.topMargin`)
  * moves them all; [sideInsets] keep them off the system bars and the cutout at the sides. Right to left, everything
  * mirrors. Main thread only.
@@ -26,10 +25,10 @@ class TitleBar(context: Context) : ViewGroup(context) {
     enum class Alignment { Start, Center, Fill }
 
     /** The back button (its navigation button) and the left buttons. */
-    val leftButtonBar = MaterialToolbar(context).also(::plain)
+    val leftButtonBar = ButtonRow(context)
 
     /** The right buttons, the search's magnifier and "⋮". */
-    val rightButtonBar = MaterialToolbar(context).also(::plain)
+    val rightButtonBar = ButtonRow(context)
 
     /** The title's text: one line, cut with "…" at its end (`topBar.title.text`). */
     val titleView = AppCompatTextView(context).apply {
@@ -118,8 +117,6 @@ class TitleBar(context: Context) : ViewGroup(context) {
         val height = MeasureSpec.getSize(heightMeasureSpec)
         val inner = max(width - sideInsetsBox[0] - sideInsetsBox[1], 0)
         val exactHeight = MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY)
-        alignButtons(leftButtonBar, height)
-        alignButtons(rightButtonBar, height)
         leftButtonBar.measure(MeasureSpec.makeMeasureSpec(inner, MeasureSpec.AT_MOST), exactHeight)
         val rightRoom = max(inner - leftButtonBar.measuredWidth, 0)
         rightButtonBar.measure(MeasureSpec.makeMeasureSpec(rightRoom, MeasureSpec.AT_MOST), exactHeight)
@@ -154,7 +151,7 @@ class TitleBar(context: Context) : ViewGroup(context) {
             view.layout(x, top, x + w, top + view.measuredHeight)
         }
         // The back button and the left buttons at the start of the line, the right buttons at its end: right to left
-        // the whole row mirrors, and each toolbar mirrors what it holds.
+        // the whole row mirrors, and each side mirrors what it holds.
         val startBar = leftButtonBar.measuredWidth
         val endBar = rightButtonBar.measuredWidth
         place(leftButtonBar, 0, 0)
@@ -194,22 +191,6 @@ class TitleBar(context: Context) : ViewGroup(context) {
         return min(max(middle, startBar), max(inner - endBar - width, startBar))
     }
 
-    // A toolbar stands its back button and its menu at the top of its minimum height, centered in it (`buttonGravity`
-    // is top): with the row's height as that minimum, they stand in the middle of the row, as the title does.
-    private fun alignButtons(toolbar: MaterialToolbar, height: Int) {
-        if (toolbar.minimumHeight != height) toolbar.minimumHeight = height
-    }
-
-    // A toolbar that holds only buttons: no insets of its own around them (the row places them).
-    private fun plain(toolbar: MaterialToolbar) {
-        // Before the toolbar makes its menu, which takes the popup theme once: "⋮" in the current mode.
-        toolbar.popupTheme = MaterialTheme.popupTheme(toolbar.context)
-        toolbar.setContentInsetsRelative(0, 0)
-        toolbar.contentInsetStartWithNavigation = 0
-        toolbar.contentInsetEndWithActions = 0
-        toolbar.setPadding(0, 0, 0, 0)
-    }
-
     private companion object {
         const val GAP_DP = 16
         const val TITLE_SIZE_SP = 22f

package/android/src/main/java/dev/apexnative/navigation/views/stack/topbar/TopBar.kt

@@ -2,11 +2,12 @@ package dev.apexnative.navigation.views.stack.topbar
 
 import android.annotation.SuppressLint
 import android.content.Context
-import android.graphics.Bitmap
 import android.graphics.Canvas
 import android.graphics.Color
+import android.graphics.Picture
 import android.graphics.Rect
 import android.graphics.drawable.ColorDrawable
+import android.graphics.drawable.PictureDrawable
 import android.os.Build
 import android.view.ContextThemeWrapper
 import android.view.Gravity
@@ -16,10 +17,11 @@ import android.view.ViewGroup
 import android.widget.FrameLayout
 import android.widget.ImageView
 import android.widget.LinearLayout
-import com.google.android.material.appbar.MaterialToolbar
+import androidx.appcompat.widget.AppCompatImageView
 import dev.apexnative.navigation.R
 import dev.apexnative.navigation.utils.MaterialTheme
 import dev.apexnative.navigation.utils.UiUtils
+import dev.apexnative.navigation.views.stack.topbar.titlebar.ButtonRow
 
 /**
  * The top bar of a stack: one per stack, showing what its screen on top sets. Top to bottom: the strip under the status
@@ -47,7 +49,7 @@ class TopBar(context: Context) : FrameLayout(themed(context)) {
     private val largeTitleHolder = FrameLayout(this.context)
     private val searchHolder = FrameLayout(this.context)
     private val border = View(this.context)
-    private val snapshot = ImageView(this.context)
+    private val snapshot = Snapshot(this.context)
     private var searchArea: View? = null
     private var barHeight = UiUtils.dpToPx(this.context, DEFAULT_HEIGHT_DP)
     private var searchTakesBar = false
@@ -58,12 +60,12 @@ class TopBar(context: Context) : FrameLayout(themed(context)) {
     // `topBar.elevation`, in pixels: the bar's elevation unless it is flat.
     private var shadow = 0f
 
-    /** The toolbar of the right buttons: its menu holds them, the overflow items and the search's magnifier. */
-    val rightButtonBar: MaterialToolbar
+    /** The right buttons, the search's magnifier and "⋮". */
+    val rightButtonBar: ButtonRow
         get() = titleBar.rightButtonBar
 
-    /** The toolbar of the back button and the left buttons. */
-    val leftButtonBar: MaterialToolbar
+    /** The back button and the left buttons. */
+    val leftButtonBar: ButtonRow
         get() = titleBar.leftButtonBar
 
     /** The strip under the status bar at the top of the bar, in pixels: the bar is under the status bar. */
@@ -305,32 +307,27 @@ class TopBar(context: Context) : FrameLayout(themed(context)) {
         layoutParams = params
     }
 
-    // The row's picture in a transition.
+    // The row's picture in a transition: the drawing commands of the row as it is, not its pixels. Nothing as large
+    // as the bar is allocated or filled in on the main thread, and the renderer plays the commands each frame.
 
     /**
-     * Lays a picture of the row and the large title over them, laid out at once; false when the bar can't be drawn in
-     * software: no picture then.
+     * Lays a picture of the row and the large title over them, laid out at once; false when the bar can't be recorded:
+     * no picture then.
      */
     fun takeRowSnapshot(withLargeTitle: Boolean = true): Boolean {
         val width = rowArea.width
         val large = withLargeTitle && isLargeTitleShown
         val height = rowArea.height + if (large) largeTitleHolder.height else 0
         if (width <= 0 || height <= 0) return false
-        val picture = try {
-            Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888).also {
-                val canvas = Canvas(it)
-                rowArea.draw(canvas)
-                if (large) {
-                    canvas.translate(0f, rowArea.height.toFloat())
-                    largeTitleHolder.draw(canvas)
-                }
+        val picture = record(width, height) { canvas ->
+            rowArea.draw(canvas)
+            if (large) {
+                canvas.translate(0f, rowArea.height.toFloat())
+                largeTitleHolder.draw(canvas)
             }
-        } catch (e: IllegalArgumentException) {
-            // A HARDWARE bitmap in the bar: it can't be drawn on a software canvas.
-            return false
-        }
+        } ?: return false
         val top = content.top + rowArea.top
-        snapshot.setImageBitmap(picture)
+        snapshot.setImageDrawable(PictureDrawable(picture))
         snapshot.alpha = 1f
         snapshot.translationX = 0f
         snapshot.translationY = rowArea.translationY
@@ -348,29 +345,43 @@ class TopBar(context: Context) : FrameLayout(themed(context)) {
 
     /**
      * A picture of the bar under its row — the background, the large title, the search, the line — and where it starts
-     * in the bar, for a push to a screen without a large title; none when the bar can't be drawn in software.
+     * in the bar, for a push to a screen without a large title; none when the bar can't be recorded. Its intrinsic
+     * size is its size; it draws at the top left of its bounds.
      */
-    fun pictureUnderRow(): Pair<Bitmap, Int>? = pictureFrom(content.top + rowArea.bottom)
+    fun pictureUnderRow(): Pair<PictureDrawable, Int>? = pictureFrom(content.top + rowArea.bottom)
 
     /**
      * A picture of the whole bar, for the screen it leaves with in a transition of the stack's own; none when the bar
-     * can't be drawn in software.
+     * can't be recorded.
      */
-    fun picture(): Bitmap? = pictureFrom(0)?.first
+    fun picture(): PictureDrawable? = pictureFrom(0)?.first
 
-    private fun pictureFrom(top: Int): Pair<Bitmap, Int>? {
+    private fun pictureFrom(top: Int): Pair<PictureDrawable, Int>? {
         val width = width
         val height = height - top
         if (width <= 0 || height <= 0) return null
-        return try {
-            val bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888)
-            val canvas = Canvas(bitmap)
+        val picture = record(width, height) { canvas ->
             canvas.translate(0f, -top.toFloat())
             draw(canvas)
-            bitmap to top
-        } catch (e: IllegalArgumentException) {
-            null
+        } ?: return null
+        return PictureDrawable(picture) to top
+    }
+
+    // The commands [draw] gives, cut to [width] × [height]. A hardware bitmap in the bar is kept as it is from Android
+    // 9 on (the picture then plays only on the screen's hardware canvas, where the bar's pictures are drawn); Android 8
+    // can't record one, and there is no picture then.
+    private fun record(width: Int, height: Int, draw: (Canvas) -> Unit): Picture? = try {
+        Picture().also {
+            val canvas = it.beginRecording(width, height)
+            try {
+                canvas.clipRect(0, 0, width, height)
+                draw(canvas)
+            } finally {
+                it.endRecording()
+            }
         }
+    } catch (e: IllegalArgumentException) {
+        null
     }
 
     /** The row's picture goes. */
@@ -410,6 +421,12 @@ class TopBar(context: Context) : FrameLayout(themed(context)) {
         heightChanged = true
     }
 
+    // The row's picture: it fades as one image. Its commands overlap (a button's background under its icon), and drawn
+    // one by one at the view's opacity each would show through the next.
+    private class Snapshot(context: Context) : AppCompatImageView(context) {
+        override fun hasOverlappingRendering(): Boolean = true
+    }
+
     // The area of the row: it takes the touches without passing them on while the row is transparent.
     private class RowArea(context: Context) : FrameLayout(context) {
         var blocksTouches = false

package/android/src/main/java/dev/apexnative/navigation/views/stack/topbar/titlebar/BarButtonComponentCell.kt

@@ -8,12 +8,12 @@ import dev.apexnative.navigation.utils.UiUtils
 import kotlin.math.max
 
 /**
- * The cell of a React button in the bar (`topBar.leftButtons[].component`): the action view of the button's menu item,
- * as an icon's: 12 dp on each side, at least 48 dp wide, as high as the row, the content in its middle. The content (a
- * React root, or later a view of the screen's own tree) measures `AT_MOST` — the width at most what the row gives, the
- * height at most the row's — or exactly its `component.width` / `component.height` when the options give them
- * ([contentWidth], [contentHeight], pixels). The cell takes the menu's id; the content never gets one (React Native
- * rejects a root with an id). It never looks inside the content.
+ * The cell of a React button in the bar (`topBar.leftButtons[].component`), in the row of its side as an icon button
+ * stands there: 12 dp on each side, at least 48 dp wide, as high as the row gives, the content in its middle. The
+ * content (a React root, or later a view of the screen's own tree) measures `AT_MOST` — the width at most what the row
+ * gives, the height at most the row's — or exactly its `component.width` / `component.height` when the options give
+ * them ([contentWidth], [contentHeight], pixels). The cell takes the button's `testID`; the content never gets one
+ * (React Native rejects a root with an id). It never looks inside the content.
  */
 @SuppressLint("ViewConstructor")
 internal class BarButtonComponentCell(context: Context) : ViewGroup(context) {

package/android/src/main/java/dev/apexnative/navigation/views/stack/topbar/titlebar/BarButtonView.kt

@@ -0,0 +1,113 @@
+package dev.apexnative.navigation.views.stack.topbar.titlebar
+
+import android.annotation.SuppressLint
+import android.content.Context
+import android.content.res.TypedArray
+import android.graphics.drawable.Drawable
+import android.view.Gravity
+import android.widget.Button
+import androidx.appcompat.R as AppCompatR
+import androidx.appcompat.widget.AppCompatTextView
+import androidx.appcompat.widget.TooltipCompat
+import androidx.core.widget.TextViewCompat
+import dev.apexnative.navigation.utils.UiUtils
+import kotlin.math.roundToInt
+
+/**
+ * A button of the bar with an icon or a text, drawn as a toolbar draws the items of its menu: the theme's
+ * `actionButtonStyle` (48 dp at least, 12 dp at the sides, the bar's ripple), its `actionMenuTextAppearance` and
+ * `actionMenuTextColor`, the icon at most 32 dp and in the middle. With an icon the text doesn't show; it labels the
+ * button for accessibility and is its tooltip instead, unless the button has a label of its own. Main thread only.
+ */
+@SuppressLint("ViewConstructor")
+internal class BarButtonView(context: Context) :
+    AppCompatTextView(context, null, AppCompatR.attr.actionButtonStyle) {
+    private val minimumWidth = minWidth
+    private val maxIconSize = UiUtils.dpToPx(context, MAX_ICON_DP).roundToInt()
+    private val sidePadding = UiUtils.dpToPx(context, SIDE_DP).roundToInt()
+    private var icon: Drawable? = null
+
+    init {
+        gravity = Gravity.CENTER
+        isFocusable = true
+        val vertical = UiUtils.dpToPx(context, VERTICAL_DP).roundToInt()
+        setPaddingRelative(sidePadding, vertical, sidePadding, vertical)
+        restyle()
+    }
+
+    /** The text appearance and color of the theme as it is now: a light/dark switch changes them. */
+    fun restyle() {
+        themed(AppCompatR.attr.actionMenuTextAppearance) { getResourceId(0, 0) }
+            .takeIf { it != 0 }
+            ?.let { TextViewCompat.setTextAppearance(this, it) }
+        themed(AppCompatR.attr.actionMenuTextColor) { getColorStateList(0) }?.let(::setTextColor)
+    }
+
+    private fun <T> themed(attr: Int, read: TypedArray.() -> T): T {
+        val values = context.obtainStyledAttributes(intArrayOf(attr))
+        return try {
+            values.read()
+        } finally {
+            values.recycle()
+        }
+    }
+
+    /**
+     * What the button shows: [icon], or [title] without one. [label] is its accessibility label, else the title when
+     * only the icon shows; that title is its tooltip too. [tooltip] false leaves the long press to the caller.
+     */
+    fun show(title: CharSequence, icon: Drawable?, label: CharSequence?, tooltip: Boolean) {
+        this.icon = icon?.also { fit(it) }
+        setCompoundDrawablesRelative(icon, null, null, null)
+        text = if (icon == null) title else null
+        val hidden = title.takeIf { icon != null && it.isNotEmpty() }
+        contentDescription = label?.takeIf { it.isNotEmpty() } ?: hidden
+        TooltipCompat.setTooltipText(this, if (tooltip) hidden else null)
+        requestLayout()
+    }
+
+    // TalkBack and UI tests see a button, as they see a toolbar's item.
+    override fun getAccessibilityClassName(): CharSequence = Button::class.java.name
+
+    // An icon larger than the bar's item takes keeps its shape at 32 dp.
+    private fun fit(icon: Drawable) {
+        var width = icon.intrinsicWidth.coerceAtLeast(0)
+        var height = icon.intrinsicHeight.coerceAtLeast(0)
+        if (width > maxIconSize) {
+            height = (height * maxIconSize.toFloat() / width).roundToInt()
+            width = maxIconSize
+        }
+        if (height > maxIconSize) {
+            width = (width * maxIconSize.toFloat() / height).roundToInt()
+            height = maxIconSize
+        }
+        icon.setBounds(0, 0, width, height)
+    }
+
+    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
+        val centered = icon?.takeIf { text.isNullOrEmpty() }
+        if (centered == null) setPaddingRelative(sidePadding, paddingTop, sidePadding, paddingBottom)
+        super.onMeasure(widthMeasureSpec, heightMeasureSpec)
+        // At least the theme's width, within what the row gives.
+        val mode = MeasureSpec.getMode(widthMeasureSpec)
+        val target = if (mode == MeasureSpec.AT_MOST) {
+            minOf(MeasureSpec.getSize(widthMeasureSpec), minimumWidth)
+        } else {
+            minimumWidth
+        }
+        if (mode != MeasureSpec.EXACTLY && minimumWidth > 0 && measuredWidth < target) {
+            super.onMeasure(MeasureSpec.makeMeasureSpec(target, MeasureSpec.EXACTLY), heightMeasureSpec)
+        }
+        // The icon alone stands in the middle of the button.
+        if (centered != null) {
+            val start = (measuredWidth - centered.bounds.width()) / 2
+            setPaddingRelative(start, paddingTop, paddingEnd, paddingBottom)
+        }
+    }
+
+    private companion object {
+        const val MAX_ICON_DP = 32f
+        const val SIDE_DP = 12f
+        const val VERTICAL_DP = 4f
+    }
+}