IAN LANG ELECTRONICS

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.

android

Android

Turning your Device into a Tape Recorder

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.

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

Screenshot_2014-01-25-16-26-23[1]

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".

icondd

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:

tapercanvas

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:

taperprops

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.