Skip to content

feat: Add floating keyboard functionality to Scribe-Android (#261)#621

Open
prince-0408 wants to merge 6 commits into
scribe-org:mainfrom
prince-0408:feature/floating-keyboard-261
Open

feat: Add floating keyboard functionality to Scribe-Android (#261)#621
prince-0408 wants to merge 6 commits into
scribe-org:mainfrom
prince-0408:feature/floating-keyboard-261

Conversation

@prince-0408

Copy link
Copy Markdown
Contributor

Description

This pull request implements and refines the floating keyboard functionality for Scribe-Android. It introduces a movable, resizable, and floating keyboard layout, and resolves various styling issues across both light and dark modes.

Adding this feature solves a major point of confusion during onboarding/development where developers couldn't locate the keyboard in emulators that default to a floating state. It also greatly improves the keyboard experience in full-screen games, split-screen multitasking, and landscape layouts on tablet/phone screens.

Closes #261

Changes Made

  • Floating Keyboard Layout & Controls:
    • Integrated floating_drag_bar with visibility state tied to the floating preference.
    • Implemented real-time dragging via a customized floating_drag_handle pill.
    • Added support for scaling/resizing the keyboard dynamically using custom touch listeners on 4 corner handles (resize_handle_top_left/right and resize_handle_bottom_left/right).
  • Drag Handle Aesthetics:
    • Resized the bottom drag handle to a thicker (5dp) and wider (64dp canvas) rounded capsule.
    • Set a larger layout height (32dp) to comfortably display the updated handle.
  • Corner Resize Handles Visibility:
    • Defined a neutral, high-contrast resource resize_handle_color for both modes (#FF555555 solid medium-dark grey in light mode, and #FFB0B0B0 solid medium-light grey in dark mode).
    • This ensures they are clearly visible over light, dark, and blue backgrounds (such as the tutorial pages).
  • Docked Mode Background Leak Fix:
    • Configured keyboard_card to dynamically update its background color based on the current theme (dark_keyboard_bg_color or light_keyboard_bg_color) instead of using a static light grey.
    • This fixes the background color leak gap at the bottom of the docked keyboard.

Screenshots

SS3 SS2 SS1

@github-actions

Copy link
Copy Markdown

Thank you for the pull request! 💙🩵

The Scribe-Android team will do our best to address your contribution as soon as we can. The following are some important points:

  • Those interested in developing their skills and expanding their role in the community should read the mentorship and growth section of the contribution guide
  • If you're not already a member of our public Matrix community, please consider joining!
    • We'd suggest that you use the Element client as well as Element X for a mobile app
    • Join the General and Android rooms once you're in
  • Also consider attending our bi-weekly Saturday developer syncs!
    • Details are shared in the General room on Matrix each Wednesday before the sync
    • It would be great to meet you 😊

Note

Scribe uses Conventional Comments in reviews to make sure that communication is as clear as possible.

@github-actions

Copy link
Copy Markdown

Maintainer Checklist

The following is a checklist for maintainers to make sure this process goes as well as possible. Feel free to address the points below yourself in further commits if you realize that actions are needed :)

  • Tests for changes have been written and the unit test, linting and formatting workflows within the PR checks do not indicate new errors in the files changed

    • Tests may need to be reran as they're at times not deterministic
  • The CHANGELOG has been updated with a description of the changes for the upcoming release and the corresponding issue (if necessary)

@andrewtavis andrewtavis self-requested a review June 23, 2026 18:12
@andrewtavis

Copy link
Copy Markdown
Member

praise: Hey @prince-0408 👋 This is really cool that we're getting to this!

note: There are a few thing that are sticking out to me that I think we should rework :)

  • I don't think that the floating keyboard button should be at the top of the keyboard as it's not a Scribe command
  • Maybe we can have a key that's between the ?123 key and the , key?
    • To make the keyboard float, the key could be a move vector (ideally the Android version of this)
    • To dock the keyboard again, the icon would switch to a down arrow vector (again, the Android version)
    • Let me know on this!
  • In floating keyboard mode, maybe we want the command keys to have icons as labels rather than words?

Let me know on the comments above! If you agree, then feel free to make the changes and then we can continue with the review :)

@prince-0408

Copy link
Copy Markdown
Contributor Author

praise: Hey @prince-0408 👋 This is really cool that we're getting to this!

note: There are a few thing that are sticking out to me that I think we should rework :)

  • I don't think that the floating keyboard button should be at the top of the keyboard as it's not a Scribe command

  • Maybe we can have a key that's between the ?123 key and the , key?

    • To make the keyboard float, the key could be a move vector (ideally the Android version of this)
    • To dock the keyboard again, the icon would switch to a down arrow vector (again, the Android version)
    • Let me know on this!
  • In floating keyboard mode, maybe we want the command keys to have icons as labels rather than words?

Let me know on the comments above! If you agree, then feel free to make the changes and then we can continue with the review :)

Hey @andrewtavis 👋 Thanks for the feedback!

These suggestions make a lot of sense:

  • Relocating the toggle: I agree that the float button doesn't belong with Scribe commands, so I'll remove it from the top bar.
  • Dedicated key: I will add a toggle key between the ?123 key and the , key. It will dynamically swap icons: showing a move vector when docked, and switching to a down arrow vector when floating to dock it back.
  • Command icons: Switching the command buttons to use clean icons instead of text labels when in floating mode is a great way to handle the smaller width.

I will get these changes implemented and push them shortly!

@prince-0408

Copy link
Copy Markdown
Contributor Author

Hey @andrewtavis 👋

I've updated the branch with all your suggestions! The float button has been removed from the top command strip and reworked into a dedicated bottom-row key, command labels now swap to icons in floating mode to fit the smaller width, and orientation/resizing drawing glitches have been fixed.

Here's a summary of everything implemented in this update:


Summary of Changes

Feature / Component Previous Behavior New Behavior
Float Toggle Location Float button sat in the top suggestion/command bar, next to Plural. Dedicated bottom-row key relocated between ?123 and ,. Adjacent key widths scale dynamically to keep the row balanced.
Float Key Icon Displayed static text "Float". Dynamic vectors — shows a move icon (ic_float_keyboard) when docked, swaps to a down-arrow (ic_keyboard_dismiss) when floating to allow docking back.
Scribe Command Labels Always displayed text ("Translate", "Conjugate", "Plural"). Text → icon swap — displays text when docked, automatically switches to vector icons in floating mode to fit the narrower 320dp layout.
Docking Resize Glitch Transitioning from floating → docked left a blue background block on the right until the next touch. Immediate redraw — overrode onSizeChanged in KeyboardView to force-recreate the key drawing buffer and redraw the canvas on resize, eliminating the artifact.

Visual Comparison

Docked Mode (move icon & text labels) Floating Mode (down-arrow icon & icon labels)
Docked Mode Floating Mode

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.

Add floating keyboard functionality to Scribe-Android

2 participants