Today we're going to use google's free android app developer tool to create a simple demonstration app that can be run on your smartphone. By completing this tutorial, you will gain a basic knowledge of some of the user interface systems and elements that go into creating a good android application, as well as an understanding of how these programming components are combined to make a finished android app.
How to Create Your Own Android Demo App for Free - "Hello Purr"
This article is a follow-up to the app creator's introduction, which you can read here. The introduction will explain how to set up the app inventor and get it running on your system. Assuming you already have a basic understanding of what the google app creation tool is and what it can do, let's hop right into building our first free android application. Hello Purr is the google android app inventor's demo program, playing on "Hello World" which is usually the first simple program you learn to create in a given programming language.
First, you're going to load up the app inventor in your web browser. Once loaded, select New Project and name it whatever you wish; "test" or "demo" is fine if you're stuck for names.
Once you've got your project started you will be directed to the main development screen. This screen will show you the emulator window in the center (shaped like an android phone's screen) as well as the left sidebar full of the various widgets and GUI elements you can use in developing your app.
The emulator screen is there to help you build the GUI (graphical user interface - what your android user sees on screen when running android app) so that you can first build out the front-facing components of your program and later focus on the back-end or "hidden" elements of functionality.
The First Coding Elements
You will find these elements underneath the "Palette" heading on the left sidebar. In order to add an element to your program, you simply drag the desired element from the sidebar on the left to the "phone screen" emulation in the center of the app maker. This drag and drop functionality makes adding new components to your program fast and easy.
First, drag and drop a label onto the phone screen.
Next, drag and drop a button element onto the screen. It should show up right below the label on the phone screen.
Learning About Properties
Notice that when you click an element you have added to the phone screen emulator, clicking on it again will bring up a properties sidebar on the right side of your screen. This properties sidebar allows you to modify the look and feel of each element in your program.
For example, click the label component in the phone screen and notice the right sidebar labeled "component". Here is where you can select the label's name and change it. The default is Label1. For now, let's rename the label to KittyLabel1.
Next, let's go to the right sidebar labeled properties. With KittyLabel1 still selected, you will notice that there is a field containing the displayed text for the label, midway down the properties sidebar. Let's click into this field and change the label's displayed text to "Pet the kitty". Notice the displayed text changes immediately on the phone screen emulator.
Now our label is named more appropriately, but it's still looking sort of bland. We can jazz it up by changing the button's background color to blue and the text color to yellow, by using the same properties sidebar on the right. Let's also go ahead and make the text bold so it will be even easier to read.
Now that we've finished altering the label, we'll follow the same simple steps to change the appearance of the button. Let's change the button's displayed text to "Pet me".
Making Your Button Into an Image
Here's where we really start to see the power of the android app creator. On the right-side properties toolbar, with your button selected, you will notice a section for image overlay. This allows you to make your button into an image so that your users will see a picture that is clickable (or tappable).
At first, the "image" field displays "none" because we haven't uploaded any pictures yet. Click the "none" in the field to bring up the media list (which is also empty so far). In order to get our image into the app inventor so we can work with it, we will click add, then browse our computer to choose the image we want. For the purpose of this tutorial, add a picture of a cat; your own if you have one. If you don't, you can head over to the Stock Exchange free image consortium to find a cat picture that will work.
Once you find and select the image file on your computer, clicking add will start the uploading process and you'll see a message at the top of your screen confirming that your file is making its way to the android app inventor server. Once complete, you will see your image pop into the phone screen emulator - this is the new illustrated view of your button thanks to your image overlay and upload.
Adding Depth to Your Android Program with Sounds
Now that our app is coming together visually, it's time to round it out with some appropriate sound functionality to expand our users' experience. To do this, we add another element from the basic palette on the left sidebar of the screen.
We're going to choose the sound element. Important: although every element we have worked with up until this point has been visible, meaning you can see it on the phone screen as soon as you add it, sounds are not visible on this front screen emulator.
Instead, "invisible" elements like sounds drop below the phone screen emulator to the non-visible manager. Nevertheless, you will notice a new tab underneath your visible phone screen which allows you to select non-visible elements like the sound we just added. Additionally, you can select your sound in the components window on the right sidebar next to properties. We can change aspects of our non-visible elements by altering the property fields just as we did before for our label and button.
Let's do this now in order to choose the actual sound that will play. Click into the "source" field to bring up the same basic upload dialog as before. Grab the sound file from your computer - any meow will do, even if you just have to use your webcam to create a fake meow yourself and save it to your desktop for easy uploading.
Once we have our sound file uploaded, it will show the file name underneath "source".
Congratulations, you've finished the visual side of building your first great android application. Now it's time to head over to the backend of the app inventor in order to specify the logic, or code functionality of our little program.
Using the Back-end of App Inventor to Design the Functionality of Your Application
In order to access the code elements of our program, we click the tab on the top right near the properties sidebar to switch over to the "blocks editor" which allows you to specify the relationships between components of your program and how each of them should function.
Important: every component and element we created on the graphical side of our application will have creater a "drawer" in the left sidebar of the blocks editor. For example, we can click the drawer for the button element we created in the beginning to expand all aspects of this button in our blocks editor, which will ultimately allow us total programming control over that button's behavior.
For the purposes of our kitty program, we are going to choose the whenbuttonclick "event" which will allow us to tell our program what we want it to do when a user clicks the button (can you guess?).
Next, you will notice that the green whenbuttonclick event is now visible in the blocks editor display. You will also notice the strange shape of this event leaves a blank space in its center. This space allows us to link other actions or behaviors into the event to specify exactly what should happen when someone clicks our button. All this without any coding knowledge!
To make our kitty button all it can be, we are going to add the sound1play sequence to our whenbuttonclick event. choose the sound1play action from the sound1 drawer on the left sidebar. When you add this blueish block to our whenbuttonclick event, you will see that it nestles itself perfectly into the event.
In the eyes of the google android app inventor, this has told our program that any time someone clicks our button (taps the kitty) the program should play the meow sound we uploaded.
That's all, folks! If your android phone was correctly connected to your computer while you were building this app, you should now see the completed version on your phone. You can pet the kitty to hear it meow. I hope this has provided a good introductory look at how to develop your own android apps for free, as well as the power of google's app creator. Best of luck and happy creating.