Android 3: Exploring Apps and the Development Environment

1. Android 3: Exploring Apps and the Development Environment Kirk Scott

2. Outline • 3.1 Introduction • 3.2 The Project Explorer • 3.3 /src/com.example.myfirstapp/ Main_Activity.java • 3.4 /res/layout/activity_main.xml • 3.5 /res/values/strings.xml • 3.6 /res/drawable-hdpi • 3.7 /res/raw • 3.8 Summary

3. 3.1 Introduction

4. This unit surveys some of the aspects of an Android app • Its main purpose is to survey how you can find these aspects of an app through the Eclipse project explorer interface • Later on, it will be necessary to do certain things through that interface

5. Recall that the preceding set of overheads ended with the assumption that Java and Eclipse had been installed on a development machine, a pc or a laptop • This set of overheads considers some of the things you would find in that environment

6. 3.2 The Project Explorer

7. The following screen shows the Eclipse development environment with nothing open in it

9. In the File menu, there is an Import option • This will be covered concretely in a future set of overheads • For the time being note that the following overhead shows the first of the set of steps for importing an Android project into the environment

11. From this point on, we’ll assume that a project of interest, in this case name “My First App”, has been successfully imported • This happens to be an example even simpler than the flashcard app

12. The screenshot on the following overhead shows My First App in Eclipse • A file associated with the app, a layout, is open in the editing area • The key point of interest is the Project Explorer, which is on the left hand side • In the explorer, the folder containing the app has been expanded to show the items immediately underneath it

14. Being able to use the explorer will be critical • If something has happened to cause it to disappear, you can always restore the Project Explorer • Take these options in the menu: • Window, Show View, Project Explorer

15. Expanded View of the Project in the Explorer • The screenshot on the following overhead shows the subfolders in the Project Explorer expanded • You expand folders and subfolders by double clicking on them with the mouse • The following sections of this unit look at items of interest in these expanded folders

17. If all folders are expanded, not everything is visible at the bottom of the explorer • Using the scroll bars you can move up and down through the explorer

18. 3.3 /src/com.example.myfirstapp/Main_Activity.java

19. The screenshot on the following overhead shows what you see when you double click on Main_Activity.java in the Project Explorer • This is essentially the Java source code for the app • We are not interested in the code itself • But later on, it will be necessary to be able to find this code when working with the flashcard app

21. 3.4 /res/layout/activity_main.xml

22. The screenshot on the following overhead shows what you see when you double click on activity_main.xml under /res/layout in the Project Explorer • As seen before, this is the layout of the output of the app as shown in the development environment

24. The layout is stored separately from the code logic • But like the code logic, for our purposes, the layout is a predefined given for the flashcard app • We will accept the given layout, and simply be interested in providing content to put in it

25. Consider the contents of the screenshot again: • On the left, there is the Eclipse Project Explorer, with the folders expanded • In the center, there is a view of the graphical layout of the app • This visible graphical layout is defined by the file activity_main.xml

26. At the bottom of the editor are two tabs, one for Graphical Layout and one simply showing the name of the file, activity_main.xml • Clicking on the activity_main.xml tab shows you the xml source code, as shown on the following overhead

28. The reason for mentioning this is just so you don’t get confused • As a non-technical user of Eclipse and the interface, for one reason or another, at one time you might see a graphical layout while at another you might see an XML file • Since we aren’t doing development, it doesn’t matter either way

29. 3.5 /res/values/strings.xml

30. The screenshot on the following overhead shows the Project Explorer scrolled down to show /res/values/strings.xml • It also shows what you see when you double click on strings.xml • (Note that of the two tabs at the bottom of the editor screen, you need to be on strings.xml, not Resources, if you want to see the XML source code)

32. What about strings.xml? • The elements in strings.xml are important because they are part of the definition of the content of an app • For the flashcard app, some of the content will be predefined and saved in strings.xml

33. There will be no need for you to change these things • Still, it seems wise to provide general background so you have some idea how and where things are defined

34. The kinds of things that are defined here are: • The labels on buttons • The name of the app as presented on the screen • Sentences or phrases which will remain the same even after you have entered your specialized content for a flashcard app for a particular topic

35. 3.6 /res/drawable-hdpi

36. The following overhead using the flashcard app as an example • Incidentally, a layout for that app is shown in the editor screen • What is important is the explorer • The res/drawable-hdpi folder is expanded • This folder contains the .png picture files which belong to the app

38. 3.7 /res/raw

39. The following overhead using the flashcard app as an example • Incidentally, a layout for that app is shown in the editor screen • What is important is the explorer • The res/raw folder is expanded • This folder contains the .mp3 sound files which belong to the app

41. 3.8 Summary

42. This is the end of the initial presentation of the components of an app that can be found in the Project Explorer • High points of what can be found there: • MainActivity.java, the source code • activity_main.xml, the layout

43. strings.xml, the file containing the string resources for an app • The res/drawable-hdpi folder, which contains the .png picture files for an app • The res/raw folder, which contains the .mp3 sound files for the app

44. The End