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

[prince-0408]

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

[github-actions]

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]

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]

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?
  • I think that there's too little space for full words
  • We could use the icons we use for the desktop app
  • How does this sound?

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]

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?

  • I think that there's too little space for full words
  • We could use the icons we use for the desktop app
  • How does this sound?

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]

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)

[andrewtavis]

praise: Thanks for the quick reaction to the review, @prince-0408! All's looking great :)

note: One thing that would be nice to have here is the keys should be a bit wider. Specifically the comma key and the flat key seem to be too narrow. Can we reduce the size of the space bar and make sure that those keys are appropriately sized?

note: I'm discussing this with @angrezichatterbox and @henrikth93 right now, and we wanted to note that floating keyboards are normally controlled in the settings of the keyboard. We only have one keyboard setting that would need to be triggered in the keyboard UI now - this new floating keyboard - but if we were to get more, then we could switch that key to a settings key.

[andrewtavis]

note, @prince-0408: We've made #642 to add options to hide the keys for the floating keyboard and clipboard to make sure that they UI doesn't get to cluttered with keys that may not be being used. We'll get to that one once this is finalized. Please let us know if you need support with the last parts here!

[prince-0408]

note, @prince-0408: We've made #642 to add options to hide the keys for the floating keyboard and clipboard to make sure that they UI doesn't get to cluttered with keys that may not be being used. We'll get to that one once this is finalized. Please let us know if you need support with the last parts here!

@andrewtavis
Noted on #642! Makes sense to handle the toggle options after this is merged.

I'm currently working on the final parts and will push an update soon. I'll definitely reach out if I need any support wrapping this up. Thanks!

[andrewtavis]

Let us know when this is ready for a final review, @prince-0408! :)

[prince-0408]

Hey @andrewtavis 👋

Thanks for the feedback! I've just updated the branch to address the key sizing issue you pointed out, and I've also pulled in the latest changes from main to resolve all the merge conflicts with the new clipboard features.

Everything is looking good on my end. Here's a summary of the latest updates:

---

Summary of Changes

Feature / Component	Previous Behavior	New Behavior
Key Widths (Bottom Row)	The comma (,), underscore (_), and floating keyboard toggle keys were a bit too narrow (around 7.5% - 8% width).	Wider keys — Increased the width of these keys to 10% each to make them more appropriately sized and easier to hit.
Space Bar Resizing	The space bar took up 47.5% of the width on alphabetic layouts.	Reduced width — Scaled the space bar down to 43% to seamlessly accommodate the wider comma and float toggle keys without breaking the row layout.
Upstream Sync & Conflicts	Branch was conflicting with recent main updates (specifically the new clipboard UI).	Resolved all conflicts — Cleanly merged the upstream clipboard changes into the floating keyboard constraint layout structure. Fixed all failing ktlint checks.

---

Updated Layout

Screenshot 1	Screenshot 2

---

Noted on the settings toggle in #642 as well! That sounds like a great plan for organizing the floating/clipboard features going forward.

Please let me know if there's anything else needed before we finalize this!

[andrewtavis]

Hey @prince-0408 👋 Two comments on here, with the first being a nitpick and the second being something we need to look into here :)

• Firstly, I think we need to get the float icon fixed for light mode (see below)

• Secondly, aside from the Scribe app itself the keyboard isn't able to float in other apps
  • It seems to be blocked in Google apps
  • In messages we can see the icon as in the image above, but when I click it the message input goes away
  • Could we do some research here?

[prince-0408]

Hey @prince-0408 👋 Two comments on here, with the first being a nitpick and the second being something we need to look into here :)

• Firstly, I think we need to get the float icon fixed for light mode (see below)

• Secondly, aside from the Scribe app itself the keyboard isn't able to float in other apps
  • It seems to be blocked in Google apps
  • In messages we can see the icon as in the image above, but when I click it the message input goes away
  • Could we do some research here?

On it @andrewtavis, will update soon

[prince-0408]

Hey @andrewtavis 👋

Great catches on both issues! I've just pushed a few updates to address them.

Here is a summary of the fixes:

Issue / Feature	Previous Behavior	New Behavior / Fix
Light Mode Icon	The float toggle key wasn't getting the dynamic text color tint applied to it, making it invisible in light mode.	Updated KeyboardView logic so the float toggle key properly takes on the black tint in light mode and white tint in dark mode.
Floating in Google Apps	Floating keyboard returned 0 for visibleTopInsets and contentTopInsets, causing Google Messages to assume the screen was covered and hide its input field.	Updated insets to report inputView.height (bottom of the screen). Apps now correctly treat the floating keyboard as taking up 0 space and won't hide inputs.
Search Bar Support	Float toggle button was intentionally hidden when typing in search bars to save space.	Removed this restriction. The float toggle and clipboard keys can now be consistently accessed across all input fields.
Merge Conflicts	colors.xml had lingering merge conflicts from recent updates.	Cleanly resolved the colors.xml merge conflicts.
i18n Submodule Sync	Missing string warnings were showing up in the CI checks.	Pulled the latest from Scribe-i18n and ran the Gradle task to regenerate string.xml, bringing in your new clipboard and float setting strings.

