@apexnative/navigation 0.0.0-stage → 1.0.0-alpha.1

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

@@ -0,0 +1,407 @@
+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.Rect
+import android.graphics.drawable.ColorDrawable
+import android.os.Build
+import android.view.ContextThemeWrapper
+import android.view.Gravity
+import android.view.MotionEvent
+import android.view.View
+import android.view.ViewGroup
+import android.widget.FrameLayout
+import android.widget.ImageView
+import android.widget.LinearLayout
+import com.google.android.material.appbar.MaterialToolbar
+import dev.apexnative.navigation.R
+import dev.apexnative.navigation.utils.MaterialTheme
+import dev.apexnative.navigation.utils.UiUtils
+
+/**
+ * The top bar of a stack: one per stack, showing what its screen on top sets. Top to bottom: the strip under the status
+ * bar ([topPadding]), the row's area (`topBar.height`) with the row of the title and the buttons ([titleBar],
+ * `topBar.title.height`, moved down by `topBar.title.topMargin`), the large title (88 dp), the search area under the
+ * row or in its place ([setSearchArea]), and the line under the bar; the color and the React background
+ * ([setBackgroundComponent]) go from edge to edge, under the strip too. It has a theme of its own over the app's
+ * Material 3 theme or the navigation's neutral one, never the activity's, which follows a light/dark switch
+ * ([MaterialTheme.rebase]).
+ *
+ * The core moves it only by its translation (hiding, the hide on scroll, the large title's collapse); it is a plain
+ * view, so the stack's `CoordinatorLayout` gives it no behavior of its own. Main thread only.
+ */
+@SuppressLint("ViewConstructor")
+class TopBar(context: Context) : FrameLayout(themed(context)) {
+    private val backgroundHolder = FrameLayout(this.context)
+    private val content = LinearLayout(this.context).apply { orientation = LinearLayout.VERTICAL }
+    private val rowArea = RowArea(this.context)
+
+    /** The row of the title and the buttons. */
+    val titleBar = TitleBar(this.context)
+
+    /** The large title under the row (`topBar.largeTitle`), shown by [setLargeTitleShown]. */
+    val largeTitle = LargeTitleView(this.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 var searchArea: View? = null
+    private var barHeight = UiUtils.dpToPx(this.context, DEFAULT_HEIGHT_DP)
+    private var searchTakesBar = false
+    // A part that sets the bar's height changed since [layoutNow] last laid it out.
+    private var heightChanged = false
+    // How far the large title is collapsed, in pixels.
+    private var largeTitleShift = 0
+
+    /** The toolbar of the right buttons: its menu holds them, the overflow items and the search's magnifier. */
+    val rightButtonBar: MaterialToolbar
+        get() = titleBar.rightButtonBar
+
+    /** The toolbar of the back button and the left buttons. */
+    val leftButtonBar: MaterialToolbar
+        get() = titleBar.leftButtonBar
+
+    /** The strip under the status bar at the top of the bar, in pixels: the bar is under the status bar. */
+    var topPadding = 0
+        set(value) {
+            if (field == value) return
+            field = value
+            content.setPadding(0, value, 0, 0)
+            heightChanged = true
+        }
+
+    /** The large title shows under the row. */
+    val isLargeTitleShown: Boolean
+        get() = largeTitleHolder.visibility == VISIBLE
+
+    /** The height of the search area under the row, in pixels; 0 without one or when it takes the row. */
+    val searchAreaHeight: Int
+        get() = if (searchArea != null && !searchTakesBar) searchHolder.layoutParams.height.coerceAtLeast(0) else 0
+
+    init {
+        MaterialTheme.follow(this.context, R.style.ThemeOverlay_ApexNavigation_TopBar)
+        addView(backgroundHolder, LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT))
+        addView(content, LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT))
+        val row = UiUtils.dpToPx(this.context, DEFAULT_HEIGHT_DP)
+        rowArea.addView(titleBar, LayoutParams(LayoutParams.MATCH_PARENT, row))
+        content.addView(rowArea, LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, row))
+        largeTitleHolder.addView(largeTitle, LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT))
+        largeTitleHolder.visibility = GONE
+        largeTitleHolder.addOnLayoutChangeListener { _, _, _, _, _, _, _, _, _ -> clipLargeTitle() }
+        content.addView(largeTitleHolder, LinearLayout.LayoutParams(
+            LinearLayout.LayoutParams.MATCH_PARENT,
+            UiUtils.dpToPx(this.context, LargeTitleView.HEIGHT).toInt(),
+        ))
+        searchHolder.visibility = GONE
+        content.addView(searchHolder, LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, 0))
+        border.visibility = GONE
+        border.setBackgroundColor(Color.BLACK)
+        content.addView(border, LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, 0))
+        // The picture of the row takes the touches while it lies over it, and accessibility doesn't see it: it is only
+        // a picture of what was there. It stays at the left edge, so a layout right to left doesn't move it.
+        snapshot.visibility = GONE
+        snapshot.isClickable = true
+        snapshot.importantForAccessibility = IMPORTANT_FOR_ACCESSIBILITY_NO
+        snapshot.scaleType = ImageView.ScaleType.MATRIX
+        addView(snapshot, LayoutParams(0, 0, Gravity.TOP or Gravity.LEFT))
+        setBackgroundColor(TopBarDefaults.backgroundColor(this.context))
+    }
+
+    /** The opacity of the row of the title and the buttons, which fades as the bar hides on scroll. */
+    fun setTitleRowAlpha(alpha: Float) {
+        titleBar.alpha = alpha
+    }
+
+    /**
+     * What the bar shows of the search of the screen on top ([area], [height] pixels tall), under the row or, when
+     * [takesBar], in its place; none removes it.
+     */
+    fun setSearchArea(area: View?, height: Int, takesBar: Boolean) {
+        heightChanged = true
+        if (searchArea !== area) {
+            searchArea?.let { (it.parent as? ViewGroup)?.removeView(it) }
+            searchArea = area
+        }
+        searchTakesBar = area != null && takesBar
+        if (area == null) {
+            searchHolder.visibility = GONE
+            titleBar.visibility = VISIBLE
+            setRowAreaHeight(barHeight)
+            return
+        }
+        val holder = if (takesBar) rowArea else searchHolder
+        if (area.parent !== holder) {
+            (area.parent as? ViewGroup)?.removeView(area)
+            holder.addView(area, LayoutParams(LayoutParams.MATCH_PARENT, height))
+        } else {
+            area.layoutParams = area.layoutParams.also { it.height = height }
+        }
+        if (takesBar) {
+            searchHolder.visibility = GONE
+            titleBar.visibility = INVISIBLE
+            setRowAreaHeight(height)
+        } else {
+            titleBar.visibility = VISIBLE
+            setRowAreaHeight(barHeight)
+            searchHolder.visibility = VISIBLE
+            searchHolder.layoutParams = searchHolder.layoutParams.also { it.height = height }
+        }
+    }
+
+    /** The search takes the row: the large title doesn't show. */
+    val searchTakesRow: Boolean
+        get() = searchTakesBar
+
+    /** `topBar.height`: the area of the row, in pixels; [layoutNow] applies it in the same frame. */
+    fun setBarHeight(height: Int) {
+        if (barHeight == height) return
+        barHeight = height
+        if (!searchTakesBar) setRowAreaHeight(height)
+    }
+
+    /** `topBar.title.height` and `topBar.title.topMargin`: the row's height and its shift, in pixels. */
+    fun setRow(height: Int, topMargin: Int) {
+        val params = titleBar.layoutParams as LayoutParams
+        if (params.height == height && params.topMargin == topMargin) return
+        params.height = height
+        params.topMargin = topMargin
+        titleBar.layoutParams = params
+        heightChanged = true
+    }
+
+    /** The bar's color, under the strip and the React background too. */
+    fun setBarColor(color: Int) {
+        val current = (background as? ColorDrawable)?.color
+        if (current == color) return
+        setBackgroundColor(color)
+    }
+
+    /** The bar's color now. */
+    val barColor: Int
+        get() = (background as? ColorDrawable)?.color ?: Color.TRANSPARENT
+
+    /**
+     * 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 (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P) {
+            outlineAmbientShadowColor = Color.BLACK
+            outlineSpotShadowColor = Color.BLACK
+        }
+    }
+
+    /** The line under the bar: [height] pixels of [color]. */
+    fun setBorder(color: Int, height: Int) {
+        border.setBackgroundColor(color)
+        val params = border.layoutParams
+        if (params.height != height) {
+            params.height = height
+            border.layoutParams = params
+            heightChanged = true
+        }
+        val visibility = if (height > 0) VISIBLE else GONE
+        if (border.visibility != visibility) {
+            border.visibility = visibility
+            heightChanged = true
+        }
+    }
+
+    /** The React background of the bar, the bar's whole height with the strip; none takes it away. */
+    fun setBackgroundComponent(view: View?) {
+        val current = if (backgroundHolder.childCount > 0) backgroundHolder.getChildAt(0) else null
+        if (current === view) return
+        backgroundHolder.removeAllViews()
+        if (view == null) return
+        (view.parent as? ViewGroup)?.removeView(view)
+        backgroundHolder.addView(view, LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT))
+    }
+
+    /** The background the bar shows now; none. */
+    val backgroundComponent: View?
+        get() = if (backgroundHolder.childCount > 0) backgroundHolder.getChildAt(0) else null
+
+    /** Shows the large title under the row, or not (88 dp more; [layoutNow] applies it in the same frame). */
+    fun setLargeTitleShown(shown: Boolean) {
+        val visibility = if (shown) VISIBLE else GONE
+        if (largeTitleHolder.visibility == visibility) return
+        largeTitleHolder.visibility = visibility
+        heightChanged = true
+        if (!shown) setLargeTitleCollapse(0)
+    }
+
+    /**
+     * The large title collapsed by [shift] pixels: the bar moves up, the row stays where it was, and the large title is
+     * cut under the row. The row's picture in a transition moves with the row.
+     */
+    fun setLargeTitleCollapse(shift: Int) {
+        largeTitleShift = shift
+        translationY = -shift.toFloat()
+        rowArea.translationY = shift.toFloat()
+        snapshot.translationY = shift.toFloat()
+        clipLargeTitle()
+    }
+
+    // The large title cut under the row by its collapse, at the holder's size: set again when the holder is laid out,
+    // since a collapse set before the holder's first layout (or while it was hidden) has no size yet.
+    private fun clipLargeTitle() {
+        val shift = largeTitleShift
+        val holder = largeTitleHolder
+        holder.clipBounds = if (shift > 0) Rect(0, shift, holder.width, holder.height) else null
+    }
+
+    /**
+     * Measures and lays out the bar at once at the size its parts give now. A height set through layout params lands a
+     * layout pass later, while translations and visibility apply at once: the frame between would show an empty band or
+     * a hole. Only when a part that sets the height changed, for a bar that is laid out, outside a layout pass; the
+     * parent's next pass follows as usual.
+     */
+    fun layoutNow() {
+        if (!heightChanged) return
+        heightChanged = false
+        val parent = parent as? View
+        val params = layoutParams as? MarginLayoutParams
+        if (parent != null && params != null && isLaidOut && !isInLayout) {
+            val room = parent.height - parent.paddingTop - parent.paddingBottom - params.topMargin - params.bottomMargin
+            measure(
+                MeasureSpec.makeMeasureSpec(width, MeasureSpec.EXACTLY),
+                MeasureSpec.makeMeasureSpec(room.coerceAtLeast(0), MeasureSpec.AT_MOST),
+            )
+            val top = parent.paddingTop + params.topMargin
+            layout(left, top, left + measuredWidth, top + measuredHeight)
+        }
+        requestLayout()
+    }
+
+    /** How far up the bar goes to hide: its height and the room over it. */
+    val hiddenOffset: Float
+        get() = (measuredHeight + ((layoutParams as? MarginLayoutParams)?.topMargin ?: 0)).toFloat()
+
+    /** `topBar.topMargin` and the status bar over a bar below it: the room over the bar, in pixels. */
+    fun setMargin(margin: Int) {
+        val params = layoutParams as? MarginLayoutParams ?: return
+        if (params.topMargin == margin) return
+        params.topMargin = margin
+        heightChanged = true
+        layoutParams = params
+    }
+
+    // The row's picture in a transition.
+
+    /**
+     * 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.
+     */
+    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)
+                }
+            }
+        } catch (e: IllegalArgumentException) {
+            // A HARDWARE bitmap in the bar: it can't be drawn on a software canvas.
+            return false
+        }
+        val top = content.top + rowArea.top
+        snapshot.setImageBitmap(picture)
+        snapshot.alpha = 1f
+        snapshot.translationX = 0f
+        snapshot.translationY = rowArea.translationY
+        snapshot.visibility = VISIBLE
+        snapshot.layoutParams = (snapshot.layoutParams as LayoutParams).also {
+            it.width = width
+            it.height = height
+            it.topMargin = top
+        }
+        snapshot.measure(MeasureSpec.makeMeasureSpec(width, MeasureSpec.EXACTLY),
+            MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY))
+        snapshot.layout(0, top, width, top + height)
+        return true
+    }
+
+    /**
+     * 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.
+     */
+    fun pictureUnderRow(): Pair<Bitmap, Int>? {
+        val top = content.top + rowArea.bottom
+        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)
+            canvas.translate(0f, -top.toFloat())
+            draw(canvas)
+            bitmap to top
+        } catch (e: IllegalArgumentException) {
+            null
+        }
+    }
+
+    /** The row's picture goes. */
+    fun dropRowSnapshot() {
+        snapshot.setImageDrawable(null)
+        snapshot.translationY = 0f
+        snapshot.visibility = GONE
+    }
+
+    /**
+     * The row and the large title at [rowAlpha] and [rowShift] pixels along the line, the picture at [snapshotAlpha]
+     * and [snapshotShift]; the row takes no touches while it is transparent.
+     */
+    fun showRowFrame(snapshotAlpha: Float, snapshotShift: Float, rowAlpha: Float, rowShift: Float) {
+        if (snapshot.visibility == VISIBLE) {
+            snapshot.alpha = snapshotAlpha
+            snapshot.translationX = snapshotShift
+        }
+        rowArea.alpha = rowAlpha
+        rowArea.translationX = rowShift
+        largeTitleHolder.alpha = rowAlpha
+        largeTitleHolder.translationX = rowShift
+        rowArea.blocksTouches = rowAlpha <= 0f
+    }
+
+    /** The row and the large title at rest, the picture gone. */
+    fun restRow() {
+        dropRowSnapshot()
+        showRowFrame(1f, 0f, 1f, 0f)
+    }
+
+    private fun setRowAreaHeight(height: Int) {
+        val params = rowArea.layoutParams
+        if (params.height == height) return
+        params.height = height
+        rowArea.layoutParams = params
+        heightChanged = 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
+
+        override fun onInterceptTouchEvent(ev: MotionEvent?): Boolean = blocksTouches || super.onInterceptTouchEvent(ev)
+
+        @SuppressLint("ClickableViewAccessibility")
+        override fun onTouchEvent(event: MotionEvent?): Boolean = blocksTouches || super.onTouchEvent(event)
+    }
+
+    private companion object {
+        const val DEFAULT_HEIGHT_DP = 64
+
+        fun themed(context: Context): Context =
+            ContextThemeWrapper(MaterialTheme.context(context), R.style.ThemeOverlay_ApexNavigation_TopBar)
+    }
+}

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

