Jelly Toggle: Animated Toggle Button

Kumaraswamy · January 28, 2021, 12:21pm

An extension for animated toggle button with 15 different toggle animations.

Documentation

Of all the available blocks

event
Event fired when the state of the toggle is changed

isChecked: Whether toggle is checked

Initialize the toggle jelly in an arrangement

component: Horizontal / Vertical arrangement animation: Animation of the toggle

change

Changes the toggle animation

animation: Animation of the toggle

Changes the left and right background colour of the toggle

getbg

Returns the left and right background-colour

Whether the toggle should be checked

Whether toggle is checked

Whether the toggle can be checked or unchecked by dragging

Whether toggle can be dragged

Toggle jelly animations list:

Itself
LazyTrembleHeadFatty
LazyTrembleHeadSlimJim
LazyTrembleTailFatty
LazyTrembleBodyFatty
LazyTrembleBodySlimJim
LazyStiffFatty
LazyStiffSlimJim
ActiveTrembleHeadFatty
ActiveTrembleHeadSlimJim
ActiveTrembleTailFatty
ActiveTrembleBodyFatty
ActiveTrembleBodySlimJim
ActiveStiffFatty
ActiveStiffSlimJim
RandomJelly

The name refers to the animations. These are the property blocks.

Download

Direct Download: Jelly Toggle
Google drive: Jelly switch - Google drive

All thanks to Jelly Toggle Button library. Say me if anything is wrong!

Similar extension by @Techno_Vedang

Salman_Dev · January 28, 2021, 2:03pm

Wow, you are amazing @Kumaraswamy

ChrisWard · January 28, 2021, 3:32pm

That's very clever ᴋᴜᴍᴀʀᴀsᴡᴀᴍʏ...... I like the names of the options

netminderno.9apps · January 28, 2021, 3:52pm

Love it @Kumaraswamy Definitively going to be using this in the near future

HIFI_APPS · January 28, 2021, 4:33pm

The name Jelly is very nice
U may need another function block which toogle switch

Kumaraswamy · January 28, 2021, 4:35pm

That's okay, can be did with the blocks available.

HIFI_APPS · January 28, 2021, 4:37pm

How where is block

HIFI_APPS · January 28, 2021, 4:39pm

Will this toogle if yes may be I wish u could change checked property to toogle because checked refers to check box on my mind

Kumaraswamy · January 28, 2021, 4:41pm

Toggle means to switch from one state like on to of checked means the value of the button is positive.

HIFI_APPS · January 28, 2021, 4:43pm

What it means
still u din't say how it can be done with blocks

Kumaraswamy · January 28, 2021, 4:46pm

jellyToggle1.setChecked(!isChecked);

Use the logic, currently I cannot open app inventor.

HIFI_APPS · January 28, 2021, 4:48pm

So what result I get u mean it will switch any side to right if set true and left if set false

Kumaraswamy · January 28, 2021, 4:49pm

Sorry, cannot understand you're logic.

HIFI_APPS · January 28, 2021, 4:50pm

Leave my logic what result I get on my mobile if

To true and what result I get when false

Kumaraswamy · January 28, 2021, 5:03pm

Cannot understand what are you saying.

Patryk_F · January 28, 2021, 8:26pm

Sample application if you are having trouble with blocks.

toogle.aia (129.4 KB)

@KUMARASWAMY_B.G Nice extension, but in addition to animation, the ability to set the size of the switch would be useful. Not necessarily width and height separately because it could distort the shape. We could only set the width, the height would be proportional.

netminderno.9apps · January 28, 2021, 8:59pm

Man, I really wish they had this added. I oftentimes use it for things like setting a timer to time you and put this option at the bottom of the screen, it would be great if I could edit the width and height to be smaller than the actual size. But Ty @Kumaraswamy for the animation. Makes my app look even cooler and slick.

TIMAI2 · January 28, 2021, 9:11pm

There has been a Switch component for some time.....

Kumaraswamy · January 29, 2021, 2:55am

Hm yes, the recommended size is 5% Height and 15% Width

Mayank_Kumar · January 29, 2021, 3:32am

Change JellyToggle.checked to JellyToggle.on like it is for normal switch.