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

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

Screenshot_2025-06-14-00-27-52-915_edu.mit.appinventor.aicompanion3
Screenshot_2025-06-14-00-27-52-915_edu.mit.appinventor.aicompanion31080×2400 149 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 save 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:
      • save.png
      • 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

Update v1.1 Jun 14, 2025.

  • Rotating the device will close the dialog, only if the orientation is not specified.

  • You should have another icon in your assets folder that will be displayed in the save color button when you open the dialog, named like this: save.png.

LoadFromPreferences

Load saved colors.

blocks (17)
blocks (17)1402×164 27 KB

The colors stored with the name and key that you set when calling SetSharedPreferenceStorage are recovered. If you did not call that function and saved colors, they will be saved with the name and key that it has by default.

GetSavedColor

Returns the color stored at the given index.

blocks (16)
blocks (16)834×104 11.3 KB

GetSavedColors

Returns the list of saved colors.

component_method (6)
component_method (6)774×52 8.44 KB

SetSharedPreferenceStorage

Change the name and key used in SharedPreferences to save colors.

blocks (18)
blocks (18)1332×164 23.2 KB

A default name and key are already provided, but you can change them and save the colors that can persist even after closing the application.

GetSharedPreferenceName

Returns the current name used for SharedPreferences.

component_method (7)
component_method (7)922×52 9.28 KB

GetSharedPreferenceKey

Returns the current key used to save colors in SharedPreferences.

component_method (8)
component_method (8)894×52 9.13 KB

ClearSavedColors

Clears all saved colors from the list.

component_method (9)
component_method (9)782×60 8.58 KB

They will be deleted only in the current SharedPreferences, not in all, in case you have created more storages.

RemoveColor

Removes a color stored at the given index.

blocks (14)
blocks (14)796×112 11.1 KB

ReplaceColor

Replaces the color at the given index with a new color.

blocks (15)
blocks (15)810×164 14 KB

ColorSaved

Fired when a color is saved to the list.

component_event (4)
component_event (4)722×172 12.5 KB

SavedColorsCleared

Fires when the list of saved colors has been cleared.

component_event (5)
component_event (5)840×120 11 KB

v1.1 June 14, 2025.

CircularColorPicker.aia (37.5 KB)

joejsanz.joedevcircularcolorpicker.aix (26.2 KB)

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

Built using: FAST-CLI v3.6.1

Thanks.

5 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.

2 Likes
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

8

Finally I found an extension for color picking which actually works how I want it to :slight_smile:

9

Update v1.1 Jun 14, 2025.

2 Likes