@@ -0,0 +1,35 @@
+package dev.apexnative.navigation.views.stack.topbar
+
+import android.content.Context
+import android.graphics.Color
+import com.google.android.material.color.MaterialColors
+import com.google.android.material.R as MaterialR
+import dev.apexnative.navigation.utils.MaterialTheme
+
+/**
+ * The top bar's colors when the options don't set them: Material 3's surface, onSurface and onSurfaceVariant of the
+ * app's theme, or of the navigation's neutral one when the app's isn't Material 3 ([MaterialTheme]), so they follow
+ * light and dark mode.
+ */
+object TopBarDefaults {
+    @JvmStatic
+    fun backgroundColor(context: Context): Int =
+        MaterialColors.getColor(MaterialTheme.context(context), MaterialR.attr.colorSurface, Color.WHITE)
+
+    @JvmStatic
+    fun titleColor(context: Context): Int =
+        MaterialColors.getColor(MaterialTheme.context(context), MaterialR.attr.colorOnSurface, Color.BLACK)
+
+    @JvmStatic
+    fun subtitleColor(context: Context): Int =
+        MaterialColors.getColor(MaterialTheme.context(context), MaterialR.attr.colorOnSurfaceVariant, Color.GRAY)
+
+    /** The back arrow's. */
+    @JvmStatic
+    fun navigationIconColor(context: Context): Int =
+        MaterialColors.getColor(MaterialTheme.context(context), MaterialR.attr.colorOnSurface, Color.BLACK)
+
+    @JvmStatic
+    fun overflowIconColor(context: Context): Int =
+        MaterialColors.getColor(MaterialTheme.context(context), MaterialR.attr.colorOnSurfaceVariant, Color.BLACK)
+}

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

