android 5: making th e app

1

Android 5: Making the App

Kirk Scott

2

Outline

• 5.1 Introduction• 5.2 Importing the Copy of FlashCard• 5.3 Copying Picture Files, Sound files, and

the .XML File• 5.4 Creating the App• 5.5 Renaming the App• 5.6 Summary

3

5.1 Introduction

4

• This set of overheads covers the most difficult and troublesome aspects of this seminar

• As already noted, the goal of the sets of overheads is to make it possible to make an app without being a programmer

5

• Already, Eclipse, the most basic piece of software needed, has been mentioned

• It has to be installed, but it is simply impossible to become a master of this piece of software unless someone is, in fact, a skilled developer

6

• In short, the problem is this:• It is necessary and desirable to get everything

set up and provide the minimum knowledge necessary to create an app

• Unfortunately, things will inevitably go wrong• Without additional background knowledge, it

is extremely hard to figure out what was wrong

7

• The author of these overheads has tested the sequence of steps that will be presented

• This sequence of steps has worked• However, in honesty, occasionally problems

have arisen• It has been impossible to tell whether the

author made mistakes in executing the sequence or whether there were other, technical problems

8

• Because the author is a developer, it was ultimately possible to resolve problems and make progress

• But for someone whose only knowledge is the information contained in these overheads, unforeseen problems will be frustrating and seemingly insoluble

• The only realistic approach in those cases is to close Eclipse and start over from scratch

9

• This presentation will not attempt to include a live demonstration of the steps

• If people want to see these steps in action, they will be demonstrated separately, one-on-one or in small groups

• There is too great a chance of failure, confusion, and wasted time to risk trying to demonstrate the steps during the presentation

10

5.2 Importing the Copy of FlashCard

• There is a copy of the flashcard app which has all of the custom content removed

• It is named Copy of FlashCard• It will be made available to seminar

participants• It can be copied into the location of choice on

the machine that will be used to create an app

11

• In brief, this is what it does contain:• The .java files containing the logic of the app• The layout files which define how the different

screens of the app appear

12

• General resource files for content that would be common to any implementation of the app

• An example of general resource files would be nopicture and nosound, in case any user wanted to make flashcards which didn’t include pictures or sounds

• Other system-supplied common resources are also in the Copy of FlashCard

13

• In order to make a flashcard app it will be necessary to import this copy which doesn’t contain content

• After it’s been imported, content can be copied to it

• The following overheads go through the steps for importing

14

• The following screenshot shows the Eclipse interface

15

16

• In the File menu, take the Import… option• What you see is shown in the screenshot on

the following overhead

17

18

• The default, “Existing Android Code Into Workspace” is what you want

• When you click next, this is what you see:

19

20

• You click on Browse… and navigate to the location where you have saved Copy of FlashCard on your machine

• This is shown on the following overhead

21

22

• When you click on OK, this may be what you see:

23

24

• If so, click the checkbox to the left of the project

• Or you may not have to do this step and you will already see what’s shown on the following overhead:

25

26

• Make sure to also click the checkbox for “Copy projects into workspace”

27

28

• Then click the Finish button• A screenshot of the resulting Eclipse interface

is shown on the following overhead• Notice that CopyOfFlashCard now appears in

the project explorer

29

30

• On the overhead following the next one the project explorer will be shown again with the folders open which will be critical to the next steps

31

• These are the critical folders:• src (containing MainActivity.java, for example)• res/values-hdpi (containing ic_launcher.png,

for example)• res/raw (containg nosound.mp3, for example)

32

33

5.3 Copying Picture Files, Sound files, and the .XML File

• The next step is relatively straightforward• You need to remember where the folders are

where you saved the picture files, the sound file, and the .xml file you made with FlashCardMaker

• You can find them using the regular file explorer in Microsoft Windows

• You can then copy and drop the files into the right folder in the Eclipse project explorer

34

• So, find your picture files• Select them, right click, and copy• Open the Eclipse project explorer• Put the mouse over the res/values-hdpi folder• Right click and paste• The results are shown in the screenshot on

the following overhead

35

36