Previews

The keyboard now floats perfectly in Google Messages without hiding the input field, and the float toggle key is visible in light mode.

Everything should be working smoothly now. Let me know if you spot anything else!

[andrewtavis]

Thanks for the further commits, @prince-0408! We'll try to get to a final review in the coming days :)

CC @angrezichatterbox 👋

[prince-0408]

Floating Keyboard & Layout Enhancements

A set of premium features and layout corrections has been added to Scribe-Android's floating keyboard and key alignment logic to improve visual feedback, resizing capabilities, layout integrity, and ease of use.

1. Independent Width & Height Resizing (Free-form Adjustments)

The floating keyboard can now be resized horizontally and vertically independently.

• Direction-Aware Scaling: The touch handler detects which corner resize handle was grabbed (e.g., top-left, bottom-right).
• Relative Coordinate Adjustments: Dragging a handle horizontally resizes only the width (scaleX), dragging vertically resizes only the height (scaleY), and dragging diagonally resizes both dimensions freely.
• Persistent Preferences: Horizontal and vertical scales are saved and loaded independently (floating_scale_x, floating_scale_y), with automatic fallback to previous unified scale configurations to preserve user preferences.

2. Drag-to-Dock Snapping Gesture

You can quickly return the floating keyboard to its standard docked position through drag interaction.

• Snap Preview: Dragging the keyboard within a 60dp threshold of the bottom of the screen highlights the border outline to indicate that it is ready to dock.
• Auto-Docking: Letting go of the drag handle within the docking zone automatically transitions the keyboard back to standard docked mode.

3. Dynamic Opacity Transitions

To prevent blocking underlying text or application UI during setup:

• Interactive Transparency: The keyboard's opacity decreases to 0.7f during active dragging or resizing so that the screen elements behind it are visible.
• Opaque Inactive State: Once the touch interaction ends, the keyboard animates smoothly back to full opacity (1.0f).

Active Drag (0.7f Opacity)	Inactive State (1.0f Opacity)

4. Active Bounding Box Highlight Outline

• An active border outline using the theme primary accent color (theme_scribe_blue) lights up around the keyboard card during active drag and resize gestures.
• The stroke width increases dynamically to provide clear visual feedback during movement, and transitions to a thicker indicator in the snap-to-dock threshold.
• The outline returns to its subtle default state when touch gestures end.

5. Automatic Key Alignment & Row Width Corrections

To prevent keys on the right side of the keyboard (such as the period/dot and enter keys) from clipping or getting cut off on specific layout states (such as symbols, shifted symbols, and numeric screens):

• Row Overflow Correction: The parser automatically sums the widths and gaps of all keys in each row after injecting runtime-dependent keys (like the floating mode toggle).
• Dynamic Spacebar & Key Shrinking: If a row's calculated total width exceeds the display boundaries, the layout automatically shrinks the spacebar (or distributes the compression evenly among standard keys if no spacebar exists) by the exact overflow width.
• End-to-End Key Alignment: It realigns all keys dynamically end-to-end to close any visual gaps and keep the entire layout strictly within the screen boundary, ensuring 100% visibility of all edge keys.

Before (Overflow & Clipping)	After (Realigned & Fixed)

[andrewtavis]

@prince-0408, do you want to rebase/fix the merge conflicts and also add the menu option to also close #642? 😊

[prince-0408]

Hi @andrewtavis, I have merged upstream/main to resolve the conflicts in KeyboardBase.kt (retaining both isFloatingModeActive and isClipboardKeyEnabled in the context provider interface).

Additionally, I've added a toggle for the floating keyboard key under the Layout section of the app settings (defaulting to hidden/disabled), matching the specifications in #642. The floating keyboard button is now only rendered/resized on the keyboard when this setting is enabled.

This PR now closes #642. 😊

---

Summary of Changes

1. Conflict Resolution

• Resolved Conflicts in KeyboardBase.kt: Merged the latest upstream/main changes and integrated both isFloatingModeActive() and isClipboardKeyEnabled() in the KeyboardContextProvider interface.

2. Floating Keyboard Toggle Preference

• Created Preferences in PreferencesHelper.kt:
  • Added floating_key_on_keyboard preference key.
  • Added getIsFloatingKeyEnabled (defaulting to false so that the key is hidden by default) and setFloatingKeyPreference.
• Linked service in GeneralKeyboardIME.kt: Overrode the isFloatingKeyEnabled context provider function to fetch preferences.

3. Conditional Keyboard Rendering

• Updated Layout Parsing in KeyboardBase.kt: Updated TAG_KEY and END_TAG parsing so that the floating toggle key is only appended, and other key widths adjusted, when isFloatingKeyEnabled() is true.

4. Settings UI

• Added Switch in LanguageSettingsScreen.kt: Added the toggle option for the floating key under the Layout settings card, using the i18n.app.settings.keyboard.layout.floating_on_keyboard string resources.

---

Verification & Screenshots

Settings - Enabled	Keyboard - Both Keys Visible

Settings - Disabled	Keyboard - Both Keys Hidden

[andrewtavis]

Thanks, @prince-0408! We'll get to the full review soon :)