1

Android 4: Creating Contents

Kirk Scott

2

Outline

• 4.1 Planning Contents• 4.2 GIMP and Free Sound Recorder• 4.3 Using FlashCardMaker to Create an XML

File• 4.4 Summary

3

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

4

• 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

5

6

• 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

7

8

• 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

9

• So there are two initial things to have ready when planning the content for your app:

• The custom header text• The custom trailer text

10

11

• 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

12

• 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

13

• 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

14

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

15

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

16

• 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

17

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

18

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:• http://www.gimp.us.com/• 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)

19

• 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:

• www.freesoundrecorder.net

20

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

21

• 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

22

23

• 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

24

25

• 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

26

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

27

• FlashCardMaker is still a work in progress• Certain features have been tested—and it

does work• However, it is almost certain that bugs remain

28

• 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

29

• A screenshot of FlashCardMaker is shown on the following overhead

• Its characteristics will be listed on the overheads that follow that

30

31

• 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

32

• 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

33

• 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

34

• 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

35

• Screenshots of the FlashCardMaker interface will be given on the following overheads with the menus open

• Brief explanations of the menu options will follow

36

37

• 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

38

39

• 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

40

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

41

• 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:

42

43

• 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

44

45

• 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

46

47

• 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

48

49

• 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

50

• 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

51

52

• 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

53

• 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

54

4.4 Summary

55

• 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

56

• 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

57

The End