App Inventor 2
Programming mobile phones with Android 
by App Inventor 2 - Juan Antonio Villalpando

- Initiation Tutorial App Inventor 2 -

Return to tutorial index

____________________________

User interface

6.- We will handle various controls and work with their properties.

ip6_propierties

We can change the Properties of a control in Design time or Runtime.

At design time would change in the right panel and runtime when the program is running.

Let's create a new project called Properties.

We put five Buttons and a Label.

We changed in design time the property of Label1, we put as shown to the right of the image.
We upload this image by Media / Upload file

In the Button1, let your property image and enter the image above so that the button it contains.

We put a Layout / TableArrangement1, 3 columns and 6 rows or records. It is a table of 3 x 6, although the boxes are not visible.

In width and height put it in Fill parent, to fill the entire width and height of the screen.
We introduce the buttons and the Label in each of the ranks of the middle column, are not delimitations but it is easy to imagine.

It should look like this...

,

_________________

Blocks

- When you press Button1 changes at runtime the Properties Label1.
- When you press Button2, removes the Button3 and Button4 is disabled
- When you press the Button5, becomes visible Button3, enabled the Button4 and deletes the text of Label1.

The Button has these events:
(events are actions that can be performed: Click, LongClick, TouchDown, TouchUp, ...)

___________________________________________________

Color change when a button is pressed.

ip6B_color_button

- Lower the images to your computer (Right click / Save image as ...)

- If you have a round button on the Properties button in the Property Form establishes rounded.

- If you have problems with the background color of the button, enters onlineimage and believe him a transparent background

- In Width and Height of the button, set the corresponding pixels.

- In the Design by Upload files , upload them to the application.

- In the design, each button on your property Image sets an image. Put the size of 150 pixel width.

- Delete all Text button.

- In the Blocks. Each button shows a touchdown and touchup.

- In each Touch takes the property

- When you press the button change its image and thus its color.

- From here you can download many buttons for your projects: Botones.zip
- You can edit the buttons to have transparent background and better inserted on the screen.

_________________________________________________

__________________________________