Android 4: Creating Contents Kirk Scott 1

Outline 4.1 Planning Contents 4.2 GIMP and Free Sound Recorder 4.3 Using FlashCardMaker to Create an XML File 4.4 Summary 2

4.1 Planning Contents The previous sets of overheads introduced the idea that the contents of a framework app could be developed separately from the code, or logic of an app Those overheads also introduced the idea of a project explorer consisting of folders where app components could be stored 3

The next task is to develop some contents that can be put in the framework Screenshots of the opening screen, the closing screen, and one of the question and answer screens of the sample framework app are repeated on the following overheads 4

5

On the opening screen, the sentence, “This app asks questions about color,” is the custom header text This can be changed from one instance of the app to another depending on the content or topic of the app 6

7

Similarly, on the closing screen, the sentence, “This app asked questions about color,” is the custom trailer text This can be changed from one instance of the app to another depending on the content or topic of the app 8

So there are two initial things to have ready when planning the content for your app: The custom header text The custom trailer text 9

10

The heart of the app consists of the screens containing questions and answers There is separate text for each question and answer Each screen (potentially) contains a picture And each screen (potentially) contains a sound 11

When planning your app, you will need to envision the different flashcards you will include You will need to know what order you want them in And you will have to figure out the text, picture, and sound for each, in advance 12

For an extensive project, you may prepare the text in advance in a word processor for example Or you may just have it written down Preparing the picture and sound files in advance is a little more complicated That is the topic of the following section 13

4.2 GIMP and Free Sound Recorder You will definitely have to prepare picture and sound files in advance when planning a flashcard app The title of this section gives the names of application programs for doing this The initial overheads will discuss general issues Then the programs will be introduced 14

Picture Files The preferred kind of picture file has the.png extension (portable network graphics).jpeg files will also work Notice that the screen size for a portable device is not large, so the pictures don’t have to be large in size 15

It is also important to note that portable devices don’t have much memory The smaller the pictures are in the amount of memory they take up, the better It is possible to make pictures by hand and scan them Or it’s possible to make pictures directly using a drawing package 16

Sound Files Android will support several different kinds of sound files, but for all practical purposes the type with the.mp3 extension is the only one of interest There is a default sound recorder in Microsoft Windows, but I did not find the quality of the recordings very good, and you have to convert from.wma to.mp3—an extra step 17

The Software Packages GIMP (Gnu Image Manipulation Program) This program is essentially equivalent to Adobe Illustrator It is available for free download at this address: It can be used to create original artwork or to convert existing picture files to.png format (This is done with the export option in the file menu) 18

The program Free Sound Recorder can be used to make original sound recordings It will record directly in.mp3 format, so there is no need to convert It is available for free download at this address: 19

In Summary In order to be successful, you have to plan your content in advance Planning text content can be relatively simple Preparing pictures and sound can be more complicated You should give the picture and sound files helpful, descriptive names, so the name tells you what’s in the file 20

You should also plan on making separate folders to hold the different kinds of files so it will be easy to manage them and copy groups of files from one place to another when the time comes. The screen shots on the following overheads show you the directory listings holding the picture and sounds files for the color sample app 21

22

Notice that there is a file named nopicture It is not actually used in the Color app However, it is part of the framework This file can be used for a flashcard that does not have a picture associated with it 23

24

Notice that there is a file named nosound It is not actually used in the Color app However, it is part of the framework This file can be used for a flashcard that does not have a sound associated with it 25

4.3 Using FlashCardMaker to Create an XML File FlashCardMaker is an application program that is designed to allow users to create content for the flashcard sample app FlashCardMaker is not a commercial program It was written by the author of these overheads 26

FlashCardMaker is still a work in progress Certain features have been tested—and it does work However, it is almost certain that bugs remain 27

FlashCardMaker is not nearly as polished and complete as a commercial program like PowerPoint However, the idea is similar FlashCardMaker is supposed to be “the” PowerPoint program for making content for the flashcard sample app 28

