Download - Android 5: Making th e App
![Page 1: Android 5: Making th e App](https://reader036.vdocuments.net/reader036/viewer/2022070405/56813d5d550346895da72868/html5/thumbnails/1.jpg)
1
Android 5: Making the App
Kirk Scott
![Page 2: Android 5: Making th e App](https://reader036.vdocuments.net/reader036/viewer/2022070405/56813d5d550346895da72868/html5/thumbnails/2.jpg)
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
![Page 3: Android 5: Making th e App](https://reader036.vdocuments.net/reader036/viewer/2022070405/56813d5d550346895da72868/html5/thumbnails/3.jpg)
3
5.1 Introduction
![Page 4: Android 5: Making th e App](https://reader036.vdocuments.net/reader036/viewer/2022070405/56813d5d550346895da72868/html5/thumbnails/4.jpg)
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
![Page 5: Android 5: Making th e App](https://reader036.vdocuments.net/reader036/viewer/2022070405/56813d5d550346895da72868/html5/thumbnails/5.jpg)
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
![Page 6: Android 5: Making th e App](https://reader036.vdocuments.net/reader036/viewer/2022070405/56813d5d550346895da72868/html5/thumbnails/6.jpg)
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
![Page 7: Android 5: Making th e App](https://reader036.vdocuments.net/reader036/viewer/2022070405/56813d5d550346895da72868/html5/thumbnails/7.jpg)
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
![Page 8: Android 5: Making th e App](https://reader036.vdocuments.net/reader036/viewer/2022070405/56813d5d550346895da72868/html5/thumbnails/8.jpg)
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
![Page 9: Android 5: Making th e App](https://reader036.vdocuments.net/reader036/viewer/2022070405/56813d5d550346895da72868/html5/thumbnails/9.jpg)
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
![Page 10: Android 5: Making th e App](https://reader036.vdocuments.net/reader036/viewer/2022070405/56813d5d550346895da72868/html5/thumbnails/10.jpg)
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
![Page 11: Android 5: Making th e App](https://reader036.vdocuments.net/reader036/viewer/2022070405/56813d5d550346895da72868/html5/thumbnails/11.jpg)
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
![Page 12: Android 5: Making th e App](https://reader036.vdocuments.net/reader036/viewer/2022070405/56813d5d550346895da72868/html5/thumbnails/12.jpg)
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
![Page 13: Android 5: Making th e App](https://reader036.vdocuments.net/reader036/viewer/2022070405/56813d5d550346895da72868/html5/thumbnails/13.jpg)
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
![Page 14: Android 5: Making th e App](https://reader036.vdocuments.net/reader036/viewer/2022070405/56813d5d550346895da72868/html5/thumbnails/14.jpg)
14
• The following screenshot shows the Eclipse interface
![Page 15: Android 5: Making th e App](https://reader036.vdocuments.net/reader036/viewer/2022070405/56813d5d550346895da72868/html5/thumbnails/15.jpg)
15
![Page 16: Android 5: Making th e App](https://reader036.vdocuments.net/reader036/viewer/2022070405/56813d5d550346895da72868/html5/thumbnails/16.jpg)
16
• In the File menu, take the Import… option• What you see is shown in the screenshot on
the following overhead
![Page 17: Android 5: Making th e App](https://reader036.vdocuments.net/reader036/viewer/2022070405/56813d5d550346895da72868/html5/thumbnails/17.jpg)
17
![Page 18: Android 5: Making th e App](https://reader036.vdocuments.net/reader036/viewer/2022070405/56813d5d550346895da72868/html5/thumbnails/18.jpg)
18
• The default, “Existing Android Code Into Workspace” is what you want
• When you click next, this is what you see:
![Page 19: Android 5: Making th e App](https://reader036.vdocuments.net/reader036/viewer/2022070405/56813d5d550346895da72868/html5/thumbnails/19.jpg)
19
![Page 20: Android 5: Making th e App](https://reader036.vdocuments.net/reader036/viewer/2022070405/56813d5d550346895da72868/html5/thumbnails/20.jpg)
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
![Page 21: Android 5: Making th e App](https://reader036.vdocuments.net/reader036/viewer/2022070405/56813d5d550346895da72868/html5/thumbnails/21.jpg)
21
![Page 22: Android 5: Making th e App](https://reader036.vdocuments.net/reader036/viewer/2022070405/56813d5d550346895da72868/html5/thumbnails/22.jpg)
22
• When you click on OK, this may be what you see:
![Page 23: Android 5: Making th e App](https://reader036.vdocuments.net/reader036/viewer/2022070405/56813d5d550346895da72868/html5/thumbnails/23.jpg)
23
![Page 24: Android 5: Making th e App](https://reader036.vdocuments.net/reader036/viewer/2022070405/56813d5d550346895da72868/html5/thumbnails/24.jpg)
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:
![Page 25: Android 5: Making th e App](https://reader036.vdocuments.net/reader036/viewer/2022070405/56813d5d550346895da72868/html5/thumbnails/25.jpg)
25
![Page 26: Android 5: Making th e App](https://reader036.vdocuments.net/reader036/viewer/2022070405/56813d5d550346895da72868/html5/thumbnails/26.jpg)
26
• Make sure to also click the checkbox for “Copy projects into workspace”
![Page 27: Android 5: Making th e App](https://reader036.vdocuments.net/reader036/viewer/2022070405/56813d5d550346895da72868/html5/thumbnails/27.jpg)
27
![Page 28: Android 5: Making th e App](https://reader036.vdocuments.net/reader036/viewer/2022070405/56813d5d550346895da72868/html5/thumbnails/28.jpg)
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
![Page 29: Android 5: Making th e App](https://reader036.vdocuments.net/reader036/viewer/2022070405/56813d5d550346895da72868/html5/thumbnails/29.jpg)
29
![Page 30: Android 5: Making th e App](https://reader036.vdocuments.net/reader036/viewer/2022070405/56813d5d550346895da72868/html5/thumbnails/30.jpg)
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
![Page 31: Android 5: Making th e App](https://reader036.vdocuments.net/reader036/viewer/2022070405/56813d5d550346895da72868/html5/thumbnails/31.jpg)
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)
![Page 32: Android 5: Making th e App](https://reader036.vdocuments.net/reader036/viewer/2022070405/56813d5d550346895da72868/html5/thumbnails/32.jpg)
32
![Page 33: Android 5: Making th e App](https://reader036.vdocuments.net/reader036/viewer/2022070405/56813d5d550346895da72868/html5/thumbnails/33.jpg)
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
![Page 34: Android 5: Making th e App](https://reader036.vdocuments.net/reader036/viewer/2022070405/56813d5d550346895da72868/html5/thumbnails/34.jpg)
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
![Page 35: Android 5: Making th e App](https://reader036.vdocuments.net/reader036/viewer/2022070405/56813d5d550346895da72868/html5/thumbnails/35.jpg)
35
![Page 36: Android 5: Making th e App](https://reader036.vdocuments.net/reader036/viewer/2022070405/56813d5d550346895da72868/html5/thumbnails/36.jpg)
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
![Page 37: Android 5: Making th e App](https://reader036.vdocuments.net/reader036/viewer/2022070405/56813d5d550346895da72868/html5/thumbnails/37.jpg)
37
![Page 38: Android 5: Making th e App](https://reader036.vdocuments.net/reader036/viewer/2022070405/56813d5d550346895da72868/html5/thumbnails/38.jpg)
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
![Page 39: Android 5: Making th e App](https://reader036.vdocuments.net/reader036/viewer/2022070405/56813d5d550346895da72868/html5/thumbnails/39.jpg)
39
![Page 40: Android 5: Making th e App](https://reader036.vdocuments.net/reader036/viewer/2022070405/56813d5d550346895da72868/html5/thumbnails/40.jpg)
40
5.4 Creating the App
![Page 41: Android 5: Making th e App](https://reader036.vdocuments.net/reader036/viewer/2022070405/56813d5d550346895da72868/html5/thumbnails/41.jpg)
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
![Page 42: Android 5: Making th e App](https://reader036.vdocuments.net/reader036/viewer/2022070405/56813d5d550346895da72868/html5/thumbnails/42.jpg)
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
![Page 43: Android 5: Making th e App](https://reader036.vdocuments.net/reader036/viewer/2022070405/56813d5d550346895da72868/html5/thumbnails/43.jpg)
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
![Page 44: Android 5: Making th e App](https://reader036.vdocuments.net/reader036/viewer/2022070405/56813d5d550346895da72868/html5/thumbnails/44.jpg)
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.)
![Page 45: Android 5: Making th e App](https://reader036.vdocuments.net/reader036/viewer/2022070405/56813d5d550346895da72868/html5/thumbnails/45.jpg)
45
![Page 46: Android 5: Making th e App](https://reader036.vdocuments.net/reader036/viewer/2022070405/56813d5d550346895da72868/html5/thumbnails/46.jpg)
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:
![Page 47: Android 5: Making th e App](https://reader036.vdocuments.net/reader036/viewer/2022070405/56813d5d550346895da72868/html5/thumbnails/47.jpg)
47
![Page 48: Android 5: Making th e App](https://reader036.vdocuments.net/reader036/viewer/2022070405/56813d5d550346895da72868/html5/thumbnails/48.jpg)
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
![Page 49: Android 5: Making th e App](https://reader036.vdocuments.net/reader036/viewer/2022070405/56813d5d550346895da72868/html5/thumbnails/49.jpg)
49
![Page 50: Android 5: Making th e App](https://reader036.vdocuments.net/reader036/viewer/2022070405/56813d5d550346895da72868/html5/thumbnails/50.jpg)
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
![Page 51: Android 5: Making th e App](https://reader036.vdocuments.net/reader036/viewer/2022070405/56813d5d550346895da72868/html5/thumbnails/51.jpg)
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
![Page 52: Android 5: Making th e App](https://reader036.vdocuments.net/reader036/viewer/2022070405/56813d5d550346895da72868/html5/thumbnails/52.jpg)
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
![Page 53: Android 5: Making th e App](https://reader036.vdocuments.net/reader036/viewer/2022070405/56813d5d550346895da72868/html5/thumbnails/53.jpg)
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
![Page 54: Android 5: Making th e App](https://reader036.vdocuments.net/reader036/viewer/2022070405/56813d5d550346895da72868/html5/thumbnails/54.jpg)
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
![Page 55: Android 5: Making th e App](https://reader036.vdocuments.net/reader036/viewer/2022070405/56813d5d550346895da72868/html5/thumbnails/55.jpg)
55
• The Copy of FlashCard app is shown on the following overhead in the Eclipse project explorer
• Here, the project is open
![Page 56: Android 5: Making th e App](https://reader036.vdocuments.net/reader036/viewer/2022070405/56813d5d550346895da72868/html5/thumbnails/56.jpg)
56
![Page 57: Android 5: Making th e App](https://reader036.vdocuments.net/reader036/viewer/2022070405/56813d5d550346895da72868/html5/thumbnails/57.jpg)
57
• Now in the File menu you will find the “Rename…” option
• The next overhead shows what you get• Provide a different name here
![Page 58: Android 5: Making th e App](https://reader036.vdocuments.net/reader036/viewer/2022070405/56813d5d550346895da72868/html5/thumbnails/58.jpg)
58
![Page 59: Android 5: Making th e App](https://reader036.vdocuments.net/reader036/viewer/2022070405/56813d5d550346895da72868/html5/thumbnails/59.jpg)
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
![Page 60: Android 5: Making th e App](https://reader036.vdocuments.net/reader036/viewer/2022070405/56813d5d550346895da72868/html5/thumbnails/60.jpg)
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
![Page 61: Android 5: Making th e App](https://reader036.vdocuments.net/reader036/viewer/2022070405/56813d5d550346895da72868/html5/thumbnails/61.jpg)
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
![Page 62: Android 5: Making th e App](https://reader036.vdocuments.net/reader036/viewer/2022070405/56813d5d550346895da72868/html5/thumbnails/62.jpg)
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
![Page 63: Android 5: Making th e App](https://reader036.vdocuments.net/reader036/viewer/2022070405/56813d5d550346895da72868/html5/thumbnails/63.jpg)
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
![Page 64: Android 5: Making th e App](https://reader036.vdocuments.net/reader036/viewer/2022070405/56813d5d550346895da72868/html5/thumbnails/64.jpg)
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
![Page 65: Android 5: Making th e App](https://reader036.vdocuments.net/reader036/viewer/2022070405/56813d5d550346895da72868/html5/thumbnails/65.jpg)
65
5.6 Summary
![Page 66: Android 5: Making th e App](https://reader036.vdocuments.net/reader036/viewer/2022070405/56813d5d550346895da72868/html5/thumbnails/66.jpg)
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
![Page 67: Android 5: Making th e App](https://reader036.vdocuments.net/reader036/viewer/2022070405/56813d5d550346895da72868/html5/thumbnails/67.jpg)
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
![Page 68: Android 5: Making th e App](https://reader036.vdocuments.net/reader036/viewer/2022070405/56813d5d550346895da72868/html5/thumbnails/68.jpg)
68
The End