Toggle Button Explained Thunkable Makeroid AppInventor

What is Toggle Button?
A Toggle Button is same as Switch component when clicked on, switches between from one option/position to another option/position.
If it is in ON position then when clicked then changes to Off and when it is Off Position then changes to ON position And Changes Appearance and Variable Setting When Set On and Off.

Now let's see how to use it.

Step 1
Just drag and drop the Toggle Button in the app screen like the following picture shows.

Step 2
Once you drag and dropped the Toggle Button into app screen you will find the Toggle Button in Components layout and click the Toggle Button option there and you will find its properties in properties layout.Once you do that you will find the options to customise the Toggle Button as your wish.
Like the following picture shows the customisable options.


No lets know what are the customisable options does Toggle Button has and how to use those options and know what are their uses.



  1. This Option is used to change the background colour of the Toggle Button You can also change the colour in Blocks editor also.
  2. If this option is enabled then user will be able to click the Toggle Button and if it is not enabled then user can see the Toggle Button but cannot be able to click the Toggle Button and Toggle Button cannot do the command or run the programme. We can also enable or disable this in the blocks section also.
  3. If this option is enabled then the Toggle Button text should be visible to users in bold style like this example text-Text
  4. If this option is enable then text in the Toggle Button will be slightly crossed like this example text-Text
  5. This option is used to increase the text size by typing the size of the text as your wish just type the number and you will se the size change of the Text.
  6. This option is used to change font types like italic, normal, bold, means text style type.
  7. This option is used to import the files of fonts or symbols means like home button symbol like this type files you will find them in online.
  8. You can change the height of the Toggle Button by this option
  9. You can change the width of the Toggle Button by this option
  10. With this option you can upload a photo to the Toggle Button.
  11. This option is used to change the Toggle Button shape you will be able to find the options here like rectangle, sphere, etc.If an Image is being displayed then the shape will not be visible.
  12. If this is enabled you will be able to show feedback to the Toggle Button.
  13. with this option you will be able to change the text alignment like whether the text should be appear in center of the Toggle Button or right or left of the Toggle Button.
  14. This option is used to change the Text colour in the Toggle Button.You will find a lot of colours here.
  15. This option is used to set the Text that will be displayed on Toggle Button when set to "off"
  16. This option is used to set the Text that will be displayed on Toggle Button when set to "on"
  17. This is the option to set the Toggle Button will be "On" or "Off" by default in the App setting.
  18. If this option is checked or enabled then Toggle Button component will be visible to users or else it will not be visible.

Tip:- That the maximum customisable option also can be customised using the blocks editor also we will explain about it in the next post.
Happy tHunking ๐Ÿ˜Ž๐Ÿ˜Ž

Post a Comment

0 Comments