Android Programming Lecture 3

1. Android Programming Lecture 3 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 • Othercodedesignedtoruninbackground(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 https://developer.android.com/sdk/installing/migrate.html • 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. http://developer.android.com/guide/topics/resources/available-resources.html

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 http://developer.android.com/guide/topics/manifest/manifest-intro.html

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

23. Reverse Engineer of APK • With an APK, it is possible to reverse engineer the original java codes and resources files • Try Apktool(https://ibotpeaches.github.io/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 Androidapplicationmightrun on heterogenousdevices with differentcharacteristics(e.g. screen size, languagesupport, keyboardtype, input devices, etc). For example, we need to adapt the image based on the locale of the user

27. Android Solution PROBLEM. An Androidapplicationmightrun on heterogenousdevices with differentcharacteristics(e.g. screen size, languagesupport, keyboardtype, 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 • 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 EXAMPLE 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 • http://developer.android.com/guide/topics/resources/overview.html

39. Review of XML

40. XML • eXtensibleMarkup 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: describeshow data should be displayed or rendered on a web page • XML: describeshow data should be understood • XML can be used to store, transportand exchange data ** http://en.wikipedia.org/wiki/XML

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. Homepets Example character encoding of the document, expressed in Latin characters, e.g., UTF-8, UTF-16, iso-8859-1, 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 /> <?xml version=“1.0” encoding=“UTF-8”> <HomePets> <Cat /> </HomePets> Or <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. <tagattributeName=“attrbute-value“ … > </tag> 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. <?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 http://en.wikipedia.org/wiki/XML_schema

48. XML-based Layout

49. XML-based Layout • An XML‐based layout is a specification of the various UIcomponents (widgets) and the relationships to each other – and to their containers – allwritten 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 • Viewis the base class for widgets, which are used to create interactive UI components (buttons, text fields, etc.) • The ViewGroupsubclass is the base class for layouts, which are invisible containers that hold other Views (or other ViewGroups)