1. Android Programming Lecture 3
Testing notes
File Structure, Layout

2. Today’s Agenda Android Studio Environment and Configuration
File structure of an Android project
Android XML Layout

3. Android App Most apps written in Java
Android SDK tools compile code, data and resource files into Android PacKage (filename.apk)
Apps download from Google Play, or copied to device as filename.apk
Installation = installing apk file
App elements
User Interface
Other code designed to run in background (multi‐task)

4. Android Studio IDE
In December 2014, Google announced to use Android studio as the official IDE
Before that, Android Development Tools (ADT) is used
Eclipse plugin, adds Android functionality
Key components
SDK manager
AVD manager (install HAXM to speed up the launch of emulator)
Android Device Monitor

13. Importing Existing Codes
Following the training material on Android Developer site to learn how to import external codes into Android studio
You can explore rich sample codes in Github and Android developer site

14. Android Studio File Structure
Android project files can be categorized into three groups:
Resources (layout and resource)
Java codes
Connections between layout and Java codes

15. File Structure
Java files

16. Application Resources Definition
An Application is composed of: code and resources.
DEF. Resources are everything that is not code (including: XML layout files, language packs, images, audio/video files, etc)

17. Default Resources
Resources are defined in the res/ folder of the project.
MyProject
src
MyActivity.java
(Source Code Java)
res
layout
main.xml
(Application XML Layout)
values
strings.xml
(Application Labels)
drawable
icon.png
(Application Icons)

18. File Structure res: Contain all application resources
Include most of the following directories:
drawable - for images, drawable resource types like BMP,JPG, 9-patch, etc.
layout - XML files compiled into screen objects/views.
menu - XML files defining application menus.
values - XML files containing string values. Let's see how its used
mipmap – Place to put the launcher icons

19. File Structure
res:
raw - Same as assets, except it can be accessed via R file. (not created by default)
anim - for xml files that are compiled into Animation objects.
color - for xml files that describe colors.
xml - Other xml files, eg. PreferenceScreen, etc.

20. File Structure AndroidManifest.xml:
Every application must have an AndroidManifest.xml file (with precisely that name) in its root directory
This file manages icons, labels, permissions, libraries, intent filters and many other configuration parameters related to application

21. http://developer. android. com/guide/topics/manifest/manifest-intro

