Skip to content

Android: skeuomorphic 1:1 desktop chrome + edge-snap panel + smooth motion#18

Merged
Leonxlnx merged 1 commit into
mainfrom
devin/1779062848-android-skeuo
May 18, 2026
Merged

Android: skeuomorphic 1:1 desktop chrome + edge-snap panel + smooth motion#18
Leonxlnx merged 1 commit into
mainfrom
devin/1779062848-android-skeuo

Conversation

@devin-ai-integration

Copy link
Copy Markdown
Contributor

Summary

Fix three high-signal issues reported in PR #17's APK test (Android only — no desktop code touched):

  1. Dark "fleck" at the panel's rounded corners. The previous panel was vertically centered and rounded on all four corners, so the rounded top-right / bottom-right corners exposed the dim scrim through the rounding, and there was a horizontal strip of scrim above / below the panel. The panel is now:

    • Full-height (Gravity.END | Gravity.TOP, MATCH_PARENT height), so no scrim strip is visible.
    • Asymmetric cornerRadii — only the inner edge corners are rounded (top-left + bottom-left for right dock, mirrored for left). The outer corners are square and sit flush against the screen edge, so the rounding is never visible against the scrim. Same recipe as the desktop's border-radius: var(--panel-radius) 0 0 var(--panel-radius).
    • Scrim opacity reduced from 50% to 31% so the home screen behind the panel reads softer.
  2. Open / close not smooth. The panel now slides with PathInterpolator(0.2, 0.8, 0.2, 1) (identical to the desktop's cubic-bezier(0.2, 0.8, 0.2, 1)). The view tree is laid out before the animation starts (so the first frame isn't the cost of inflating 70+ children), hardware layers are forced for the duration of the slide, and a minimum motion duration of 180 ms is enforced. The close transition uses a matching cubic-bezier(0.55, 0, 0.7, 0.3) ease-in.

  3. Edge handle (bubble) looked cheap. Redrawn with a proper skeuomorphic stack:

    • Hardware soft shadow via View.elevation + ViewOutlineProvider.
    • Additional canvas shadow layer (matches desktop box-shadow: -8px 16px 28px rgba(15,23,42,0.08)).
    • 2-stop body gradient from the per-theme --handle-bg token (already in R.color.handle_grad_top/bot).
    • 1dp inset top highlight (inset 0 1px 0 rgba(255,255,255,0.72)).
    • Lucide PanelRightOpen glyph (panel outline + rail + chevron) instead of the bare 3-stroke icon.

Plus a full skeuomorphic chrome system in Drawables.kt:

  • New panelSurface(..., dockEdge, radiusDp) returns a LayerDrawable with body gradient (top-tinted) + transparent inset top highlight, with asymmetric cornerRadii for the dock edge.
  • New chromeButton, railButton, captureRow factories return LayerDrawable(body-gradient, top-highlight) with a 1dp border. Pressed / active states swap colors and pick up the accent line border, matching .sidebar-rail button.is-active.
  • taskRow now also uses the gradient + highlight + border layered drawable instead of a flat fill.
  • primaryButton produces an accent-gradient body for the capture-row + button with a faint top highlight, matching .add-task in the desktop CSS.

Testing

  • ./gradlew assembleDebug (Android module)
  • ./gradlew assembleRelease (signed)
  • ./gradlew lint
  • npm run build — not relevant, no desktop changes
  • npm run lint — not relevant, no desktop changes
  • cargo check --manifest-path src-tauri/Cargo.toml — not relevant, no Rust changes

Platform Notes

  • Android: All changes scoped to /android/. Phone test required (overlays don't run in CI emulators). The fixes are functional (gravity, drawable layout, motion curve) so they don't require device-specific validation, but visual polish should be confirmed on real hardware.
  • Windows / macOS: no changes.

Screenshots

Visual changes are panel-shape, animation curve, and elevation — all of which need a phone to verify. APK is built by the existing android.yml workflow and uploaded as both a workflow artifact and a rolling android-latest prerelease once this merges.

Link to Devin session: https://app.devin.ai/sessions/a29437e8dd5a412393c371c333455c2a
Requested by: @Leonxlnx

…otion

- Panel surface now uses asymmetric corner radii so only the inner edge
  is rounded (top-left/bottom-left for right dock, mirrored for left dock).
  The outer corners sit flush against the screen so the dark scrim no
  longer bleeds through the rounding — fixes the 'fleck' artifact.
- Panel snaps full-height to the dock edge (Gravity.TOP, no
  CENTER_VERTICAL), so there is no scrim strip above or below it.
- Open/close motion now uses PathInterpolator(0.2, 0.8, 0.2, 1) +
  hardware layers, identical to the desktop transition curve. The view
  tree is laid out before the slide starts, eliminating first-frame jank.
- Panel uses 22dp elevation for its left shadow (matches desktop
  -28px 0 72px box-shadow).
- Drawables.kt: new skeuomorphic factories (panelSurface, chromeButton,
  railButton, taskRow with gradient body + inner highlight + 1dp border)
  matching the desktop CSS gradient + inset-shadow recipe.
- Edge handle: redrawn with hardware soft shadow, inset top highlight,
  and a proper lucide PanelRightOpen icon (panel outline + rail +
  chevron) instead of the bare 3-line glyph.
- Capture row +button is now a primary accent gradient with white icon
  and lift, matching desktop quick-add.

Co-Authored-By: Leon Lin <lexn.lin8@gmail.com>
@devin-ai-integration

Copy link
Copy Markdown
Contributor Author

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

  • Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
  • Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

  • Disable automatic comment and CI monitoring

@Leonxlnx Leonxlnx merged commit 809b0d5 into main May 18, 2026
3 checks 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