IAN LANG ELECTRONICS
Which title neatly encapsulates what we are going to do here, namely to buiild an audio recorder that has play, stop, pause and of course record features and which allows you to save your recordings under a name you give them and pick them back from a list to play later. As a side bonus any recordings you make can later be downloaded to your computer, but we'll leave that to last.
You can download the finished feasibility study from the Play Store straight to your device if you like, and there's a plethora of files on Dropbox for the images used in this project including the .apk file which you can either side load or e-mail drop to your device and the .aia file which you can import into App Inventor 2. Details on the left in the sidebar.
The files on Dropbox are here:
The App on Play Store:
The easiest way to install an app that is not from the Play Store is to e-mail it to the gmail address to which the device is linked. You will need to go into your security settings and enable unknown sources.
On the left is a screenshot of what the app we are going to make here looked like when I did it. This is as it appears on a 7" tablet and the screenshot has come directly from my Hudl. It looks just the same on a 7" Nexus and it works on a Samsung phone too. So, in this app, we are going to use the following: Screens, canvas, image sprites, labels, textbox, button, horizontal arrangement, listpicker, player, TinyDB and notifier.
That's a good chunk of stuff and is a good basis for a tutorial as it touches all the basics and makes something useful at the end. So, let's start.
Open a new project and call it what you like, mine was called Recorder as it's an easy mnemonic. You'll see Screen 1 come up, Screen 1 will be the title and it will be white. Step 1 is about changing that. Change the following for Screen1 in the properties window on the right of AI2 if they are not already showing thus:
Set the Align Horizontal to Centre. Set the background colour to black. Background Image should already be none, so leave it at that, and the close screen animation you can set to what you like, but I set it to fade. Next comes the icon, which is the icon that will be displayed on your device and upon which you tap to start the app. If you've downloaded my images for this, it's taperecord.png
and if you've made your own then whichever you choose. If you click on the Icon drop-down list (shown on the right) then it gives you the option to upload a file. Click on that button at that bottom and a dialogue box pops up that lets you navigate to a folder and file. You can use JPEG and PNG and I prefer the latter because with PNG you can have a transparency if your graphics handling software will let you export it that way. Photoshop does, and so does Photo Studio. Real World Paint does not, or if it does, I've never found out how. I don't get on with GIMP and so I can't say whether it does or not, but it ought to.
Where was I? Oh yes, setting an icon. If you've already got an image file in there, simply highlight it then click OK. That's it. Next down the list is the open screen animation. I set this to SlideHorizontal.
After that, there's the screen orientation. You can have unspecified, portrait, landscape, sensor and user. For now set it to portrait. If you have unspecified, the orientation of the app will change with the orientation of the device.
Underneath that is Scrollable, and if you leave that ticked it will allow the screen to scroll up and down on the device on to which you load your app, then title, which is what the bit at the top of the screen says, in this case "Tape Recorder by Ian Lang Electronics".
You then have a version code and name, and leave these alone for the moment because these are what you change as you upgrade the app to a new model or a model to do different things (languages, variants, reduced/increased functionality etc.)
So let's populate that screen now. First off the bat, let's put a canvas on the screen. It goes here:
You see it outlined in green there, and you'll find the user canvas on the palette under Drawing and animation. Drag out and drop and it will click automatically to top centre. We want it to fill the width of the screen with the canvas and set it to a height of 100 pixels. So, in the properties window on the extreme right, click on the box under width. You'll see something like the below come up:
Click the radio button that says Fill parent and the canvas will stretch the width of the screen. We're going to do something similar with the height but not quite the same. Have a look at the picture below:
I'm sure you've guessed it- click the pixels radio button and type in however high you want it to be.
The reason we are going to put a canvas on here is so we can put static image sprites on it. There are going to be five of them and they will be the play, pause, stop and record buttons and the indicator, which is that little red dot. The indicator is going to be the bridge between human and machine indication as not only does it indicate to the operator visually what the recorder is doing currently but also the position that the indicator is in tells the machine what's happening too and precludes certain things from happening when other things are. It is therefore vital that you get the indicator positions right.
I'm going to bang on about two-dimensional coordinates now, aka Cartesian. Sorry. But you'll see why.
So, imagine that big black expanse to the left there is your device's screen, devoid of any buttons, sprites, widgets or anything else- just one big empty screen. It wouldn't be a dreadfully useful app but it does serve our purposes quite well. Your screen is in portrait at the moment because the indicators for wi-fi, signal strength and battery are all in the top right hand corner and the long bit of the screen is pointing downwards whilst the short bit is pointing left to right. Were it in portrait mode the short bit would be downwards and the long bit going left to right.
Two dimensional co-ordinates have two axes, (if you don't know that's pronounced ax ees) here represented by the red lines. The Y axis goes up and down. The X goes across.
When you put sprites on a canvas, the sprites can move about these axes. The indicator sprite is going to move along the X axis according to whatever the device happens to be doing at the time.
So the next step is to drag and drop four sprites on to the canvas we've just stuck on the screen. If you drop them anywhere else, they will not appear. Take four of them and rename them them Stopbutton, Playbutton, Recordbutton and Pausebutton. Size the height and width of all four to be 30 pixels. Now take the fifth image sprite, and rename it indicator. Size the height and width of this one to be 15 pixels.
To the right is the properties window for Stopbutton. We've already done some of it in the above, but let's go down it and look at the rest. As you know, Stopbutton is an image sprite and all the sprites have the same properties, so once we've looked at one we've looked at them all. The first thing in the properties window is Enabled. Make sure it's ticked or the sprite will do precisely nothing. Next along is heading. You can in fact make sprites move automatically in a compass direction from 0 to 359 degrees across the canvas. That's very useful for animation. Here we aren't going to use it in that way so just leave that at the default setting of zero. The interval controls how often the sprite moves; it's measured in milliseconds and so if the sprite were to be an animation it would move every 1/10th of a second (or 10 frames per second if you think in cinematographic terms). The next down is one we need to change and it's Picture. If you use the ones I did then Buttonstop's picture is tapestop.png, Playbutton's is tapeplay.png and so on. If you make your own give them good mnemonic names and save them either as a JPEG or PNG file.
Rotates means the sprite changes orientation as the device does. We can ignore that here since we are not going to change the orientation of the app. Speed is the speed at which the sprite moves across the canvas in whatever heading it is going, again we can ignore that here.
Visible is just what it sounds like: whether you can see it or not. If you can't, it does nothing. It works the same way as enabled/disabled except that enabled = false still leaves an object visible but not working.
At the very bottom we have width and height which we have already looked at and before that the X Y and Z co-ordinates. Up above we looked at the X and Y as two dimensional coordinates and the Z axis is a third dimension. Just as the X and Y measure how far across and how far up the canvas the sprite is, the Z measures how far out of the canvas the sprite is.
Eh? This concept is difficult if you havent met it before. So now I'm going to bang on about the Mona Lisa for a paragraph or two to illustrate it. Why the Mona Lisa? You'll see. Over the page we go.