HOW TO MAKE TOGGLE BUTTON IN APP INVENTOR?

This is my first article on app inventor that is why i have to tell you that what is app inventor? Definitely i will share more articles on this topic.

WHAT IS MIT APP INVENTOR?

App Inventor allows you to make android apps without writing any line of code right from your browser.  This is an blocks based programming tool for developing advanced android apps for non-coders.

Fore more details : Click here

Now, i am going forward assuming that you are familiar with app inventor 2 (yes, it is version 2 released by MIT after its classic version). I hope you have completed tutorials from this book.

Let’s get started. Follow this very simple steps to make your own toggle button.

STEP : 1

Open app inventor designer screen

STEP : 2

Drag one Button and One Label from left hand side user interface palette to viewer section. Then drag one HorizontalArrangement from Layout palette to viewer section and place it in between button and label component. And then viewer section will look like this,

STEP : 3

Now, make the changes to the Label1’s properties

⦁ Text -> “Game is Paused”
⦁ FontSize -> 18
⦁ TextAlignment -> Center

Similarly, make the changes to the Button1’s properties

⦁ Text -> “PLAY”
⦁ FontSize -> 18
⦁ Width -> Fill parent

After doing this, screen will look like this,

STEP : 4

Now, it’s time for logical section. We’ve completed designing and we will add logic to our Toggle Button. Go to Blocks Editor and make the arrangement like this,

Congratulations! You have working toggle button. When you press PLAY button, label text will change to “I am playing” and button text will change to “PAUSE“. Similarly, when you press PAUSE button, label text will change to “Game is paused” and button text will change to “PLAY“.

You can customize as you want. Just put all the blocks in two Procedures logically. If you want to download source code(.aia) file of this app, then here is the link or scan this QR CODE

Toggle.aia

If you have any question, feel free to comment. I will answer ASAP. This is my first blog article. So, please share it to your app inventor developers because they may learn something from this and help me to spread.