1. To add a button you will first need to drag the button component from the palette to the viewer.

button1.png


2. After you have dragged the button into the viewer you should see a button in the viewer and an entry in the component column like below. Notice the nesting (indentation) shows what is part of something else. Screen1 is called the parent of Button1 (it is contained within Screen1)

button2.png


3. Now that you have a button you can change the appearance of the button by changing the settings in the properties column.

***Make sure to select the button component in the component column before changing the properties.

A) For example, you can change the text on the button by entering text in the text box

TextBox.png

4. Once you enter text into the text box it will appear automatically in your viewer.

button3.png


5. While Button1 may be an okay name if you only have one button in your app, more meaningful names are encouraged. App Inventor (and many programming languages) don't like spaces in the middle of a name. Thus, designers often use a combination of upper and lower case letters to distinguish between words such as ClearButton or RedButton. Since your name is the link between the Design and Blocks phases, the more meaningful the name, the easier it will be to program.


To change other features of the button click on the customize buttons link or check out the 'Change Screen' page. Many of the features used to change a screen can also be used to change a button.



You will notice that there are two steps in getting a button to work: what it looks like and what it does.


a.design button.png: where is the button placed on the screen? What color is it? What name will you give it? Does it have text associated with it?


b.Screen Shot 2016-04-28 at 4.53.36 PM.png: what happens when you press it? What happens when you hold it down for a long time?


To learn how to add actions (functionality) to a button when you click it, click the following Link:


Button -- Blocks