@@ -0,0 +1,82 @@
+package dev.apexnative.navigation.views.stack.topbar.search
+
+import android.annotation.SuppressLint
+import android.content.Context
+import android.view.View
+import android.widget.FrameLayout
+import android.widget.HorizontalScrollView
+import com.google.android.material.chip.Chip
+import com.google.android.material.chip.ChipDrawable
+import com.google.android.material.chip.ChipGroup
+import com.google.android.material.R as MaterialR
+import dev.apexnative.navigation.options.SearchBarScope
+import dev.apexnative.navigation.utils.TestIds
+import dev.apexnative.navigation.utils.dp
+
+/**
+ * The scopes of the search (`topBar.searchBar.scopes`): a row of Material 3 filter chips, one of them selected, that
+ * scrolls sideways when they don't fit. A pick by the user goes to [onPick]; [setScopes] selects without it.
+ */
+@SuppressLint("ViewConstructor")
+class ScopeRow(context: Context) : HorizontalScrollView(context) {
+    var onPick: ((String) -> Unit)? = null
+
+    private val group = ChipGroup(context)
+    private var styleContext: Context = context
+    private var scopes: List<SearchBarScope> = emptyList()
+    private var selected: String? = null
+    private val chipIds = HashMap<Int, String>()
+    private var selecting = false
+
+    init {
+        isHorizontalScrollBarEnabled = false
+        clipToPadding = false
+        setPadding(16.dp, 0, 16.dp, 0)
+        group.isSingleLine = true
+        group.isSingleSelection = true
+        group.isSelectionRequired = true
+        group.setOnCheckedStateChangeListener { _, checked ->
+            if (selecting) return@setOnCheckedStateChangeListener
+            checked.firstOrNull()?.let { chipIds[it] }?.let { onPick?.invoke(it) }
+        }
+        addView(group, FrameLayout.LayoutParams(FrameLayout.LayoutParams.WRAP_CONTENT, FrameLayout.LayoutParams.WRAP_CONTENT,
+            android.view.Gravity.CENTER_VERTICAL))
+    }
+
+    /** The chips of [scopes], [selected] checked; the same scopes keep their chips. */
+    fun setScopes(scopes: List<SearchBarScope>, selected: String?) {
+        this.selected = selected
+        selecting = true
+        if (scopes != this.scopes) {
+            this.scopes = scopes
+            group.removeAllViews()
+            chipIds.clear()
+            scopes.forEach { scope ->
+                val chip = Chip(styleContext)
+                chip.setChipDrawable(
+                    ChipDrawable.createFromAttributes(styleContext, null, 0, MaterialR.style.Widget_Material3_Chip_Filter)
+                )
+                chip.id = View.generateViewId()
+                chip.text = scope.title
+                chip.isCheckable = true
+                TestIds.apply(chip, scope.testID)
+                chipIds[chip.id] = scope.id
+                group.addView(chip)
+            }
+        }
+        chipIds.entries.firstOrNull { it.value == selected }?.let { group.check(it.key) }
+        selecting = false
+    }
+
+    /** Light or dark changed: the chips again, with the theme's colors from [styleContext]. */
+    fun restyle(styleContext: Context) {
+        this.styleContext = styleContext
+        val current = scopes
+        scopes = emptyList()
+        setScopes(current, selected)
+    }
+
+    companion object {
+        const val HEIGHT_DP = 48
+    }
+}

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

