Skip to content

feat(timer): handle rotation in-app without relaunching activity#23

Merged
Xitee1 merged 2 commits into
mainfrom
feat/in-app-rotation
Apr 18, 2026
Merged

feat(timer): handle rotation in-app without relaunching activity#23
Xitee1 merged 2 commits into
mainfrom
feat/in-app-rotation

Conversation

@Xitee1
Copy link
Copy Markdown
Owner

@Xitee1 Xitee1 commented Apr 18, 2026

Summary

  • Lock MainActivity to portrait and detect device pose via OrientationEventListener, then rotate text/icons inside Compose so the UI stays readable when the phone is tilted — the dial no longer overflows on system rotation.
  • Landscape layout: title moves from TopBar centre to the right edge (inline with the settings icon), and "Endet um" slides down via translationY so it sits midway between the dial and the buttons. The required shift is computed from BoxWithConstraints, so the dial stays put on any screen size.
  • Reverse portrait (180°): same physical layout as portrait, just every element rotated 180° — the text reuses exactly the same space it had upright.
  • All rotating elements share one animated angle (shortest-path aware, 350ms tween) so the effect reads as a single synchronised rotation.

Design doc: docs/plans/2026-04-18-in-app-rotation-design.md.

Test plan

  • Tilt the phone 90° in either direction on the timer screen: dial contents rotate, title appears next to the settings icon on the right edge, "Endet um" sits centred between dial and buttons, all button icons rotate.
  • Tilt to 180° (upside down): title stays in the TopBar centre and "Endet um" stays in its portrait position, just rotated 180°.
  • Rotate between the four orientations several times: rotation always takes the shortest visual path without snap-back.
  • Navigate to settings / about and back: rotation state recovers correctly; those screens remain portrait-only.
  • Verify on a smaller device that the dial position doesn't shift when "Endet um" slides.

🤖 Generated with Claude Code

Xitee1 and others added 2 commits April 18, 2026 19:29
Design for handling device rotation internally in Compose while
locking the Activity to portrait, so layout elements stay in place
and only text/icons rotate to match device pose.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The timer screen's layout was portrait-only, so system rotation pushed
the dial off-screen. Lock MainActivity to portrait and detect device
pose via OrientationEventListener, rotating text and icons inside
Compose so the UI stays readable when the phone is tilted.

Layout rules:
- Portrait: unchanged.
- Landscape (90° / 270°): title crossfades from the TopBar centre to
  the right edge, inline with the settings icon. "Endet um" slides
  down via translationY so it sits midway between the dial and the
  buttons, with the shift computed from BoxWithConstraints so the
  dial stays put on every screen size.
- Reverse portrait (180°): same layout as portrait, every element
  rotated 180° — the text reuses the same space it had upright.

All rotating elements share one animated angle (shortest-path aware,
350ms tween) so the effect reads as a single synchronised rotation.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@Xitee1 Xitee1 merged commit c6dd705 into main Apr 18, 2026
1 check passed
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.

1 participant