Migrate Holo themes to same style as Material

[Helium314]

Currently Holo themes are still using the old theming system instead of the new one with easily adjustable colors. The user-defined Holo theme is just applying color filters on top of this, but with a dark base theme this doesn't work well.

For simplicity and flexibility the Holo themes should use the same style as Material themes, meaning a single (nearly) white layout in resources, which is adjusted by color filters.
This shouldn't be hard, but it's a lot of work as it requires adjusting lots of 9-patch drawables, or replacing them with vector or shape drawables or similar.

[BlackyHawky]

@Helium314 Today, I worked on the Holo theme.
Below is a screenshot of the rendering.

Which version would be better knowing that the version is grayer than version 2?

Screenshots

[Helium314]

I also worked on this a little, and it looks like it's going to be more tricky than expected.
There are two features of the holo theme that cause difficulties work with simply applying color filters or color state lists to the buttons:

• the buttons have a bright line on top, and dark lines on left/right/bottom. While the dark lines work with the normal multiply/modulate color filter modes, the white line on top essentially disappears
• the buttons are transparent, and the background has a gradient (a bit brighter on top than on bottom). Making the background brighter without losing the gradient is easy. But making the buttons appear the same way as before (a bit darker for the bottom row due to the gradient + tranparency), while allowing the full color range, is not so simple. In my tests with the current button drawable, I wasn't able to have e.g. dark keys on bright background.

My attempt for solving this was using a layer drawable, and setting colors separately to all layers. This allows to always have the dark/bright lines look good. I did not work on transparency, but I think a workable approach would be choosing an alpha value dependent on key and background colors.

How is your approach working out? Is it possible to reproduce the original theme with any of those two?

[BlackyHawky]

What we know, and what you've also discovered, is that:

• in order not to change the color of the key outlines, and thus keep a light line at the top and a dark line on the left/right/bottom sides, we need to have several layouts: those for the outline (which will never change color) and one for the background, which the user can modify;

My approach:

• it's the keyboard background that determines whether a key should be dark or light, since it has a gradient color; the key color should therefore be based on the brightness of the keyboard background.
  Perhaps we could adapt the code below but reverse its usefulness (if a color is dark, the result is darker and vice versa)?

Colors.java

https://github.com/Helium314/openboard/blob/556ff23b98076662065c791ffe5d43e254711bf4/app/src/main/java/org/dslul/openboard/inputmethod/latin/common/Colors.java#L123-L135

[Helium314]

