fix(Whiteboard): broken color picker in RTL layout

[thedroiddiv]

Purpose / Description

Replace the existing color picker library (inactive since last 4 years) with another, fairly up-to-date library.

Fixes

• Fixes: [Whiteboard] Color picker is broken in RTL languages #19237

Approach

1. Create a utility function to create a color picker dialog with appropriate defaults
2. Replace the usage of com.mrudultora.colorpicker.ColorPickerPopUp with the equivalent new colorPicker

fixed_rtl_picker.mp4

Before

before.mp4

After

after.mp4

How Has This Been Tested?

Manually tested on Poco X3 NFC

Checklist

• You have a descriptive commit message with a short title (first line, max 50 chars).
• You have commented your code, particularly in hard-to-understand areas
• You have performed a self-review of your own code
• UI changes: include screenshots of all affected screens (in particular showing any new or changed strings)
• UI Changes: You have tested your change using the Google Accessibility Scanner

[github-actions]

Important

Maintainers: This PR contains Strings changes

1. Sync Translations before merging this PR and wait for the action to complete
2. Review and merge the auto-generated PR in order to sync all user-submitted translations
3. Sync Translations again and merge the PR so the huge automated string changes caused by merging this PR are by themselves and easy to review

[thedroiddiv]

Learning: NEVER change your phone's language to something you don't understand ☠️☠️

[lukstbit]

There's an issue with the behavior which I think is important:

If I start the color selection dialog and don't change at all the brightness then I get black as the color no matter what I select.
If the brightness slider is modified even a bit(even if changing it and then coming back to the initial position) then I get the color I selected.

Users will complain about this.

[ZornHadNoChoice]

The drawing screen is also updated right? (Note editor -> clip icon -> Drawing)

[thedroiddiv]

If I start the color selection dialog and don't change at all the brightness then I get black as the color no matter what I select.

@lukstbit I don't get what you mean? I tried doing so, I didn't get black as color. I opened color-selection dialog and only changed color (no change to alpha/brightness).

Screen_recording_20251103_215049.mp4

[lukstbit]

@lukstbit I don't get what you mean? I tried doing so, I didn't get black as color. I opened color-selection dialog and only changed color (no change to alpha/brightness).
Screen_recording_20251103_215049.mp4

I can see the behavior I mentioned on both reviewers. It would be helpful if someone else can confirm/infirm what I'm seeing:

Screen_recording_20251104_081652.webm

Screen_recording_20251104_081917.webm

[thedroiddiv]

Wow, weird! Will inspect it further, trying with different device. Difference I see here is light theme, will try once with light theme too.

[BrayanDSO]

Reproduced with a light theme, but not with a dark one.

[thedroiddiv]

This issue only happens when initially selected color is "Black".
When the initially selected color is black, color picker's anchor is at center (White point) and brightness is at max.

[thedroiddiv]

Stuck at resolving the invalid color value, looks like a bug upstream related to conversion between ARGB and HSV pallets.

[david-allison]

Only nitpicks, feel free to dismiss all. From a code perspective, this looks great.

I have neither checked the dependency, nor have I run the screen to see it in action

[david-allison]

This is excellent, thank you so much! Treat all my patches as TOTALLY optional.

The documentation of the library source is requested, only to make maintenance a little easier

---

⚠️ I consider this UX issue to be blocking. I've proposed a solution, but treat this ONLY as a suggestion.

• Install AnkiDroid
• Open the color picker in 'Reviewer'
• You see this:

Intuitively, a user is going to want to make red. They select 'red' and they see this:

Then they press 'OK', and they select get black, because they didn't move the bottom ('brightness') slider to 'red'.

---

The simple solution to this would be to show a 'current' selection [GIMP below, for reference].

[thedroiddiv]

Picked bubble shows color with alpha

[david-allison]

Almost!!

The first color picker in your example could be confused for being a selection marker, as the selected color and outer color are the same.

Could you try a minimal circular border (1px white) between the current color, and the outer color of the selection marker?

[thedroiddiv]

Hmm...
Lemme try!

[thedroiddiv]

@david-allison Looks good?

I had to import the svg into figma and put a white circle, adjust and play around the dimensions to be concentric with color-tile.

Do you think there's a easier way to do that in XML?

In compose I see a very clear way just to add a modifier if I want to draw something, I can go crazy and draw anything with canvas behind any ui-node.

[david-allison]

Android Vector XML isn't my strong suit.

I'd presume you can just place a circle of radius n+1 underneath it

[thedroiddiv]

Yeah, that's what I did, in actual svg though.

[david-allison]

Checked it out. Design-wise: yes.

Latency-wise: there's noticeable lag between the position updates of the under-cursor icon and position marker.

The latency is noticeable when moving fast. Reminds me of the tests done by MS: https://www.youtube.com/watch?v=vOvQCPLkPt4

I also managed to end up with this situation when I released my mouse button

[thedroiddiv]

Latency-wise: there's noticeable lag between the position updates of the under-cursor icon and position marker.

Is it noticeable enough to bother a user? I tried on my device, physical and emulator.
I did see some lag between my mouse movement and cursor but it din't bother me. I'd see this as a problem if I were drawing something.

I also managed to end up with this situation when I released my mouse button

The bubble tries to stay within the bounds of color wheel, while showing the color under the pointer. In general scenario too, bubble's tails stays at circumference of the circle, but the color is one at the center of pointer.

Screencast.From.2025-11-27.14-34-09.mp4

[BrayanDSO]

1. There's a noticeable glitch when opening the dialog

Screen_recording_20251127_063307.mp4

2. The flipping behavior when dragging the picker to the top is unnecessary and annoying IMO

Screen_recording_20251127_063413.mp4

[david-allison]

Is it noticeable enough to bother a user? I tried on my device, physical and emulator.

Brayan's video (mildly) bothers me due to the latency

EDIT: if this is an involved fix, we need to make the judgment call: "is this better than the past functionality, and can we add appropriate TODOs"

[BrayanDSO]

latency is similar to before

Screen_Recording_20251127_103602_AnkiDroid.mp4

[david-allison]

Latency of the new color selection cursor updates- it's not aligned with the 'touch' cursor. Screenshot from a video I made:

It's expected that they're not perfectly in sync with the user's touch, but they should be aligned with each other