A screenshot of FlashCardMaker is shown on the following overhead Its characteristics will be listed on the overheads that follow that 29

30

FlashCardMaker includes: An area for entering custom header text for the first screen of the app An area for entering custom trailer text for the last screen of the app 31

An area that shows the count of the total number of flashcards in the set An area that shows the number of the current flashcard in the set shown on the screen The count and number areas are not editable by the user An area for entering the text for a question An area for entering the text for an answer to a question 32

An area for entering the name of a picture file for a flashcard Note that the name should be entered without a path and without an extension An area for entering the name of a sound file for a flashcard Note that the name should be entered without a path and without an extension 33

The FlashCardMaker interface also includes a menu and two buttons Once more than one flashcard has been created, the buttons, Previous and Next, allow you to move back and forth between flashcards in the set Note that Previous and Next have nothing to do with creating new flashcards 34

Screenshots of the FlashCardMaker interface will be given on the following overheads with the menus open Brief explanations of the menu options will follow 35

36

The File menu has 3 options: Save.abc file Open.abc file Make.xml file The Save an Open options allow you to save your work on a set of flashcards The Make option is what creates the content necessary for inclusion in the app 37

38

The Flashcard menu contains 6 options related to creating, moving, and deleting flashcards from the set: Create New Flashcard After the Current One Create New Flashcard Before the Current One Cut this Flashcard Paste Cut Flashcard After the Current One Paste Cut Flashcard Before the Current One Delete this Flashcard 39

Using FlashCardMaker As mentioned earlier, FlashCardMaker is not perfect However, the critical features are functional Adding flashcards, one after the other, to a set of flashcards has been tested and works Creating the.xml file, the contents for the flashcard sample app, has been tested and works 40

The following overheads illustrate the steps in using FlashCardMaker The full set of color flashcards will not be made, just representative steps When you start FlashCardMaker, you get this screen with an empty form, shown earlier: 41

42

Add the custom header and trailer text for the whole set of flashcards Add the question and answer text for the first flash card Add the picture and sound file names for the first flashcard Do not put in paths or extensions for the picture or sound files 43

44

At this point, do not click the Previous or Next buttons—there are no other flashcards Go to the Flashcard menu and take the option “Create New Flashcard After the Current One” This is what you see—a screen which retains the custom header and trailer text and allows you to enter the contents of the second flashcard 45

46

Repeat this process until you’ve entered the contents of all of the flashcards you want in your set Then take the File menu option “Make.xml file” You will see a “Save” dialog like that shown on the following overhead 47

48

Enter the name of your choice for the file It should be descriptive of the contents of your app, like “colorappcontents” Do not use capital letters in the name Do not type in the extension.xml The resources for an app have to be in.xml format, but FlashCardMaker provides the extension automatically 49

The only other thing you have to do is remember where the file is You will need it later In case you’re curious, you can look at the contents of the file in any text editor A screenshot is shown on the following overhead 50

51

The FlashCardMaker program will be available in two forms: Source code: This would allow Java programmers to look at how it works A self-executable Jar file: This is for people who just want to run the program and use it to create contents for an app 52

The FlashCardMaker self-executable jar file does not require that the Java development environment be installed However, you do need Java on your machine in the form of the jre (Java runtime Environment) Most up-to-date computers with current Web browsers will have this installed and will run the self-executable file If it’s not installed, it will be necessary to install it 53

4.4 Summary 54

In order to take the next step and begin creating a flashcard app with your own personal content: 1. You need to plan your content in advance 2. You need to decide on the text, pictures, and sound 3. You will probably have to work with programs like GIMP and Free Sound Recorder 55

4. You will want to keep your media files well- organized for copying later on 5. You will need to learn how to use FlashCardMaker 6. You will have to enter your content using FlashCardMaker 7. You will have to save your content as an.xml file using FlashCardMaker 56

The End 57