Android Programming Lecture 3 Testing notes File Structure, Layout

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

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)

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

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

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

File Structure Java files

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)

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)

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

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

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

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

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)

Structured Resources

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

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

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)

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

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

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.

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

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

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.

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/

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/

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/

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/

Reading Highly recommended: Android Developer: App Resources http://developer.android.com/guide/topics/resources/over view.html

Review of XML

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 ** http://en.wikipedia.org/wiki/XML

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>

the document, expressed 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

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>

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?

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>

<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

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 http://en.wikipedia.org/wiki/XML_schema

XML-based Layout

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.

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)

ViewGroup1 (Container)

ViewGroup1 (Container)

ViewGroup1 (Container)

Layout Linear Layout Table Layout Relative Layout Absolute Layout Frame Layout ScrollView Layout

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

Demo

Try this by yourself at home

Attributes of Linear Layout http://www.tutorialspoint.com/android/android_user_interface_layouts.html

Explore this site for different UI widgets for their XML tags and attributes http://www.tutorialspoint.com/android

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.

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

Table Layout

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.

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 android:layout_below=“@+id/loginAreaTextField” to the EditField would place the EditField below the TextField “Login Area”

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

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

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

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

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.

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?