I looked at this in more detail, and I think it would be simplest to just keep the normal key drawables, and have some white one (or maybe slightly tranparent) for functional keys (to used for action key as well). And the background grey-to-black can be replaced by a white-to-grey GradientDrawable (or ninepatch, doesn't really matter).

[BlackyHawky]

I've enabled the "Adjust theme colors" option when the User-defined (holo) theme is selected, but can you confirm that the color system is currently fully adjusted?

If yes, my tests show that if we keep the normal key drawables, when we define a color for the key background, this color blends in a little with the color of the keyboard background.

[Helium314]

That's because the holo keys are partially transparent.
And I decided that for the initial switch, the keys don't need to be adjusted. Maybe this can be done later, but the old holo themes are blocking the improvement of appearance setting I really want to do.

So what I will do:

• use the current key drawable for normal and space keys
• find or create a key drawable to use for functional and action keys
• use a gradient drawable for background
• adjust the rest to match the holo white theme when the right colors are set

[BlackyHawky]

I was thinking the same thing.

Are you well advanced on this subject or can I continue testing?

[Helium314]

I'm currently adjusting colors, other things should be ok.
But it's really just "mostly ok", and you can definitely improve it if you're interested. Not sure whether I'll be done today though.

[BlackyHawky]

I had a feeling you'd already worked on that. I'll take a look when you do a commit officially or in a separate branch.
But I'm sure I won't do better than you.
I'm sorely short of time...

[Helium314]

It's now commited.
The appearance settings are in a bad state, but at least ready for working on it.

The holo theme is now in an acceptable state, but has quite a bunch of (mostly minor) issues, often not issues by themselves but only if we aim for an exact match with original theme:

• the new holo_white theme should only be accessible when holo style is chosen (because colors don't work with material style)
• key popups are too dark
  • maybe should use brighter drawable?
  • same for moreKeys and moreSuggestions
• clipboard icon is too grey, probably should be based on white drawable
  • re-use the drawable for lxx/material, or make it whit(er)
• abc and delete keys in emoji should be brighter
• abc key in clipboard view is much too dark
• replacement for holo blue theme is missing completely
• when switching emoji categories, the icons shortly use key text color
• once, all emojis were gone from the emoji view, but I haven't been able to reproduce it
• emojis have the key drawable (not visible with default colors, but when customizing the background color)
• action key moreKeys has the key drawable over the keys
• clipboard pin should be accent color (holo only!)
• regression: gradient drawable not used for background any more

Some of these, like darker popups, are probably fine, some others should be fixed before the next release.
But for now I will not touch this, and work on the appearance settings and then it's fixing few bugs.

[BlackyHawky]

Like I said, I couldn't have done it better 😅

My feedback

• Theme variant (night mode) no longer accessible (but you've probably noticed); just in case, you'll find a crash report at the bottom of my reply.

• Following your comment in the HoloColors.java file, I guess it's no longer necessary to provide a new drawable background?

• In clipboard view, pinned icon never changes color (both material theme and hill theme are affected);

the new holo_white theme should only be accessible when holo style is chosen

That's not currently the case (but you've probably noticed).

key popups are too dark
maybe should use brighter drawable?
same for moreKeys and moreSuggestions

I completely agree.

clipboard icon is too grey, probably should be based on white drawable

I'm taking care of it today.

abc and delete keys in emoji should be brighter

Are you sure? On my phone, the keys are identical to those on the keyboard view.

abc key in clipboard view is much too dark

I agree.

replacement for holo blue theme is missing completely

Are there any plans to add it? I don't think it's necessary.

when switching emoji categories, the icons shortly use key text color
actually they should always use text color, but for some reason it's not applied initially
maybe it's the drawables? We could switch to using the drawables from lxx/material if they are not too different

I'll do some tests and if they're conclusive, we'll be able to delete several files...
At first glance, they look identical except for the size (larger on the Holo theme).

once, all emojis were gone from the emoji view, but I haven't been able to reproduce it

On my phone it's slowdowns I've noticed instead when you scroll through the emojis. I'm replying to you with my phone and that's currently the case.

[Helium314]

Theme variant (night mode) no longer accessible (but you've probably noticed); just in case, you'll find a crash report at the bottom of my reply.

I didn't bother with this, removing the old holo themes was the start for re-doing the appearance settings anyway.

Following your comment in the HoloColors.java file, I guess it's no longer necessary to provide a new drawable background?

The currently created gradient drawable looks a little different than the original, but I think it's ok and barely noticeable unless you compare them directly.
So no adjusted background necessary.

In clipboard view, pinned icon never changes color (both material theme and hill theme are affected);

In material that pin has always been blue I think, so there it's fine.
For holo it probably should be accent color.

That's not currently the case (but you've probably noticed).

Yes, that's why I put it in the list of issues.

Are you sure? On my phone, the keys are identical to those on the keyboard view.

Yes, you're right

Are there any plans to add it? I don't think it's necessary.

Currently not. I'll mention it in the release notes, so anyone missing the theme can complain. If there are more users than expected, I may work on it.

On my phone it's slowdowns I've noticed instead when you scroll through the emojis

This is weird. I find nothing slower than normal on my ancient phone.

[BlackyHawky]

Before making a new PR on key popups that are too dark, I'd like your opinion.

I modified the drawables for popups background and selector by lightening them and here's the result:

SEE RESULTS

Before	Drawables lightened	Drawables 100% white

The most annoying thing about the selector is its color in the suggestion strip: it's white all the time when it should either lighten or darken:

SEE SCREENSHOTS

Before (Holo_white theme)	50% less transparency	No transparency
		Final result of modifications made

Edit before bed: The only workaround I've found is to add 4 drawables dedicated to the suggestion strip when the suggested word is pressed (but I'm not sure you agree with that).
Don't rely too much on the computer screen for screenshots. My personal opinion is that when the drawables are 100% white, the result is perfect.
In this commit fb92e8f, you'll find all the changes made for testing.

FINAL RESULT WITH WORKAROUND

What do you think?

[Helium314]

I definitely agree that the whte drawables are the best here.

The suggestion strip issue should be fixed now in a757b00, it was caused by me not finding the correct place to apply the color filter / state list previously.

[BlackyHawky]

I definitely agree that the whte drawables are the best here.

#132 created where you'll find drawables 100% white.

The suggestion strip issue should be fixed now in a757b00, it was caused by me not finding the correct place to apply the color filter / state list previously.

Yesterday I couldn't find the solution. This is much better!

[Helium314]

Thanks a lot for your help!
I'll fix the remaining issue (holo white selectable when using material theme) when re-doing appearance settings.

[BlackyHawky]

Don't thank me, it was a real pleasure to do it!

There's still the color of the navigation bar to correct, perhaps? It doesn't match the color of the bottom of the keyboard.

And maybe, when the keyboard is in one-handed mode, we could have the background with a gradient color? (Just the band where the arrows are). I also tried to see if it looks nice, but I couldn't ☹️

[Helium314]

Oh, I hadn't noticed this. The wrapper view for one-handed mode is adjusted, navBar will follow soon.

[BlackyHawky]

... The wrapper view for one-handed mode is adjusted...

Unfortunately, it doesn't keep the color in memory when switching between left and right.

Watch video

Onehanded_mode.mp4

...navBar will follow soon.

Thanks in advance for taking care of the navigation bar.

[Helium314]

This is fixed now, also some regression of suggestion strip for material no-border theme.

I added a holo no-border theme (still has some small issues to be fixed before release), and noticed that the key popup drawables are too dark (keyboard_key_feedback_left_background_klp, keyboard_key_feedback_right_background_klp, keyboard_key_feedback_background_klp).

[BlackyHawky]

Sorry for the late reply, but I'm back to my real job.

I added a holo no-border theme

It's really beautiful! I love it so much !

About the key popup drawables which are too dark, I've modified the files and you'll find the drawables 50% whiter, 75% whiter and 100% white in the attached archive below.

Don't hesitate to let me know if you'd like an intermediate value.

Note: after 75%, you can hardly see the difference in hue between the top and bottom of the key popup.

See Screenshots

Before	50% whiter
75% whiter	100% white

Holo_Key_Popups.zip

[Helium314]

Sorry for the late reply, but I'm back to my real job.

It wasn't even half a day, and you're not obliged to do anything here. So thanks for still working on this!

Note: after 75%, you can hardly see the difference in hue between the top and bottom of the key popup.

I agree. From the screenshots I think the 50% whiter are good, I'll test it on my phone with 50% and 75% (and a bunch of different background colors)

It's really beautiful! I love it so much !

Honestly I was surprised how good it looks...

[BlackyHawky]

So thanks for still working on this!

As long as I have the time, and as long as what needs to be done is within my capabilities, I'll be able to continue 😉

From the screenshots I think the 50% whiter are good

My feeling is that the colors stand out better on the 75%. I'll let you decide, as I never activate this option anyway.
If you want the files in 60/65% whiter don't hesitate, it really doesn't take long to do.

On my phone it's slowdowns I've noticed instead when you scroll through the emojis.

...and a bunch of different background colors

Speaking of which, the slowdowns are due to the fact that on my personal build I have a total of 23 themes. And these slowdowns appear when I change theme and/or style 4 or 5 times in a row.
After a while, the slowdowns disappear and return when the theme is changed again.
I can't be more precise about the reason for these slowdowns.
In any case, my themes are written in the same way as the original ones in the KeyboardTheme.java file; only the colors are different, of course.

[Helium314]

If you want the files in 60/65% whiter don't hesitate, it really doesn't take long to do.

Then I would gladly take some 60 or 65% whiter variant (whichever you want, I think the difference will be quite small).

these slowdowns appear when I change theme and/or style 4 or 5 times in a row.

This is strange. I'll have a look whether I can reproduce it, maybe I find the cause of this.

[BlackyHawky]

Then I would gladly take some 60 or 65% whiter variant

You have both:
Holo_Key_Popups_60-65%.zip

Screenshots of Holo Orange Theme

60% whiter	65% whiter	75% whiter

[BlackyHawky]

Honestly, you did a great job. The themes are really great.
By the way, would you allow me to open a discussion to make a poll on predefined themes? I'd like to suggest some colors. I'm sure you've got some color ideas of your own.

Then, on my Android 13 tablet, for Material style, the emoji category background has a bug. See my screenshot:

This bug is not present on my phone with Android 10.

Also, I don't know if you've noticed but the back button no longer works in all the application's settings menus (I tested on Android 10 and 13).

It seems to me that you're going to publish a release so it may avoid the creation of a new issue immediately after if you know where it's coming from.

Finally, I'd like to do a PR to add the last translations before the new release; it's too late for me to do it now but tomorrow is OK. Of course, it doesn't matter if the new release comes out before my PR.

Once again, good work on the themes. Thanks.

[Helium314]

By the way, would you allow me to open a discussion to make a poll on predefined themes? I'd like to suggest some colors. I'm sure you've got some color ideas of your own.

Avtually I don't have any plans for colors, other than an "accent follows system" setting, and a system colored theme (or maybe one for day, one for night) for API 31+. The system themes should probably be default if available.
So go ahead and open a poll, or do a PR and add whichever colors you think would be good.

Then, on my Android 13 tablet, for Material style, the emoji category background has a bug. See my screenshot:

Oh great, it took me quite a while to get rid of this really weird thing, but apparently things work different once again on Android 13.
You can try playing with it: the background color if the tab strip is set here. This does not seem to work on Android 13. Maybe color needs to be set earlier or later?
To at least get rid of the boxes you can add iconView.setBackgroundColor(Color.TRANSPARENT); in addTab. But then apparently the emoji tab strip background would be white, which is bad for dark themes.

Also, I don't know if you've noticed but the back button no longer works in all the application's settings menus

Thanks, I never even tried this until now, because top left corner is the most atrocious position for a back button, even on a small phone like mine. Though on a tablet it might be ok. Should be easy to fix.

Finally, I'd like to do a PR to add the last translations before the new release; it's too late for me to do it now but tomorrow is OK. Of course, it doesn't matter if the new release comes out before my PR.

You're welcome to do so. Btw do you have some additions to the day/night colors? I tried to consider your comments in #107, and with the new settings it should be more clear. I'm open for changes though.

[BlackyHawky]

So go ahead and open a poll, or do a PR and add whichever colors you think would be good.
You can try playing with it: the background color if the tab strip is set here.

I'll try to make the changes tomorrow; I'll have a lot more time.

About the back button, thank you. I was sure it was a quick fix.

Btw do you have some additions to the day/night colors?

Sincerely, nothing more to suggest. Now, it's impossible for users not to know the colors of the variant they're modifying.
The fact that menus can be hidden is great!
Btw, this could even apply to the "Auto-correction confidence", "Keypress vibration duration", "Keypress sound volume" and "History retention time" options. What do you think? All application settings would behave in the same way.

[Helium314]

this could even apply to the [...]

Good idea, done.

[Helium314]

Maybe the emoji strip issue is also related to this.

[BlackyHawky]

I think I've found a solution: you'll find the details in this commit: 5c0f8f7.

To sum up, in this commit 43626b0 you define a new scale for emoji category icons for Material style to make them more homogeneous and because Holo-style icons are bigger.
With new icons (as you can see in my commit) this solves the bug because there's no longer any need to define a new scale.

See screenshot of my correction

The only thing I don't understand is why it's only my tablet that's affected. I don't think it depends on the Android version.

Finally, if you look closely, for the Holo style, the emoji icon for the recent category is smaller than the others. I've also corrected this in my commit.

See screenshot

[BlackyHawky]

While testing, I discovered another bug that only affects the Holo style.

To reproduce it:

• Go to emoji view;
• Turn your phone;
• Go back to emoji view.

You'll see that the keyboard background at the bottom has changed color.

Maybe it's linked to #47.

Watch video

SVID_20230909_020959_1.mp4

[Helium314]

I also scaled down the material icons to match the original size. With 5c0f8f7 the icons are considerably bigger in material theme, which does not align well with the size of other icons in material theme. That's the main issue I've been trying to solve with the scale.
But looks like it's not worth the trouble, I'll revert the switch to the same icon for both themes.

And thanks for the larger holo recents icon, I'll use it.

The only thing I don't understand is why it's only my tablet that's affected. I don't think it depends on the Android version.

It might also be the vendor. Some vendors do considerable changes to Android code, which sometimes results in different behavior (e.g. Xiaomi / MIUI, see also #12 for an extreme example).

While testing, I discovered another bug that only affects the Holo style.

Not again... it took me quite a while to get rid of this for emoji / clipboard switching without rotating. I thing it's because somewhere the background is not set properly, which only shows when reloading the view.

[BlackyHawky]

I'll revert the switch to the same icon for both themes.

As you wish, but you know it's not a mistake to use the same icons for the 2 styles. Even if they're bigger for the Material style than before, in my opinion, it's not visually disturbing.
I even think it's consistent with the size of the emojis (which I still think is definitely too big, as discussed here #8 😅).
And by using the same icons, you avoid adding duplicate files.

And thanks for the larger holo recents icon, I'll use it.

You're welcome 👍

[Helium314]

it's not a mistake to use the same icons for the 2 styles

Yes, but I would really like to keep the size without breaking things for some Android versions.
Could you try using this drawable for themes-lxx-base iconEmojiCategory1Tab:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:width="24dp"
        android:height="24dp"
        android:drawable="@drawable/ic_emoji_smileys_emotion_normal_holo_dark"
        />
</layer-list>

It works for me, but I fear it might have the same weird issue with the background.

which I still think is definitely too big

How bad is it when config_emoji_keyboard_row_height is set to 29%?

[BlackyHawky]

Yes, but I would really like to keep the size without breaking things for some Android versions.

I understand.

Could you try using this drawable for themes-lxx-base iconEmojiCategory1Tab:

If I use your drawable and remove these lines, everything works perfectly on my tablet (and on my phone too).

// Lines removed
if (categoryId != 0 && colors.getThemeStyle().equals(KeyboardTheme.THEME_STYLE_MATERIAL)) {
           iconView.setScaleX(0.75f);
           iconView.setScaleY(0.75f);

Screenshot

How bad is it when config_emoji_keyboard_row_height is set to 29%?

In my personal opinion, the default value (28%p) was the best. My feeling is that emojis are less sticky and the emoji keyboard is airier.

Screenshot

[Helium314]

If I use your drawable and remove these lines, everything works perfectly on my tablet (and on my phone too).

Thanks, next try: 9426a2d, including your recents icon from 5c0f8f7

[BlackyHawky]

Everything is now perfect on my tablet!

See screenshot

[Helium314]

Oh finally!

In my personal opinion, the default value (28%p) was the best. My feeling is that emojis are less sticky and the emoji keyboard is airier.

I'm still considering to go to 29% or 28.5%... but that's rather low priority for me.

[BlackyHawky]

I'm still considering to go to 29% or 28.5%... but that's rather low priority for me.

I know; that's why I ask nothing about this subject 😉

In any case, thank you for all your work on this Holo theme. It really looks great! 👍