Bubble Picker with Smooth Animation

Bubble Picker extension is a circular form of the slider with a smooth animation.
The extension includes customization of Background Gradient Colors, text view in the picker and more :smiley:


Here is the usage of all the blocks.

  • Value changed


    • Event is fired when any bubble picker’s value is changed. Value is the changed value with the id being the picker’s id.

  • Create animation

    • Creates the Bubble Picker animation in the view. Any views in the given arrangement will be removed before adding the picker into it. The colours parameter accepts a list of colours for the gradient. The colour value can be a normal colour block or colour from a hex value.

  • Set properties


    • Sets the gradient angle, max value (starting from 1 to given value) and the max lap count. MaxLapCount should be the number of rounds the the user has to do to hit the max value.

  • Create a label


    • Creates a text view on the centre of the animation. Textview parameter can be a label or simple text block. If you provide it with a Label component, the extension will apply those properties to the text view on the animation. The typeface can be an asset or file path from external storage. Use the empty value for typeface if a custom typeface is not needed.

Demo blocks

Below are the demo blocks to create a simple bubble picker animation.


Check the result video - YouTube.

The extension is built with Rush :)
Check out the extension sources on GitHub.


Another great stuff by you, @Xoma :heart_eyes:

1 Like

Great contribution!
You may want to provide a testing video if it :thinking:

1 Like

Another Great Extension by @Xoma :heart_eyes:

1 Like

@UnknownBeast you are right :+1::+1:


Amazing stuff once again from @Xoma

Another great extension
Keep it up @Xoma
Could you please provide a video of demo

1 Like

I have already put it at the first edit here :)

But, does it support variable fonts?

1 Like

It supports OTF, TTF typeface formats, but not anything like bold or italic.

Nice …:fire:

1 Like

Nice Loved it I will definitely use this

1 Like