@@ -0,0 +1,130 @@
+package dev.apexnative.navigation.views.stack.topbar.search
+
+import android.annotation.SuppressLint
+import android.content.Context
+import android.content.res.ColorStateList
+import android.graphics.drawable.GradientDrawable
+import android.os.Build
+import android.text.InputType
+import android.util.TypedValue
+import android.view.Gravity
+import android.view.inputmethod.EditorInfo
+import android.widget.EditText
+import android.widget.FrameLayout
+import android.widget.ImageButton
+import android.widget.LinearLayout
+import androidx.annotation.ColorInt
+import androidx.annotation.DrawableRes
+import androidx.annotation.StringRes
+import androidx.core.graphics.ColorUtils
+import androidx.core.widget.doAfterTextChanged
+import androidx.appcompat.R as AppCompatR
+import dev.apexnative.navigation.utils.TestIds
+import dev.apexnative.navigation.utils.dp
+
+/**
+ * The open search field of the top bar: a Material 3 pill with a back arrow, the text and a clear button, in a row of
+ * the search's height. The back arrow closes the search ([onClose]); the clear button empties the text.
+ */
+@SuppressLint("ViewConstructor")
+class SearchField(context: Context) : FrameLayout(context) {
+    val editText = EditText(context)
+    var onClose: (() -> Unit)? = null
+
+    private val pill = LinearLayout(context)
+    private val pillBackground = GradientDrawable()
+    private val back: ImageButton
+    private val clear: ImageButton
+    @ColorInt private val defaultHighlight: Int
+    @ColorInt private var themePillColor = SearchStyle.pillColor(context)
+    @ColorInt private var optionPillColor: Int? = null
+
+    init {
+        pillBackground.cornerRadius = SearchStyle.PILL_HEIGHT_DP.dp / 2f
+        pillBackground.setColor(SearchStyle.pillColor(context))
+        pill.background = pillBackground
+        pill.orientation = LinearLayout.HORIZONTAL
+        pill.gravity = Gravity.CENTER_VERTICAL
+
+        back = iconButton(AppCompatR.drawable.abc_ic_ab_back_material, AppCompatR.string.abc_action_bar_up_description) {
+            onClose?.invoke()
+        }
+        clear = iconButton(AppCompatR.drawable.abc_ic_clear_material, AppCompatR.string.abc_searchview_description_clear) {
+            editText.setText("")
+        }
+        editText.apply {
+            background = null
+            isSingleLine = true
+            inputType = InputType.TYPE_CLASS_TEXT
+            imeOptions = EditorInfo.IME_ACTION_SEARCH or EditorInfo.IME_FLAG_NO_EXTRACT_UI
+            setTextSize(TypedValue.COMPLEX_UNIT_SP, 16f)
+            setTextColor(SearchStyle.textColor(context))
+            setHintTextColor(SearchStyle.hintColor(context))
+            setPadding(0, 0, 0, 0)
+        }
+        defaultHighlight = editText.highlightColor
+
+        pill.addView(back, LinearLayout.LayoutParams(48.dp, 48.dp))
+        pill.addView(editText, LinearLayout.LayoutParams(0, LayoutParams.WRAP_CONTENT, 1f))
+        pill.addView(clear, LinearLayout.LayoutParams(48.dp, 48.dp))
+        addView(pill, LayoutParams(LayoutParams.MATCH_PARENT, SearchStyle.PILL_HEIGHT_DP.dp, Gravity.CENTER_VERTICAL).apply {
+            marginStart = 16.dp
+            marginEnd = 16.dp
+        })
+
+        clear.visibility = GONE
+        editText.doAfterTextChanged { clear.visibility = if (it.isNullOrEmpty()) GONE else VISIBLE }
+    }
+
+    /**
+     * The `testID`s of the field (`topBar.searchBar.testID`), its back arrow (`.cancel`) and its clear button
+     * (`.clear`).
+     */
+    fun setTestId(testId: String?) {
+        TestIds.apply(editText, testId)
+        TestIds.apply(back, testId?.let { "$it.cancel" })
+        TestIds.apply(clear, testId?.let { "$it.clear" })
+    }
+
+    /** backgroundColor: the pill's; null gives back the theme's. */
+    fun setPillColor(@ColorInt color: Int?) {
+        optionPillColor = color
+        pillBackground.setColor(color ?: themePillColor)
+    }
+
+    /** Light or dark changed: the theme's colors again, from [styleContext]. */
+    fun restyle(styleContext: Context) {
+        themePillColor = SearchStyle.pillColor(styleContext)
+        pillBackground.setColor(optionPillColor ?: themePillColor)
+        editText.setTextColor(SearchStyle.textColor(styleContext))
+        editText.setHintTextColor(SearchStyle.hintColor(styleContext))
+        val icons = ColorStateList.valueOf(SearchStyle.hintColor(styleContext))
+        back.imageTintList = icons
+        clear.imageTintList = icons
+    }
+
+    /** tintColor: the cursor and the selected text; null gives back the theme's. */
+    fun setTintColor(@ColorInt color: Int?) {
+        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
+            editText.textCursorDrawable?.mutate()?.let { cursor ->
+                if (color != null) cursor.setTint(color) else cursor.setTintList(null)
+                editText.textCursorDrawable = cursor
+            }
+        }
+        editText.highlightColor = color?.let { ColorUtils.setAlphaComponent(it, 0x66) } ?: defaultHighlight
+    }
+
+    private fun iconButton(@DrawableRes icon: Int, @StringRes label: Int, onClick: () -> Unit): ImageButton =
+        ImageButton(context).apply {
+            setImageResource(icon)
+            imageTintList = ColorStateList.valueOf(SearchStyle.hintColor(context))
+            val ripple = TypedValue()
+            if (context.theme.resolveAttribute(android.R.attr.selectableItemBackgroundBorderless, ripple, true)) {
+                setBackgroundResource(ripple.resourceId)
+            } else {
+                background = null
+            }
+            contentDescription = context.getString(label)
+            setOnClickListener { onClick() }
+        }
+}

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

