All About Buttons

Screen Shot 2016-06-21 at 10.19.41 PM.png

Buttons are an essential component in creating mobile apps on App Inventor. You can use them to do things like submit information, navigate screens, clear data, and stop or start game play. Here is a quick intro guide to creating and using buttons in App Inventor.

The Button component is found at the top of the User Interface Palette in the Designer.

Click on the Button at the top of the User Interface Palette (#1) on the left side of the screen and drag it to the Viewer (#2). The Button automatically displays “Text for Button1”, which you can easily change in the properties panel text box (near the bottom on the far right of the screen, #3).

Screen Shot 2016-06-21 at 9.56.04 PM

Changing the text that appears on the button is part of the UI design that the app user will see. Depending on what the button will be used for, it could display instructions like: “Submit,” “Next,” “Play,” etc.

Note: Changing the button display text should not be confused with renaming the button. Changing the button name helps you, the designer/coder, to keep your buttons organized. Thus “SubmitButton” is an appropriate name for a button that displays the text “Submit”.

Screen Shot 2016-06-21 at 10.19.20 PM.png

A key coding principle for buttons (and for many components) is naming them appropriately. Whenever you create a new button in the Designer, it will automatically be named Button1, Button2, Button3, etc. When you first start building apps, your interface will be simple and thus it will be easy to keep track of which buttons perform which functions. But as you progress to creating more complex applications, you will quickly discover that it is difficult to remember what Button7 or Button14 does. Thus, it is good practice to rename buttons to clearly describe their function so that when you begin coding in the Blocks Editor, each button purpose is obvious.

The recommended standard is to use a capitalized descriptive name, followed by the capitalized component name – with no spaces between words. Examples include: “SubmitButton”, “NextButton” or “PlayButton”. (AppInventor doesn’t allow spaces so if you type the name “Submit Button” with a space in between the words, App Inventor will automatically insert an underscore and name your button “Submit_Button”.)Screen Shot 2016-06-21 at 9.58.14 PM

To rename a button, activate it by clicking on it in the Viewer or in the Components Panel (it will highlight with a light green box around the name). Then click the “Rename” button at the bottom of the Components Panel (#4). A pop-up window will appear, insert the new name into the text box and click “OK” (#5).

Screen Shot 2016-06-21 at 10.02.52 PM

Note: If for example you rename your first button from Button1 to “PlayButton”, and then drag another button onto the Viewer, App Inventor will name it Button1 even though it is not the first button you created. ThScreen Shot 2016-06-21 at 10.10.21 PM.pngis example illustrates the importance of not relying on the order of creation, but rather on appropriate naming to keep buttons organized.

Any changes you make in the Designer will be reflected in the Blocks Editor (#6). Notice at the bottom of the Blocks Palette, there is another option to Rename (or delete) buttons. Thus, changes can be made there as well.

Screen Shot 2016-06-21 at 10.22.24 PM

If you decide that a button is no longer needed, deleting it is simple. Click on the button in the Viewer or Components Panel in the Designer or in the Blocks Panel in the Editor and then click “Delete”. A pop-up window will confirm deletion (#7). Click “OK”.

Screen Shot 2016-06-21 at 10.10.30 PM.png

Screen Shot 2016-06-21 at 10.16.48 PM.png

The Properties Panel in the Designer provides many options to change the format of your buttons. Click on the button in the Viewer or the Components Panel to see a list of options. The changes you make to the properties are reflected in the Viewer (#8 & #9).

Screen Shot 2016-06-21 at 10.15.21 PM.png

And of course, to get the full effect of how your app will look, it is always recommended to view your changes live on your mobile device or with the on-screen emulator.

For information on coding buttons, stay tuned for All About Buttons, Part 2.



One Response

  1. It is a good idea to show people how to make a button, But please tell us how to make the button do a function. Like a clear button, a score button… etc…

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: