@apexnative/navigation 1.0.0-alpha.1 → 1.0.0-alpha.11

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

@@ -4,12 +4,11 @@ import android.content.Context
 import android.content.res.ColorStateList
 import android.content.res.Configuration
 import android.graphics.Color
-import android.graphics.drawable.Drawable
 import com.google.android.material.floatingactionbutton.FloatingActionButton
 import dev.apexnative.navigation.options.params.ThemeColour
-import dev.apexnative.navigation.utils.ImageLoader
-import dev.apexnative.navigation.utils.ImageLoadingListenerAdapter
+import dev.apexnative.navigation.utils.ImageRequests
 import dev.apexnative.navigation.utils.MaterialTheme
+import dev.apexnative.navigation.utils.OptionImages
 import dev.apexnative.navigation.utils.UiUtils
 import dev.apexnative.navigation.viewcontrollers.viewcontroller.ScrollEventListener
 import androidx.appcompat.R as AppCompatR
@@ -29,6 +28,7 @@ class Fab(context: Context, val fabId: String) : FloatingActionButton(MaterialTh
     // The icon's color of the options: a container color merged later kept the theme's icon color instead.
     private var iconColor: Int? = null
     private var optionRippleColor: Int? = null
+    private val icons = ImageRequests<Unit>(OptionImages.source(this.context))
 
     init {
         // Material's theme overlay of the button is a copy of the theme, made once: it follows a light/dark switch too.
@@ -36,14 +36,18 @@ class Fab(context: Context, val fabId: String) : FloatingActionButton(MaterialTh
         MaterialTheme.followOverlay(this.context)
     }
 
-    fun applyIcon(icon: String, color: ThemeColour) {
+    /**
+     * The icon of the options, with its color. [mayWait]: the button can show it when it is ready (it shows an icon
+     * already, it is hidden with `visible: false`, or it is an action of a closed menu), so an icon the cache doesn't
+     * have loads off the main thread; the last icon asked for wins. Otherwise it loads at once. An icon that doesn't
+     * load leaves the button without an icon.
+     */
+    fun applyIcon(icon: String, color: ThemeColour, mayWait: Boolean) {
         if (color.hasValue()) iconColor = color.get()
-        ImageLoader().loadIcon(context, icon, object : ImageLoadingListenerAdapter() {
-            override fun onComplete(drawable: Drawable) {
-                setImageDrawable(drawable)
-                iconColor?.let { imageTintList = ColorStateList.valueOf(it) }
-            }
-        })
+        icons.request(Unit, icon, mayWait) { drawable ->
+            setImageDrawable(drawable)
+            iconColor?.let { imageTintList = ColorStateList.valueOf(it) }
+        }
     }
 
     /** iconColor alone, without a new icon: it did nothing in a merge. */

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 {
@@ -152,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)
@@ -192,17 +191,6 @@ class TitleBar(context: Context) : ViewGroup(context) {
         return min(max(middle, startBar), max(inner - endBar - width, startBar))
     }
 
-    // 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)
-        toolbar.minimumHeight = 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
@@ -55,13 +57,15 @@ class TopBar(context: Context) : FrameLayout(themed(context)) {
     private var heightChanged = false
     // How far the large title is collapsed, in pixels.
     private var largeTitleShift = 0
+    // `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. */
@@ -187,14 +191,27 @@ class TopBar(context: Context) : FrameLayout(themed(context)) {
      * The shadow of `topBar.elevation`, in pixels: its colors are black (Android 9 and later read them), none at 0.
      */
     fun setShadow(elevation: Float) {
-        if (this.elevation == elevation) return
-        this.elevation = elevation
+        if (shadow == elevation) return
+        shadow = elevation
+        if (!isFlat) this.elevation = elevation
         if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P) {
             outlineAmbientShadowColor = Color.BLACK
             outlineSpotShadowColor = Color.BLACK
         }
     }
 
+    /**
+     * The bar draws without its shadow, at the level of the screens, in a transition that draws it with a screen: a
+     * screen drawn after it covers it, and an alpha layer around it fades it (with an elevation the renderer would draw
+     * the bar over every screen and out of the layer).
+     */
+    var isFlat = false
+        set(value) {
+            if (field == value) return
+            field = value
+            elevation = if (value) 0f else shadow
+        }
+
     /** The line under the bar: [height] pixels of [color]. */
     fun setBorder(color: Int, height: Int) {
         border.setBackgroundColor(color)
@@ -290,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
@@ -333,22 +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>? {
-        val top = 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 recorded.
+     */
+    fun picture(): PictureDrawable? = pictureFrom(0)?.first
+
+    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. */
@@ -388,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
+    }
+}