23. Reverse Engineer of APK
With an APK, it is possible to reverse engineer the original java codes and resources files
Try Apktool (

24. Structured Resources

25. Structured Resources
Android project use fixed names to structured resources
We have to use the predefined names for the folder and insert the different types of resources in their corresponding folders
e.g., images should be put into drawable folder
UI layout files should be put into the layout folder
Android uses the folder name to locate resource files

26. No. 1 Issue: Heterogeneous Devices
PROBLEM. An Android application might run on heterogenous devices with different characteristics (e.g. screen size, language support, keyboard type, input devices, etc).
For example, we need to adapt the image based on the locale of the user

27. Android Solution
PROBLEM. An Android application might run on heterogenous devices with different characteristics (e.g. screen size, language support, keyboard type, input devices, etc).
TRADITIONAL SOLUTION. Foresee all the alternatives in Java code
The code is full of if-else cases
Recompile when need to change layout or add a new language package.
ANDROID SOLUTION. Separate code from application resources
Use declative XML-based approch to define resources (images, files, layout, text, etc)

28. Alternative Resources
Use XML files to define (declarative approach):
Application Layout
Text used in the applications
Application Menu
Animations …
Foresee different resources alternatives for different device configurations (e.g. screen resolution, language, input devices. etc)
Java App Code
XML Layout File
Device 1,2
XML String File
Italian, English, French
XML Animation File
……..
Resources

29. Using Resources
EXAMPLE
Build the application layout through XML files (like HTML)
Define two different XML layouts for two different devices
At runtime, Android detects the current device configuration and loads the appropriate resources for the application
No need to recompile!
Just add a new XML file if you need to support a new device
Device 1
HIGH screen pixel density
Device 2
LOW screen pixel density
Java App Code
XML Layout File
Device 1
XML Layout File
Device 2

30. Resources Alternatives
Android applications might provide alternative resources to support specific device configurations (e.g. different languages).
At runtime, Android detects the current device configuration and loads the appropriate resources for the application.

31. Resources Alternatives
Create a new directory in res/ named in the form <resources_name>-<config_qualifier>
Save the respective alternative resources in this new directory

32. Resources Alternatives
Name of the folder: <resources_name>-<config_qualifier>.
<resources_name> is the directory name of the corresponding default resources (see previous slides).
<qualifier> is a name that specifies an individual configuration for which these resources are to be used (see next slide).
res
values-it
Values for the IT locale
values-en
Values for the EN locale

33. Resources Alternatives Matching
When the application requests a resource for which there are multiple alternatives, Android selects which alternative resource to use at runtime, depending on the current device configuration, through the algorithm shown in the Figure.

34. Resources Alternatives Matching
DEVICE CONFIGURATION
Locale = en-GB
Screen orientation = port 

Screen pixel density = hdpi
Touchscreen type = notouch 

Primary text input method = 12key
drawable/
drawable-en/
drawable-fr-rCA/
drawable-en-port/
drawable-en-notouch-12key/
drawable-port-ldpi/
drawable-port-notouch-12key/

35. Resources Alternatives Matching
DEVICE CONFIGURATION
Locale = en-GB
Screen orientation = port 

Screen pixel density = hdpi
Touchscreen type = notouch 

Primary text input method = 12key
drawable/
drawable-en/
drawable-fr-rCA/
drawable-en-port/
drawable-en-notouch-12key/
drawable-port-ldpi/
drawable-port-notouch-12key/

36. Resources Alternatives Matching
DEVICE CONFIGURATION
Locale = en-GB
Screen orientation = port 

Screen pixel density = hdpi
Touchscreen type = notouch 

Primary text input method = 12key
drawable/
drawable-en/
drawable-fr-rCA/
drawable-en-port/
drawable-en-notouch-12key/
drawable-port-ldpi/
drawable-port-notouch-12key/

37. Resources Alternatives Matching
DEVICE CONFIGURATION
Locale = en-GB
Screen orientation = port 

Screen pixel density = hdpi
Touchscreen type = notouch 

Primary text input method = 12key
drawable/
drawable-en/
drawable-fr-rCA/
drawable-en-port/
drawable-en-notouch-12key/
drawable-port-ldpi/
drawable-port-notouch-12key/

38. Reading Highly recommended: Android Developer: App Resources
view.html

39. Review of XML

40. XML
eXtensible Markup Language (XML) is a markup language that defines a set of rules for encoding documents in a format that is both human-readable and machine-readable **
A descriptive language
A text-based way to describe structure data
HTML: describes how data should be displayed or rendered on a web page
XML: describes how data should be understood
XML can be used to store, transport and exchange data **

41. Homepets Example
My HomePets
There is a cat with name Tiger
There is a dog with name Spooky
There is a hamster with name Fluffy
There is a snake with name Ozzy
A descriptive language: describe how data should be understood
Semantic approach for data representation
XML can be used to store, transport and exchange data
<?xml version=“1.0” encoding=“UTF-8”>
<HomePets>
<Cat> Tiger </Cat>
<Dog> Spooky </Dog>
<Hamster> Fluffy </Hamster>
<Snake> Ozzy </Snake>
</HomePets>

42. the document, expressed
Homepets Example
character encoding of
the document, expressed
in Latin characters, e.g.,
UTF-8, UTF-16,
iso ,
Version of the
XML specification
1.0 or 1.1
<?xml version=“1.0” encoding=“UTF-8”>
<HomePets>
<Cat> Tiger </Cat>
<Dog> Spooky </Dog>
<Hamster> Fluffy </Hamster>
<Snake> Ozzy </Snake>
</HomePets>
Start Tag of an element
Content of HomePets
End Tag of an element

43. Elements
Each XML document contains one or more elements, the boundaries of which are either delimited by start-tags and end-tags, or, for empty elements, by an empty- element tag
Everything between start-tag and end-tag is called content
Element without content is called empty element, which can be written as
<Tag /> Or
<?xml version=“1.0” encoding=“UTF-8”>
<HomePets>
<Cat />
</HomePets>
<Tag> </Tag>

44. XML-based Layout There is a UILayout with a button with text Play Game
a button with text Top Scores
a button with text Game Settings
a button with text Help
<?xml version=“1.0” encoding=“UTF-8”>
<HomePets>
<Cat> Tiger </Cat>
<Dog> Spooky </Dog>
<Hamster> Fluffy </Hamster>
<Snake> Ozzy </Snake>
</HomePets>
How to specify the pattern of the layout,
like the contents are vertical listed as above?

45. Attributes There is a yellow cat with name Tiger
There is a big dog with name Spooky
There is a small hamster with name Fluffy
There is a red snake with name Ozzy
<?xml version=“1.0” encoding=“UTF-8”>
<HomePets>
<Cat color = “yellow”> Tiger </Cat>
<Dog size = “big”> Spooky </Dog>
<Hamster size = “small”> Fluffy </Hamster>
<Snake color=“red”> Ozzy </Snake>
</HomePets>

46. <tag attributeName = “ attrbute-value “ … >
name of the
attribute
value or values
of the attribute
Each element
may contain zero
or more attributes
single or double
quotes,‘ or “, must match
name(or type)
of the element
start tag and end
tag name must match

47. There is no problem for me understand this as I define the tags.
<?xml version=“1.0” encoding=“UTF-8”>
<HomePets>
<Cat color = “yellow”> Tiger </Cat>
<Dog size = “big”> Spooky </Dog>
<Hamster size = “small”> Fluffy </Hamster>
<Snake color=“red”> Ozzy </Snake>
</HomePets>
There is no problem for me understand this as I define the tags.
What if I also wish my friends to know what those tags mean?
You need to provide the definition of the tags in the namespace of XML

48. XML-based Layout

49. XML-based Layout
An XML‐based layout is a specification of the various UI components (widgets) and the relationships to each other – and to their containers – all written in XML format
Android considers XML‐based layouts to be resources, and as such layout files are stored in the res/layout directory inside your Android project.

50. View and ViewGroup A UI is composed of
UI widgets inside the containers
Invisible containers
View is the base class for widgets, which are used to create interactive UI components (buttons, text fields, etc.)
The ViewGroup subclass is the base class for layouts, which are invisible containers that hold other Views (or other ViewGroups)

51. ViewGroup1 (Container)

52. ViewGroup1 (Container)

53. ViewGroup1 (Container)

55. Layout Linear Layout Table Layout Relative Layout Absolute Layout
Frame Layout
ScrollView Layout

56. LinearLayout
A LinearLayout is a ViewGroup that will lay child View elements vertically or horizontally
android:orientation = “vertical”
android:orientation = “horizontal”

57. Demo

58. Try this by yourself at home

59. Attributes of Linear Layout

60. Explore this site for different UI widgets for their XML tags and attributes

61. Layout Linear Layout Table Layout Relative Layout Absolute Layout
Frame Layout
ScrollView Layout
A TableLayout is a ViewGroup that will lay child View elements into rows and columns.

62. Table Layout
TableLayoutis a ViewGroup that will lay child View elements into rows and columns, controlled by attributes
Example: Make a table layout with
Two columns and four rows
The cell directly under the Password TextView is populated with an empty element. If you don't do this, the Remember Password checkbox will then appear under the Password TextView

63. Table Layout

64. Layout Linear Layout Table Layout Relative Layout Absolute Layout
Frame Layout
ScrollView Layout
A RelativeLayout is a ViewGroup that allows you to layout child elements in positions relative to the parent or siblings elements.

65. Relative Layout
Relative Layout lets you specify how child View elements are positioned relative to each other
Specified by the attributes like
android:layout_above
android:layout_below
android:layout_toLeftOf
android:layout_toRightOf
to the EditField would place the EditField below the TextField “Login Area”

66. Margin and Padding https://www.youtube.com/watch?v=7ivEwRxAsJw margin

67. Layout Linear Layout Table Layout Relative Layout Absolute Layout
Frame Layout
ScrollView Layout
Absolute layout pins the child View elements in the coordinate points of ViewGroup

68. Absolute Layout
Specify the exact location of the Views in the ViewGroup

69. Layout Linear Layout Table Layout Relative Layout Absolute Layout
Frame Layout
ScrollView Layout
Frame layout arranges child View elements relative to top left point. Views that you add to a FrameLayout are always anchored to the top left of the layout

70. Layout Linear Layout Table Layout Relative Layout
Absolute Layout
Frame Layout
ScrollView Layout
Please explore the sample codes in CloudDeakin/Resource/week 2/sample codes
A ScrollView is a special type of FrameLayout in that it allows users to scroll through a list of views that occupy more space than the physical display.

71. Summary What is AndroidManifest.html used for?
What are the folders in Android project used for?
What can be a resource in Android project? Can you name three?
Why does Android use structured folders for the project?
How does Android handle the different devices (screen sizes, orientation, languages)?
What is a View and ViewGroup in Android?
What are the differences between LinearLayout, RelativeLayout, TableLayout and FrameLayout?