Week 4
▪ Views, ViewGroups, Layouts, Layout.Params
▪ Creating UIs
in XML and Java
▪ Layout Types, ConstraintLayout
▪ Calculator Apps
▪ Styles, Themes,
Material Design
▪ Action Bar vs. App Bar
FIT2081 – Mobile Application Development Stephen Huxford FIT, Clayton
1
▪ Views, ViewGroups, Layouts, Layout.Params
2
FIT2081 Mobile Application Development – Stephen Huxford, FIT, Clayton
Views, ViewGroups, Layouts, LayoutParams
▪ Android UIs
– Are made up of a hierarchy of View objects
▪ View
– Package:android.view.View
– “Thisclassrepresentsthebasicbuildingblockforuserinterface components. A View occupies a rectangular area on the screen and is responsible for drawing and event handling. 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) and define their layout properties.”
▪ ViewGroup
– Package:android.view.ViewGroup
– “A ViewGroup is a special view that can contain other views (called children.) The view group is the base class for layouts and views containers. This class also defines [nests] the ViewGroup.LayoutParams class which serves as the base class for layouts parameters.”
See: https://developer.android.com/reference/packages.html
Source: https://developer.android.com/reference/android/view/View.html
See: https://developer.android.com/reference/packages.html
Source: https://developer.android.com/reference/android/view/ViewGroup.html
3
FIT2081 Mobile Application Development – Stephen Huxford, FIT, Clayton
ViewGroup, ViewGroup.LayoutParams
▪ ViewGroups
– Allow Views to be nested which means they can be represented as a
hierarchy (upside down tree)
• Think HTML and XML
– This tree, in an Android UI, is usually headed by a special kind of ViewGroup called a Layout
▪ ViewGroup.LayoutParams
– “LayoutParams are used by views to tell their parents how they want to be laid out. See ViewGroup Layout Attributes for a list of all child view attributes that this class supports.
– The base LayoutParams class just describes how big the view wants to be for both width and height. For each dimension, it can specify one of:
• FILL_PARENT (renamed MATCH_PARENT in API Level 8 and higher), which means that the view wants to be as big as its parent (minus padding)
• WRAP_CONTENT, which means that the view wants to be just big enough to enclose its content (plus padding)
• an exact number
– There are subclasses of LayoutParams for different subclasses of ViewGroup. For example, AbsoluteLayout has its own subclass of LayoutParams which adds an X and Y value.”
A Layout is responsible for managing the size, position and behaviour of all the Views (e.g. widgets) it contains
Source: https://developer.android.com/reference/android/view/ViewGroup.LayoutParams.html
4
FIT2081 Mobile Application Development – Stephen Huxford, FIT, Clayton
LayoutParams
▪ Layout Parameters
– “XML layout attributes named layout_something define layout parameters for the
View that are appropriate for the ViewGroup in which it resides.
– Every ViewGroup class implements a nested class that extends ViewGroup.LayoutParams. This subclass contains property types that define the size and position for each child view, as appropriate for the view group. As you can see in figure 1, the parent view group defines layout parameters for each child view (including the child view group).”
“These [layout] attributes are specified with the rest of a view’s normal attributes (such as background, but will be parsed by the view’s parent and ignored by the child.”
Source: https://developer.android.com/guide/topics/ui/declaring-layout.html
5
FIT2081 Mobile Application Development – Stephen Huxford, FIT, Clayton
Source: here
▪ Creating UIs
in XML and Java
6
FIT2081 Mobile Application Development – Stephen Huxford, FIT, Clayton
Creating UIs
▪ 2 Ways to create a UI
Note: “layout” (small l) in this quote refers to the entire UI not just the ViewGroup that encloses it.
– “A layout defines the visual structure for a user interface, such as the UI for an activity or app widget. You can declare a layout in two ways:
• Declare UI elements in XML. Android provides a straightforward XML vocabulary that corresponds to the View classes and subclasses, such as those for widgets and layouts.
• Instantiate layout elements at runtime. Your application can create View and ViewGroup objects (and manipulate their properties) programmatically.
– The Android framework gives you the flexibility to use either or both of these methods for declaring and managing your application’s UI. For example, you could declare your application’s default layouts in XML, including the screen elements that will appear in them and their properties. You could then add code in your application that would modify the state of the screen objects, including those declared in XML, at run time.”
Source: https://developer.android.com/guide/topics/ui/declaring-layout.html
7
FIT2081 Mobile Application Development – Stephen Huxford, FIT, Clayton
Java and XML
▪ Java or XML?
– “The advantage to declaring your UI in XML is that it enables you to better separate the presentation of your application from the code that controls its behavior. Your UI descriptions are external to your application code, which means that you can modify or adapt it without having to modify your source code and recompile. For example, you can create XML layouts for different screen orientations, different device screen sizes, and different languages. Additionally, declaring the layout in XML makes it easier to visualize the structure of your UI, so it’s easier to debug problems. As such, this document focuses on teaching you how to declare your layout in XML. If you’re interested in instantiating View objects at runtime, refer to the ViewGroup and View class references.”
▪ Java XML
– “In general, the XML vocabulary for declaring UI elements closely follows the structure and naming of the classes and methods, where element names correspond to class names and attribute names correspond to methods. In fact, the correspondence is often so direct that you can guess what XML attribute corresponds to a class method, or guess what class corresponds to a given XML element. However, note that not all vocabulary is identical. In some cases, there are slight naming differences. For example, the EditText element has a text attribute that corresponds to EditText.setText().”
Source: https://developer.android.com/guide/topics/ui/declaring-layout.html
8
FIT2081 Mobile Application Development – Stephen Huxford, FIT, Clayton
Java and XML
▪ How to create a UI in Java (no XML required)
– CheckouttheJavaLayoutapp
• Downloadable from Moodle
• Note the difference between how widget properties (internal to the widget) and layout parameters (specified on widget but processed by parent) are set
▪ Basic Procedure – Foreachwidget
• Instantiate and customise by setting its properties usually using setPropName methods
• Instantiate a LayoutParams object for the widget
– Type depends on containing layout (e.g. RelativeLayout.LayoutParms)
– Use constructor and addRule method to specify the size, position and behaviour of the widget in the containing layout
• Instantiate the Layout of the required type
• Use Layout’s addView method to add widget (as 1st parameter of addView) and specify its associated LayoutParams object (as a 2nd parameter of addView)
9
FIT2081 Mobile Application Development – Stephen Huxford, FIT, Clayton
LayoutParams
▪ View Properties and LayoutParams
– Properties
• Belong to the View object’s Class
• e.g. TextViews have a setPadding methods which sets a TextView’s padding (something internal to the View)
– LayoutParams
• Belong to the Class of the Layout a View is contained by
• e.g. all LayoutParam classes that are subclasses of MarginLayoutParam (itself a direct subclass of ViewGroup.LayoutParams) have a method setMargins which sets a contained View’s margins (a relationship between views contained by the same container)
▪ Look the same as properties in XML
– Except their names start like android:layout_
▪ Are handled very differently in Java code – See previous and next slide
10
FIT2081 Mobile Application Development – Stephen Huxford, FIT, Clayton
Java and XML
* e.g. TextView: attribute android:hint,
method setHint(…) and getHint()
▪ Correspondence between Java and XML – Example
– CheckoutJavaVsXML
• Downloadable from Moodle
– View Properties are often straightforward
• XML: widget attribute: android:text=“…”
• Java: widget method : .setText(…);
• Conversion from dp/sp to pixels is required in code for some method parameters
– View Layout parameters are a bit complicated in code
• e.g. the layout instruction is a rule (boolean or refers to sibling)
– XML: widget attribute: android:layout_centerHorizontal=”true”
– Java: Rule added to widgets’s LayoutParams: .addRule(RelativeLayout.CENTER_HORIZONTAL)
• e.g. the layout instruction is not a rule (i.e. requires parameters)
– XML: widget attribute: android:layout_marginBottom=”20dp“
– Java: widget method: setMargins(0, 0, 0, dpToPxConversion)
– Note: RelativeLayout.LayoutParams inherits setMargins from its direct super class ViewGroup.MarginLayoutParams
11
FIT2081 Mobile Application Development – Stephen Huxford, FIT, Clayton
View Doco – Properties and LayoutParams
▪ View Properties
– Go to the View’s API class reference page (e.g. TextView)
• Use the search box on https://developer.android.com/index.html
• Remember such pages are topped by summary tables with links to more details way below
– Table of XML attributes (beware inherited XML attributes)
• This is for attribute equivalents to View properties NOT View LayoutParams
• Beware ctrl + f will not work if the attribute is inherited (e.g. onClick)
– Not until you expand the inherited section and refresh the ctrl + f search box
– Table of Java Methods (beware inherited Java methods) • To set and get a View’s property values
▪ View Layout Params
– Depends on which type of Layout the View will be contained by
– Go to the relevant LayoutParams page (e.g. RelativeLayout.LayoutParams)
– Table of XML attributes (beware inherited XML attributes)
• Use as XML attributes or in Java code add to the View’s associated LayoutParams object
using that objects addRule method
– Table of Java Methods (beware inherited Java methods) • Apply directly to the View’s associated LayoutParms object
12
FIT2081 Mobile Application Development – Stephen Huxford, FIT, Clayton
▪ Layout Types,
▪ ConstraintLayout
13
FIT2081 Mobile Application Development – Stephen Huxford, FIT, Clayton
Layouts Types
▪ ViewGroup
– Has several Layout direct subclasses
• e.g. CoordinatorLayout, FrameLayout, GridLayout, LinearLayout, RelativeLayout
– Has several Layout indirect subclasses
• e.g. TableLayout
– Which Layout type to use depends on the requirements of the UI you are trying to create
– Don’t forget since a ViewGroup is a View a ViewGroup can be contained by another ViewGroup
• So Layouts can be nested to optimise each part of your UI
• Google strongly recommends against nesting deeply for efficiency and clarity reasons
– This is one reason Google have introduced ConstraintLayout (see below) ▪ In addition: View containers
– There are many direct and indirect View container subclasses that can be part of a UI’s View hierarchy (e.g. Toolbar)
▪ In addition: ConstraintLayout
– A new direct subclass found in the support library
• Use SDK Manager to download the Android Support Repository, specifically, the “ConstraintLayout for Android” and the “Solver for ConstraintLayout” libraries
• Edit Gradle scripts to include the necessary dependencies
See: https://www.tutorialspoint.com/android/android_user_interface_layouts.htm
14
FIT2081 Mobile Application Development – Stephen Huxford, FIT, Clayton
ConstraintLayout
▪ Requirements
– “ConstraintLayout is available in an API library that’s compatible with Android 2.3 (API level 9) and higher, and the new layout editor is available in Android Studio 2.2 and higher”
▪ ConstraintLayout.LayoutParams
– As usual for a Layout class ConstraintLayout contains a nested class ConstraintLayout.LayoutParams descended fromViewGroup.LayoutParams
• This class contains mostly fields (instance variables) whose values allow a View to specify its size, position and behaviour wrt the containing ConstraintLayout
▪ Going forward
– From the doco and the effort Google has spent updating the Layout Editor to support ConstraintLayout it can be deduced it’s intended to replace many of the existing Layout types
• It does away with the need for deeply nested Layouts for a start but can also creates very fluid layouts
15
FIT2081 Mobile Application Development – Stephen Huxford, FIT, Clayton
ConstraintLayout
▪Basically like a RelativeLayout but
– Views are attached to the layout sides or horizontal and vertical guidelines (like virtual layout sides) and other Views by software analogues of springs
– These springs can expand and collapse depending of the viewport of the device they are being displayed on (including its current orientation)
– The tension on springs holding a View between two endpoints can be biased towards one end by a percentage
– Hard margins can be specified at the end point of each spring
– There a lot more …
16
FIT2081 Mobile Application Development – Stephen Huxford, FIT, Clayton
▪ Calculator Apps
17
FIT2081 Mobile Application Development – Stephen Huxford, FIT, Clayton
What You Should Understand
▪ Layout
– Everything
USE ANDROID DOCO IF YOU DON’T UNDERSTAND
– If you do not know the meaning of an attribute (layout_ or otherwise look it up in the doco)
• e.g. android:stretchColumns
– Just a reminder professional developers do not like using onClick
• They prefer to create a listener containing an event handler and registering the listener to whatever objects is clicked to separate presentation and logic
• No need for you to do this at the moment
▪ Activity Class – Everything
– Including
• The algorithm being used
• The DecimalFormat class
• Double.NaN
• A TextView’s setText and getText methods require and return a CharSequence respectively (it’s an interface type)
– It’s an indirect subclass of String so you can supply a String to setText
– If you need the result returned by getText to do something “Stringy” use the toString on the CharSequence value returned first
18
FIT2081 Mobile Application Development – Stephen Huxford, FIT, Clayton
▪ Styles
▪ Themes
▪ Material Design
19
FIT2081 Mobile Application Development – Stephen Huxford, FIT, Clayton
Styles
▪ Definition
– “A style is a collection of attributes that specify the look and format for a View or window. A style can specify attributes such as height, padding, font color, font size, background color, and much more. A style is defined in an XML resource that is separate from the XML that specifies the layout.
Source: https://developer.android.com/guide/topics/ui/themes.html
20
FIT2081 Mobile Application Development – Stephen Huxford, FIT, Clayton
Styles
Source: https://developer.android.com/guide/topics/ui/themes.html
▪Style Inheritance
– “The parent attribute in the