@@ -0,0 +1,29 @@
+package dev.apexnative.navigation.views.stack.topbar.search
+
+import android.content.Context
+import android.graphics.Color
+import com.google.android.material.color.MaterialColors
+import com.google.android.material.R as MaterialR
+import dev.apexnative.navigation.utils.MaterialTheme
+
+/** The look of the top bar's search: Material 3 colors from the app's theme, light or dark with it. */
+object SearchStyle {
+    /** The height of the row of the search in the bar, and of the pill in it. */
+    const val ROW_HEIGHT_DP = 72
+    const val PILL_HEIGHT_DP = 56
+
+    /** Material 3 components need a Material 3 theme: the app's, or the navigation's neutral one when it has another. */
+    @JvmStatic
+    fun materialContext(context: Context): Context = MaterialTheme.context(context)
+
+    fun pillColor(context: Context): Int =
+        MaterialColors.getColor(context, MaterialR.attr.colorSurfaceContainerHigh, Color.rgb(0xEC, 0xE6, 0xF0))
+
+    fun textColor(context: Context): Int = MaterialColors.getColor(context, MaterialR.attr.colorOnSurface, Color.BLACK)
+
+    fun hintColor(context: Context): Int =
+        MaterialColors.getColor(context, MaterialR.attr.colorOnSurfaceVariant, Color.GRAY)
+
+    /** Over the screen while the search is open and empty (obscuresBackgroundDuringPresentation). */
+    fun scrimColor(): Int = Color.argb(0x52, 0, 0, 0)
+}