Join Michael Lehman for an in-depth discussion in this video Understanding the Designer, part of Simple Android Development Tools.
In order to fully understand how to use MIT App Inventor 2 to build an app, we're going to take a look at the designer, the controls, and the block editor. So, first up let's look at the designer. A new project. So, you go to the Project menu here and select Start New Project, and we're going to call our project ExploringDesigner. So now let's take a look at the designer. The designer has four main sections that you can see across the screen here. Palette, viewer, components and properties.
In the palette column, you'll find things that you can put into your app. Things that you can drag into the viewer. Buttons, check boxes, images, and controls that don't have any on screen presence but are still useful. Things like clock and notifier. In the viewer is where you arrange your controls so that you can see what your user interface is going to look like. The viewer only shows you an approximation of what your user interface will look like on either the emulator or a device. Always use the emulator at least, and if possible a device, so that you can see how your layout actually looks when a user's actually going to use the app.
The components column lists all of the components in your app. And if you have things from the layout section, which you can see over here in the palette is the next section down. They'll be hierarchies. So you'll screen, inside screen. You'll have layouts inside layouts, you'll have various controls and we'll see that in a minute, but that's what you see in the components column. And you can select things in order to adjust their properties by either clicking on them in the viewer column or clicking on them in the components column. So let's begin by putting one item from the palette into the viewer. We'll drag a button from here to here, and you can see that it now shows up in the viewer. It shows up in the components section. The properties for it show up in the properties column. And if we look over here in the emulator, you can see that the button shows up as it would look on an early version of an Android device.
If you had an actual Android device connected, it might look slightly different than what you see there. Depending upon the version of the Android operating system that you're running on the device. In order to see different kinds of things that are available in the palette, you can scroll up and select other things beside user interface controls such as layouts, here we can see that there are options for horizontal arrangements of controls, table arrangements and vertical arrangements. Media, in which you can interact with the camera, you can play sounds, you can play videos, you can record sounds, you can do text to speech.
Drawing in animation. If you want to build an actual traditional game you can use balls and canvases and sprites. We won't be covering that in this course, but this is how you would do that. If you recall before, we talked about various kinds of sensors. We have the accelerometer. There's a way of scanning bar codes. You can use the GPS. Nearfield is what interacts with the Nearfield communication sensor we mentioned before, if your device has that. And the orientation sensor is what integrates the compass, gyroscope and accelerometer. There are controls for interacting with contacts, being able to send emails, dial phone numbers and send texts, and you can read and write files as well as manipulate something called tiny db which is a small database functionality that's on your device.
And App Inventor provides a unique mechanisms call tiny web db, which actually allows you to store data in the server in the cloud. Under account activity, you can interact with Bluetooth. You can also interact with webpages, and if you have one of the Lego minds storm kits that are set up for working with wi-fi, you can actually integrate with live robots, using App Inventor to read sensors from the robots and update effectors that are on the robots. Let's go back now to User Interface. Next step, we're going to look at all the properties for the button control, because this will allow us to see properties that are in common with many, many other controls.
And once we've delved deeply into Button, it'll be easy to talk about some of the other controls, because we'll be able to say that they're just like Button, except they have this. Additional feature or they have less features, but they have all the other properties that are exactly like Button.
- Understanding the elements of an Android app, such as controls, sensors, effectors, and storage
- Exploring MIT App Inventor 2
- Getting started with Basic4android
- Building simple apps
- Testing apps on Android emulators and devices
- Sharing apps
- Creating hybrid apps with Appy Pie, Make Me Droid, and AppMakr