Skip to content

Round the zoom bar indicator's ends on the first and last stops - #638

Merged
temcguir merged 5 commits into
mainfrom
temcguir/zoombar-rounded-endcaps
Nov 6, 2026
Merged

temcguir merged 5 commits into
mainfrom
temcguir/zoombar-rounded-endcaps

Conversation

@temcguir

@temcguir temcguir commented Nov 4, 2026 •

Copy link
Copy Markdown
Collaborator

Follow-up to #625 based on design feedback.

When the zoom bar indicator moves onto the first or last stop, the side facing the end of the track now morphs from the standard corner radius to a fully rounded end that follows the curve of the track's end cap. The side facing the other stops keeps the standard corner radius. With a single stop, both sides are rounded.

  • Horizontal: the indicator is inset equally from the track's ends and sides, so the rounded end is concentric with the end cap and keeps a uniform gap.
  • Vertical: the indicator is flush with the track's sides, so on the end stops it also extends to the end of the track and fills the end cap with no gap.

The morph is driven by the existing animated indicator position, so it eases in and out as the indicator slides between stops.

Before / After

image Left: current `main`. Right: this PR.

Previews and screenshot tests

  • Adds an internal ZoomBarPreview helper shared by all zoom bar previews and the new screenshot tests.
  • Adds previews for the last stop in both orientations.
  • Adds ZoomBarScreenshotTest covering the first, middle, and last stops in both orientations, plus the single-stop case. The reference images show the new end caps.

Testing

  • ZoomBarComponentsTest (unit)
  • validateStableDebugScreenshotTest
  • Connected tests for :ui:components:capture and the app's DebugOverlayTest
  • Manually verified on a device in both orientations (vertical via a temporary local change), including tap transitions between stops and a right-to-left locale.

As the indicator moves onto the first or last stop, the side facing the
track's end cap now morphs from the standard corner radius to a fully
rounded end that follows the curve of the end cap. With a single stop,
both sides are rounded.

In the horizontal layout the indicator is inset equally from the track's
ends and sides, so the rounded end is concentric with the end cap. In the
vertical layout the indicator is flush with the track's sides, so on the
end stops it also extends to the end of the track and fills the end cap.

Also adds previews and screenshot tests for the first, middle, and last
stops in both orientations and the single-stop case, sharing a
ZoomBarPreview helper.

@gemini-code-assist gemini-code-assist Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request refactors the ZoomBar component to draw a custom zoom indicator that morphs its corners and extends to fill the end caps when moving onto the first or last stops. It introduces the drawZoomIndicator modifier and endCapFraction helper, along with corresponding unit tests and a new screenshot test suite. The review feedback suggests updating the visibility of the new screenshot preview functions to internal and adding KDoc documentation to comply with the repository's style guide.

@temcguir
temcguir merged commit 7c96293 into main Nov 6, 2026
12 checks passed
@temcguir
temcguir deleted the temcguir/zoombar-rounded-endcaps branch November 6, 2026 22:24
Kimblebee added a commit that referenced this pull request Nov 10, 2026
- Reconcile #638 rounded indicator end-caps (drawZoomIndicator and
  ZoomBarPreview) with RTL layout/BiDi handling, ZOOM_BAR_INDICATOR_TAG,
  and wrapContentSize/slotSizePx touch-target math, extending vertical
  end-caps to exact pixel track bounds across fractional densities and
  updating ZoomBarScreenshotTest reference images.
- Preserve both zoom_* accessibility strings (with optical magnification
  translator notes) and camera_error_* strings in strings.xml.
- Remove conditional remember inside ZoomBarItem pinchedStateDescription
  and format displayTenths directly via formatZoomDecimal.
- Move vertical stop ordering UX follow-up out of public ZoomBar KDoc
  into an implementation TODO comment.
- Smoothly interpolate labelRotationDegrees max-span auto-scaling via
  lerp and apply horizontal label padding outside graphicsLayer.
- Keep #638 endCapFraction tests and add Robolectric UI tests for 2.0x
  fontScale clamping/bounds and smooth rotation auto-scaling.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants