Skip to content
Snippets Groups Projects

Remote keyboard UI update

Summary

The intent of this patch is to update the UI/UX of the remote keyboard plugin. It is related to the T10232 Phabricator task. I have considered using the key appearance, however I went for a more flat and simple look. The following UI related changes have been made:

  1. Removed KeyboardView usage (which was deprecated in API 29 and is targeted mainly at "real" keyboards), we can return any View that we like. The UI is split into two parts, leveraging the provided APIs distinction between the input view and the candidates view. The main part is the input view that contains three actions, similar to the old keyboard.
  2. The candidates view is used instead of Toast for displaying connection details upon clicking the state action (the phonelink icon). It has a simple fade-in animation for this view.
  3. The keyboard actions have a grayish ripple effect on Lollipop or higher and a simple grayish background change on pre Lollipop.
  4. The preferences screen does not constrain the text to single line anymore.
  5. Theming based on user preference for the app on API 17+, 14-16 uses system preference. If a change happens (either user switches app theme or the system does it), the keyboard views are automatically recreated.

Notes and considerations

There are some other changes and comments worth mentioning:

  1. I have added four colors (two for night qualifier and two for without any). However, I feel these colors should already been defined and used, especially as we inherit a material theme. Themes, styles, colors and text appearances are not utilized enough and it is something I would like to work on in the future to achieve a more uniform look across the app (and correctly style snackbars, I have seen the TODO).
  2. There are two additional strings and the two that were already there have been reworded to be more user friendly. How are localization changes handled?
  3. It's quite taller than the older keyboard; I can reduce padding if this is an issue.

TODO

  1. Research icon colors on pre 21 devices, I have seen issues with dark theme

Test Plan

The remote keyboard functionality should stay exactly the same, as I have only touched the UI parts of the plugin. Please report any theming issues/inconsistencies (especially older API versions), UI suggestions and feedback.

Video:

arogan_remotekeyboardui1

Edited by Adrijan Rogan

Merge request reports

Members who can merge are allowed to add commits.
Approval is optional
Merge blocked: 3 checks failed
Unresolved discussions must be resolved.
Merge conflicts must be resolved.
Merge request must be rebased, because a fast-forward merge is not possible.

Merge details

  • The source branch is 1283 commits behind the target branch.
  • 14 commits will be added to master.
  • Source branch will be deleted.

Activity

Filter activity
  • Approvals
  • Assignees & reviewers
  • Comments (from bots)
  • Comments (from users)
  • Commits & branches
  • Edits
  • Labels
  • Lock status
  • Mentions
  • Merge request status
  • Tracking
    • Resolved by Adrijan Rogan

      The keyboard actions have an orange ripple effect on Lollipop or higher. I wanted to use the orange color in a way that did not overwhelm the UI (e.g. tinting icons) and I think this is a good middle ground.

      USING THE ACCENT COLOR IS LIKE WRITING IN ALL CAPS AND ADDING EXCLAMATION MARKS!!!111111

      In Material Design, the accent color is for drawing the user's attention to one item specifically, compared to the other items on a page. This would include calls to action like:

      • "Buy now"
      • "Login"
      • "Register"
      • Floating Action Buttons

      Importantly, you would usually accent one item maximum per screen. Also, most screens are not important enough to warrant any accenting, and I think this includes this keyboard view. Overusing accenting like this will only overload the user

    • Resolved by Adrijan Rogan

      I have added a simple specialization of LinearLayout that lays out children in a single row with equally distributed space.

      That is unnecessary. You should be able to achieve the spacing effect with <Space> and android:layout_weight="1". If that doesn't work, you can also use the slightly more complex <GridLayout>

      There is one thing I want to mention here however; is there any reason that the project does not use ConstraintLayout? It allows much more flexibility in layouts and results in mostly flat layouts.

      Using ConstraintLayout everywhere, especially when a simpler layout would have sufficed, will just cause unnecessary lag. Additionally, the added flexibility can also be considered as added complexity

  • It's quite higher than the older keyboard; I can reduce padding if this is an issue.

    I think this should be fine, since users have used the default keyboard, which is twice as high as this view without text, and just about as high as the view with text

    • Resolved by Adrijan Rogan

      sadly, it is not easy to follow the theme set in the app. This is because there is no AppCompatDelegate for handling the night qualifier for the custom input method service context

      That should be possible with something like SomeBinding.inflate(LayoutInflater.from(ContextThemeWrapper(service, R.style.AppTheme)))

  • Adrijan Rogan added 4 commits

    added 4 commits

    • 4ba62dc5 - Remove custom LinearLayout subclass and use Space instead
    • 642e8ae0 - Improve ripple and fix settings icon color for remote keyboard
    • bdfe136c - Use paddingLeft and paddingRight
    • 53b2143f - Remove translatable=true for remote keyboard strings

    Compare with previous version

  • Adrijan Rogan added 2 commits

    added 2 commits

    • 8cdb7fed - Check the user's theme for the keyboard theme
    • 8c2dc433 - Support on-the-fly keyboard theme switching without the need for app restart

    Compare with previous version

  • Adrijan Rogan changed the description

    changed the description

  • Adrijan Rogan resolved all threads

    resolved all threads

  • Adrijan Rogan added 4 commits

    added 4 commits

    • 8cb6d22e - Remove translatable=true for remote keyboard strings
    • c769cd07 - Check the user's theme for the keyboard theme
    • 41f23d0e - Support on-the-fly keyboard theme switching without the need for app restart
    • 35b931ed - Use paddingLeft and paddingRight

    Compare with previous version

  • Adrijan Rogan added 1 commit

    added 1 commit

    • ecad3f73 - Use a common settings icon for remote keyboard and main app UI

    Compare with previous version

  • Adrijan Rogan resolved all threads

    resolved all threads

  • Adrijan Rogan added 38 commits

    added 38 commits

    • ecad3f73...b2cd3472 - 28 commits from branch network:master
    • 3ac1fa89 - Custom keyboard view (WIP)
    • b97762a2 - Update theming and cleanup remote keyboard service
    • 7c01c9d1 - Remove obsolete update theme call
    • 02da38c4 - Update icon sizing and colors in keyboard view. Update title text upon state change.
    • 0b693bee - Expand/collapse animation (WIP)
    • 0e25517a - Custom view (WIP)
    • 26d05e18 - Custom view (WIP)
    • 6a83eb3d - Custom view (WIP)
    • 90b9453f - Finish view stuff
    • 72c45891 - Revert gradle changes, old icon and comment changes

    Compare with previous version

  • Whoops, rebased and force pushed something wrong ... Will fix soon

  • Loading
  • Loading
  • Loading
  • Loading
  • Loading
  • Loading
  • Loading
  • Loading
  • Loading
  • Loading
  • Please register or sign in to reply
    Loading