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:
- Removed
KeyboardView
usage (which was deprecated in API 29 and is targeted mainly at "real" keyboards), we can return anyView
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. - 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. - The keyboard actions have a grayish ripple effect on Lollipop or higher and a simple grayish background change on pre Lollipop.
- The preferences screen does not constrain the text to single line anymore.
- 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:
- 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). - 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?
- It's quite taller than the older keyboard; I can reduce padding if this is an issue.
TODO
- 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:
Merge request reports
Activity
- Resolved by Adrijan Rogan
Video
What happens when you tap on the gear?
- Resolved by Adrijan Rogan
However, I did remove the close keyboard action, as that functionality is provided by the Android system.
👍 The same can also be said for choose input method action,
Why do I still see it in the video?
so I would like some feedback regarding this (bring the previous action back, remove the choose action or something else).
I don't think removing the buttons would comply with Android guidelines. We will at least have to declare in some XML file that that button is missing and tell the system that it has to provide its own picker. This is because "Prior to Android 5.0 (API level 21), switchToNextInputMethod() is not aware of the supportsSwitchingToNextInputMethod attribute. If the user switches into an IME without a switching key, they may get stuck in that IME, unable to switch out of it easily."
- 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>
andandroid: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
- 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 thenight
qualifier for the custom input method service contextThat should be possible with something like
SomeBinding.inflate(LayoutInflater.from(ContextThemeWrapper(service, R.style.AppTheme)))
- Resolved by Adrijan Rogan
- Resolved by Adrijan Rogan
- Resolved by Adrijan Rogan
- Resolved by Adrijan Rogan
- Resolved by Adrijan Rogan
added 1 commit
- ecad3f73 - Use a common settings icon for remote keyboard and main app UI
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
Toggle commit list-
ecad3f73...b2cd3472 - 28 commits from branch