• Find your sound files• Select them, right click, and copy• Open the Eclipse project explorer• Put the mouse over the res/raw folder• Right click and paste• The results are shown in the screenshot on

the following overhead

37

38

• For the purposes of demonstrating this I made a file named testimport.xml using FlashCardMaker

• testimport.xml contains all of the same information as the full FlashCard app, but the colors come in a different order

• This has to be copied into the res/values folder• The results are shown in the screenshot on the

following overhead

39

40

5.4 Creating the App

41

• The importing step may or may not have caused some troubles

• The copying step should have been trouble-free

• The creating step is the one where you are most likely to discover that something has gone wrong

42

• Strictly speaking, the creating step is the last step that a developer would take

• In other words, for us, it is a developer step that is unavoidable, even though we aren’t developers

• The error messages or problems that might result will likely not be clear

43

• If no other help is available, starting over from the beginning is the only option

• However, if this fails, then it would be necessary to turn to somebody with Android development knowledge in order to navigate your way through the problems and get successful results

• For better or worse, this is the weakest link in the chain

44

• What you want to do next is find MainActivity.java in the src folder

• Open it by double clicking on it in the Eclipse project explorer

• The result of doing this is shown on the following overhead

• (You may just ignore the content of the file that’s shown. It’s Java code.)

45

46

• In the Project menu select the “Clean…” option

• In it, make sure that the Copy of FlashCard project is checked and that “Start a build immediately” is checked

• This is shown on the following overhead:

47

48

• Click “OK”• A screenshot of the environment is shown

again on the next overhead• Notice the tab at the bottom:• Problems• If there are no problems, this is a successful

outcome

49

50

• If there had been problems, they may have appeared under the Problems tab

• They may also appear under the Console or the LogCat tabs

51

• In any case, if problems appear, this is when life becomes difficult

• In essence, these are developer problems that have somehow resulted from a mis-step in trying to follow these directions for importing, copying, and creating a new app

52

• The next step, logically, is trying to run an app that was created logically without problems

• However, this itself turns out to be a significant topic and is handled in the next set of overheads

• One other intermediate topic will be covered in this set of overheads

53

5.5 Renaming the App

• It turns out that naming and renaming apps is a significant issue when trying to import, copy, and create apps

• As a developer you can create a brand new app and give it a new name every time

• As a user of the system presented here, Copy of FlashCard already has a name

54

• You might want to rename your app• And if you repeat the process using different

content, you would probably want to be able to give each new app a different name

55

• The Copy of FlashCard app is shown on the following overhead in the Eclipse project explorer

• Here, the project is open

56

57

• Now in the File menu you will find the “Rename…” option

• The next overhead shows what you get• Provide a different name here

58

59

• You can also right click on the Copy of FlashCard in the explorer

• This will lead to a pop-up menu containing an option “Refactor”

• If you take that option, it will lead to a “Rename…” option

60

• It turns out that renaming, something which seems like it should be easy, actually has some complications

• Like in other places in this seminar, in the interests of time and simplicity, not all of the complexities can be covered

61

• It is important to note, however, that some of the incomprehensible problems that can arise may have to do with naming

• The situation is this:• You can rename projects, but internally, the

system keeps track of the original source code for the project

62

• In simple terms, the situation is this:• If you wanted to make two different flashcard

apps with two different sets of contents, both would ultimately be based on Copy of FlashCard

63

• However, in order for things to work out correctly, you would need to start with two different copies of Copy of FlashCard, with different code and different names

• Then you could make your two apps based on these two different starting copies

• And you could then rename each or your personalized apps

64

• Although artificial, for the purposes of this presentation the assumption is that you only want to make one personalized app of your own

• That makes it possible to avoid the further details of renaming Copy of FlashCard before using it

65

5.6 Summary

66

• In summary, these are the steps for making a flashcard app with your own personalized content based on the Copy of FlashCard framework:

• 1. Import Copy of FlashCard into Eclipse• 2. Copy your picture files, sound files,

and .xml resource file into the right folders of Copy of FlashCard

67

• 3. “Clean” the project in order to create the app

• 4. Rename the app if so desired• The critical next step, testing and running the

app, will be covered in the next set of overheads

68

The End