CircularColorPicker - Color picker dialog, saturation and luminosity controls, and color preview

Extensions
, , , ,
1
CircularColorPicker
Color picker dialog, saturation and luminosity controls, and color preview.

ColorPickerDialog
ColorPickerDialog700×700 122 KB

  • Moving your thumb over the colored circle will update the hexadecimal text, you can also enter a code and it will give you the color by pressing enter on the keyboard, if the code is incorrect the text will be deleted and only the hint will remain like this: #RRGGBB

  • You have to add the copy and confirm buttons to assets so that they appear in the dialog, size: 24px x 24px, (the size doesn't matter, it will be set in that proportion, but so that it is not heavy, use 24px).

    • Rename your icons like this:
      • copy.png
      • confirm.png

There is no thumb for now.

ShowColorPickerDialog

component_method (3)
component_method (3)852×60 9.36 KB

ColorChanges

Triggered when the selected color is changing.

component_event (2)
component_event (2)756×172 11.8 KB

ColorPicked

Triggered when the user confirms color selection.

component_event (3)
component_event (3)728×172 11.4 KB

v1.0 May 05, 2025.

CircularColorPicker.aia (21.3 KB)

joejsanz.joedevcircularcolorpicker.aix (16.9 KB)

JDK: 11
Minimum API Level: 21
Updated On: 2025-05-05T07:00:00Z

Built using: FAST-CLI v3.2.1

Thanks.

4 Likes
2

That is nice.

1 Like
3

Could it be bigger? That is, the colour circle to fit the width of the device in portrait (height in landscape).
Or sizeable ?

2 Likes
4

I don't know if it's possible but it might be useful to just be able to display it in a layout. Also, a little more customization such as sizes, fonts... would not be refused!
However, this extension remains very useful!

Thank you for this contribution to the community which helps many users,
Nico

1 Like
5

Like this?

Screenshot_2025-05-05-05-14-10-645_edu.mit.appinventor.aicompanion3
Screenshot_2025-05-05-05-14-10-645_edu.mit.appinventor.aicompanion31080×2400 127 KB

It looks better, but it still needs to adjust properly when rotating the screen horizontally, but I've run out of time on the computer.

1 Like
6

Are you referring to button sizes?
And regarding fonts, are you referring to adding text to the dialog box?

About adding it to a layout, I'd thought about that, but I was unsure whether to do it or not.

  • I will make it usable in an arrangement.
7

I was talking about the size of many of the dialog components. I was also talking about the font used in the hex code text box.
And thanks for thinking about putting it in a layout!

Nico