Information and Contacts

Latest News

This section of the V4T Project portal provides administrative information for the project contractual partners and for the European Commission and it is password protected.



Table of Contents
3.2 Building apps with App Inventor
3.2.2 The design environment

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.

 


Online Resource

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