The Designer helps you customize the appearance of your application. It consists of five columns - areas:
Palette
From the Palette you can select the components both on- and off-screen and drag them into the Viewer area. The Palette column is organized into groups of components which are called drawers (User Interface, Layout, Media, Drawing and Animation, Maps, Sensors, Social, Storage, Connectivity, Experimental, Extension etc.).
User Interface components are: Buttons, Checkboxes, DatePickers, Images, Labels, ListPickers, ListViews, Notifiers, PasswordTextBoxes, Sliders, Spinners, TimePickes and WebViewers.
Layout consists of formatting elements. By using these components you can determine the appearance of each screen (HorizontalArrangement, HorizontalScrollArrangement, TableArrangement, VerticalArrangement, VerticalScrollArrangement).
Media drawer consists of elements such as:
• Camcorder (a visible component to record a video using the device's camcorder)
• Camera (a non-visible component to take a picture using the device's camera)
• Player (a component that plays audio and controls phone vibration)
Drawing and Animation drawer allows you to create drawings and animations. It consists of elements such as Ball, Canvas and ImageSprite.
• Canvas is a touch-sensitive rectangular sub-panel within your app where drawing can be done and sprites can be moved.
• You can program animation by placing Ball and ImageSprite components within a Canvas. These components can react to taps and drags, interact with other sprites and the edge of the Canvas and move and transform according to their property values.
Sensor components provide access to the device sensors (accelometers, location sensors, orientation sensors, gyroscope, barcode scanners, proximity sensors etc.).
Storage is a non-visible component for writing and reading files to the private data directory associated with your application.
Connectivity drawer consists of ActivityStarter, BluetoothClient, BluetoothServer and Web components.
Viewer
In the Viewer area you can see the content of each screen of your application.
Components
In the Component column you can see in a tree like structure all the components (visible and non-visible) of one screen. You can rename or delete a component.
Media
From the Media column you can organize the media files (audio, images and video files).
Properties
In the Properties column you can determine the appearance and other characteristics of the components.
A quick reference for the Designer
Tutorial on how to use the User Interface components
A list of the basic components of App Inventor
This project has been funded with support from the European Commission. This web site reflects the views only of the author, and the Commission cannot be held responsible for any use which may be made of the information contained therein.
The V4T - Videogames 4 Teachers project © 2018