1
Q
Building User Interfaces:
Important Topics
A
- Density-Independent UI Design
- Using Views and Layouts
- Optimizing Layouts
- Working with Lists and Grids
- Using Recycler View and Adapters
- Data Binding
- Extending, grouping, creating and using Views
2
Q
Major Design Topics
that influence Material Design
A
User Interface (UI) design
User Experience (UX)
Human Computer Interaction (HCI)
*These are not covered in depth in this book
3
Q
Density-Independent Design:
Basics
A
- The number of pixels available varies wildly depending on hardware
- This can be abstracted away by thinking in terms of Density-Independent Pixels (dp)
- these represent physical sizes
- UI elements with the same dp size will appear the same size on a screen regardless of the pixel density of the screen
- For font sizes, we use Scalable Pixels(sp)
- Shares same base density independence as dp
- also scaled independently based on user’s preferred text size
- Android 5.0(API 21) and up, supports Vector Drawables - scalable to support any display density
- Making designs density independent allows you to focus on optimizing and adapting designs for different screens
4
Q
Density-Independent Design:
Fundamental Features
in Android that support it
A
- Density-Independent Pixels (dp)
- Scalable Pixels (sp)
- Support for device-independent Vector Drawables
5
Q
Android User Interface:
Basic Components
A
- Views
- Also referred to as “controls” or “widgets”
- Pretty much all visual components in Android
- Can draw their own customized UI
- Can handle user interactions
- Base ‘View’ class
- View Groups
- Base ‘ViewGroup’ class
- An extension of View that supports adding child Views
- Responsible for sizing and positioning child Views
- View Groups that focus primarily on laying out child Views are called “layouts”
6
Q
Android User Interface:
Assigning User Interface to an Activity
A
- To set the UI of an Activity, use setContentView()
- Pass in the View Instance or layout resource to display
- Typically done in the onCreate() handler
- Example:
- setContentView(R.layout.main);
7
Q
Layouts:
Most Commonly Used Layouts
A
FrameLayout
LinearLayout
RelativeLayout
ConstraintLayout
8
Q
Layouts:
FrameLayout
Summary
A
- Simplest of the Layout Managers
- Pins each child View within its frame
- Default position is the top-left corner
- Can use the “layout_gravity” attribute on a child View to alter its location
- Adding multiple children stacks each new child on top of the one before, with each new View potentially obscuring the previous ones
9
Q
Layouts:
LinearLayout
Summary
A
- Aligns child Views in either a vertical or horizontal line - column, or row
- LinearLayout supports a “layout_weight” attribute for each child View that can control the relative size of each child View within the available space
10
Q
Layouts:
RelativeLayout
Summary
A
- One of the most flexible of the native layouts
- But, potentially expensive to render
- Lets you define the positions of each child View relative to the others, and to the layout’s boundaries
11
Q
Layouts:
ConstraintLayout
Summary
A
- Newest( and recommended) layout
- Designed to support large and complex layouts without the need to nest layouts
- Similar to the Relative Layout, but provides greater flexibility and is more efficient to lay out.
- Constraint Layout positions its children through a series of constraints
- requiring child Views to be positioned according to a boundary, other child Views, or to custom guidelines
- Has its own Visual Layout Editor, used to position each control and define the constraints rather than relying on manually editing XML.
- Available through the Constraint Layout package of the Android Support Library, making it backward compatible
12
Q
Layouts:
How layouts are sized
A
- Each layout can scale to fill a screen, or whatever container it is in
- This is done by avoiding the use of absolute positions or predetermined pixel values
- This makes them well suited for designing UIs that work on a variety of devices
- Need to set the attributes:
- android:layout_width
- android:layout_height
- Dynamic values are:
- “match_parent”
- “wrap_content”
13
Q
Defining Layouts:
XML Layout Basics
A
- Using XML external resources is preferred
- Must have a single root element, such as <linearlayout></linearlayout>
- The layout node has several attributes assigned
- The attributes modify the way in which all child nodes will be positioned
- There are many predefined constants for the attributes that can be used
- The root node can have an arbitrary number of child nodes, including other layouts
14
Q
Layouts:
Constants:
match_parent
A
Used with width and height generally.
Expands the View to match the available space within the parent View, Fragment or Activity
15
Q
Layouts:
Constants:
wrap_content
A
Generally used with width and height.
Sets the size of a View to the minimum required to contain the contents it displays,
such as the height required to display a wrapped text string.
16
Q
Optimizing Layouts:
General Tips
A
- Avoid redundant layouts
- Such as nesting Layout nodes
- Tip: for a set of child nodes defined in another file, use the <merge></merge> tag
- Avoid using excessive Views
- Takes additional time and resources
- Tip: In a complex layout, use a ViewStub to stop some child views from being inflated until they are needed
- Use the Lint tool to analyze your layouts
- It can detect optimization issues
17
Q
Optimizing Layouts:
<merge></merge> tag
A
- Used when one layout file will be added to another
- Instead of using one of the Layouts for a root node, the file uses the <merge></merge> tag as the root node
- When this sublayout is added to another, the <merge></merge> tag is removed and its Child Views are added directly to the new parent
- The parent uses the <include></include> tag as it would with any other include
18
Q
Optimizing Layouts:
<include></include> tag
A
- Used to insert the contents of one layout file into another
- The root node of the included file is added as a Child View (unless <merge></merge> tag is used)
- Need to assign an id to the new child view
- Use:
- <include></include>
19
Q
Optimizing Layouts:
ViewStub
A
- Useful for reducing the number of Views inflated at a time
- Views in the stub not created until they are required
- Works like a lazy include-
- a stub represents a subset of child Views within the parent layout
- Only inflated when stub is inflated
- Only inflated explicitly via the “inflate” method or when it is made visible
20
Q
Android Widget Toolbox:
Most Common Controls/Views
(12)
A
- TextView
- EditText
- ImageView
- VideoView
- Toolbar
- ProgressBar
- RecyclerView
- ViewPager
- Button
- ImageButton
- CheckBox
- RadioButton
21
Q
Android Widget Toolbox:
Common Controls:
TextView:
Basic Function
A
A standard, read-only text label.
Supports multiline display, string formatting and automatic word-wrapping.
22
Q
Android Widget Toolbox:
Common Controls:
EditText:
Basic Function
A
An editable text entry box.
Accepts multi-line entry, word-wrapping, and hint text.
23
Q
Android Widget Toolbox:
Common Controls:
ImageView:
Basic Function
A
A View that shows a single image.
24
Q
Android Widget Toolbox:
Common Controls:
Toolbar:
Basic Function
A
A View that shows a title and common actions.
Often used as the main app bar at the top of an Activity.
25
Android Widget Toolbox:
Common Controls:
ProgressBar:
Basic Function
A View that shows either an indeterminate progress indicator( a spinning circle),
or a horizontal progress bar.
26
Android Widget Toolbox:
Common Controls:
RecyclerView:
Basic Function
A View Group that manages displaying a large number of Views in a scrolling container.
Supports a number of layout managers that allow you to lay out Views as vertical and horizontal lists, or a grid.
27
Android Widget Toolbox:
Common Controls:
Button:
Basic Function
A standard, interactive push button.
28
Android Widget Toolbox:
Common Controls:
ImageButton:
Basic Function
A push button,
for which you can specify a customized background image.
29
Android Widget Toolbox:
Common Controls:
CheckBox
Basic Function
A two-state button represented by a checked or unchecked box.
30
Android Widget Toolbox:
Common Controls:
RadioButton:
Basic Function
A two-state, grouped button.
A group of these presents the user with a number of possible options, of which only one can be enabled at a time.
31
Android Widget Toolbox:
Common Controls:
VideoView:
Basic Function
Handles all state management and display Surface configuration for playing videos more simply from within your Activity.
32
Android Widget Toolbox:
Common Controls:
ViewPager:
Basic Function
Implements a horizontally scrolling set of Views.
The View Pager allows users to swipe or drag left or right to switch between different Views.
33
Recycler View:
Important Components
* RecyclerView itself
* Layout Manager
* Controls how items are displayed
* Adapter
* Creates and inflates individual Views
* Creates View Holders to bind to View elements
* View Holders
* Managed by the Adapter
* Basically "slots" for Views
* Views
* Display individual data items
34
Recycler View:
3 Important Layout Managers
* LinearLayoutManager
* GridLayoutManager
* StaggeredGridLayoutManager
35
Recycler View:
Layout Managers:
Overview
* Layout Managers control how each item in a Recycler View is displayed.
* There are a number of Layout Managers available.
* Responsible for determining WHEN a view can be safely recycled
* Can be assigned either in XML or programmatically
36
Recycler View:
Layout Managers:
**LinearLayoutManager**
Brief Summary
Lays out items in a single vertical or horizontal list
37
Recycler View:
Layout Managers:
**GridLayoutManager**
Brief Summary
Similar to Linear Layout Manager, but displays a grid.
When laid out vertically:
each row can include multiple items, where each is the same height.
For horizontal orientation:
each item in a given column must be the same width.
38
Recycler View:
Layout Managers:
**StaggeredGridLayoutManager**
Brief Summary
Similar to the Grid Layout Manager,
but creates a "staggered" grid.
Each grid cell can have a different height or width,
with cells staggered to eliminate gaps.
39
Recycler View:
Adapter:
Two Major Roles
* Initial creation of the Views to display, including inflating the appropriate layout
* * Creation of the View Holders you'll use to "bind" the View elements to the underlying data source
40
Recycler View:
Adapter:
Overview
* The adapter handles the data binding
* Creates Views to display
* Creates View Holders to bind data to
* It manages View Holders
* The binding phase should be very lightweight
41
Recycler View:
View Holder
Summary
A View Holder stores the View to be displayed.
* It also allows the Adapter to store additional metadata and View references to simplify data binding.
* Ex: finding references to any child Views within an item layout
* Does not itself assign values from data to Views
* Role is to make the elements available so that the Adapter can bind data to them
42
Data Binding:
Purpose of the Data Binding library
Makes it possible to write declarative layouts that minimize the glue code needed to bind View elements to underlying data sources.
Does this by generating the code for you at compile time.
43
How to enable Data Binding
Data Binding is an optional library, it must be enabled in the application module's **build.gradle** file:
## Footnote
android {
databinding.enabled = true ...}
\*note: It is included in the Android Support library dependency (I think), so nothing has to be added to the dependencies node.
44
Data Binding:
How to apply Data Binding
* Once Data Binding is enabled....
* Wrap the elements of a layout file in a new ** **element
* This will cause a **Binding** class to be generated for the layout
* It includes each child element as a property that can be accessed directly
* The Binding class name is based on the layout file name
* In code, an instance of the Binding class can be obtained using **DataBindingUtil**
* Can now update Views through the Binding instance
45
Data Binding:
Create an instance of the
Binding class
Note: This is done INSTEAD of using the Activity's "setContentView" method to display the layout
* For full Activities/Layouts:
MyActivityBinding binding =
DataBindingUtil.**setContentView**(
this, R.layout.my\_activity);
* For Fragment Views or RecyclerView Items,
* use the Binding class's inflate method
MyActivityBinding binding =
MyActivityBinding.**inflate**(
inflator, viewGroup, false);
46
Data Binding:
Three ways to create a Binding class instance
* Inflate a view:
* DataBindingUtil.setContentView()
* MyBinding.inflate()
* Or create from an existing View using
* DataBindingUtil.bind(view)
* Make sure to cast to the right Binding class
47
Data Binding:
Variables :
Basics
* Allows you to add variables that can be used within the layout but set programmatically at runtime
* Add a **** element within the layout
* Declare variables within this element using the tag:
name="[name]" type="[some type]" />
48
Data Binding:
Variables:
Syntax for accessing some property of
a variable in layout file
@{myVariable.property}
49
Data Binding:
Variables:
Dealing with null values
* Pretty much any Java language syntax can be used within the referencing syntax
* Use the null-coalescing operator: **??**
* to provide a default value when no value has been set
* Ex:
* android:text='@{user.email **??**"No email" }'
50
Data Binding:
Variables:
When are variable values bound to the views?
* By default:
* bindings are applied after the next frame redraw
* This can cause a visible flicker on some views, such as Recycler View
* Can make it immediate:
* Call **executePendingBindings()** on the binding instance
51
Creating New Views:
Three Basic Approaches
Modify/Extend an Existing View
Create a Composite Control from several components
Create an entirely new Control/View
52
Creating New Views:
Modifying/Extending an Existing View:
Basics
* Approach used when an existing View already supplies most of the basic functionality required
* To modifiy behavior:
* Override existing Event Handlers
* Still call the superclass's handlers to keep existing functionality
* To modify appearance:
* Override the onDraw() method
53
Creating New Views:
Creating a Composite Control:
Basics
Combine several Views
to create atomic, reusable controls that leverage the functionality of several interconnected Views.
54
Creating New Views:
Creating an entirely new Control:
Basics
Done when you need a completely different interface that can't be obtained by changing or combining existing controls.
Need to implement sizing, and drawing of the control, as well as adding handlers to react to events.
55
Creating New Views:
Modifying an Existing View:
Constructor variations that should be overridden
* _Basic Constructor_
* Used when creating View in code
* Only takes Context parameter
* _Inflating_
* Used when inflating View from XML
* Parameters:
* Context
* AttributeSet
* _Inflating with Style_
* Used when inflating View from XML when it has a style attribute
* Parameters:
* Context
* AttributeSet
* StyleAttribute (integer)
56
Creating New Views:
Modifying an Existing View:
Basic Steps
* Create new class extending the existing View
* Override constructors
* Override Event Handlers to modify behavior
* Override onDraw() method to modify appearance
* Define Custom Attributes
57
Creating New Views:
Modifying an Existing View:
Defining custom attributes
* Can declare attributes for an application in the resource file:
* res/values/attrs.xml
* These attributes are global, so must have unique names
* Add an attribute using the **
58
Creating New Views:
Creating Compound Controls:
Basic Steps
* Extend a ViewGroup, usually a Layout
* Add child views, preferrably through an XML layout
* Override the constructor to inflate the new XML layout, or to instantiate the child controls
* Also within the constructor:
* "Hook up" the controls as necessary by overriding the event handlers associated with each component
59
Creating New Views:
Creating Custom Views:
Important Steps
* Creating a Visual Interface
* Sizing the Control
* Drawing the Control
* Implementing Behavior:
* Handling User Interaction Events
* Supporting Accessibility
60
Creating New Views:
Creating Custom Views:
Base Classes:
Two Base classes
View
SurfaceView
61
Creating New Views:
Creating Custom Views:
Base Classes:
View class
Provides a **Canvas** object with a series of **draw()** methods and **Paint** classes. Use them to create a visual interface with bitmaps and raster graphics.
Can override user events, including screen touches or key presses to provide interactivity.
Offers a powerful, lightweight solution when the View does not need to be graphics heavy.
62
Creating New Views:
Creating Custom Views:
Base Classes:
SurfaceView class
Better option for graphics heavy controls that are frequently updated(such as live video), or that display complex graphical information(such as games and 3D visualizations).
Provides a **Surface** object that supports drawing from a background thread, and optionally using **OpenGL** to implement graphics
63
Creating New Views:
Creating Custom Views:
Visual Interface:
Default visual interface
The base View class presents an empty 100x100 pixel square.
64
Creating New Views:
Creating Custom Views:
Visual Interface:
Methods that need to be overridden
* **_onMeasure(int wMeasureSpec, int hMeasureSpec)_**
* Called when the control's parent is laying out it's child controls
* Parameters specify the space that is available
* Pass the desired width and height into the **setMeasuredDimension(height, width)** method
* **_onDraw(Canvas canvas)_**
* Use a variety of Paint objects to "draw" onto the Canvas object
65
Creating New Views:
Creating Custom Views:
Visual Interface:
onMeasure():
Using the boundary parameters
widthMeasureSpec
heightMeasureSpec
* Both are passed in as integers for efficiency reasons
* These are not direct measurements
* Used to look up the MODE and SIZE of each
* MeasureSpec.getMode(mSpec);
* MeasureSpec.getSize(mSpec);
* the mode determines what size means:
* AT\_MOST : maximum space available, this view can choose its own size
* EXACTLY: exact size the control will occupy
66
Creating New Views:
Creating Custom Views:
Visual Interface:
Drawing the control:
Basics
* override the onDraw() method
* Android Canvas uses the "painter's algorithm" meaning new stuff is painted "over" old stuff
* There are a series of tools in the drawing APIs to help draw simple shapes, text and Drawables on the Canvas
* There are also a large variety of fills and pens in the Paint class
67
Creating New Views:
Creating Custom Views:
Handling User Interaction Events:
Common UI events to handle
* **_onKeyDown_**
* Called when any device key is pressed
* Includes D-pad, keyboard, hang-up, call, back and camera buttons
* **_onKeyUp_**
* Called when a user releases a pressed key
* **_onTouchEvent_**
* Called when the touch screen is pressed or released, or when it detects movement
68
Creating New Views:
Creating Custom Views:
Supporting Accessibility:
Overview
* Use the Accessibility APIs to provide alternate interaction methods for users with visual, physical, or ag-related disabilities that make it difficult to interact fully with a touch screen
69
Creating New Views:
Creating Custom Views:
Supporting Accessibility:
Checklist
* Ensure View is accessible and navigable using D-pad events
* Use Content Description attribute within layout definition to describe input widgets
* Implement the **AccessibilityEventSource** interface
* Broadcast **AccessibilityEvents** using the **sendAccessibilityEvent** method
* Note: the View class already implements this interface, so you only need to make adjustments necessary for your View's behavior
Professional Android
flashcards
Decks in class (10)
# Cards
-
Ch 1: Android Overview36
-
Ch 2: Getting Started84
-
Ch 3: Applications, Activities and Fragments74
-
Ch 4: Android Manifest13
-
Ch 4: Gradle Build11
-
Ch 4: Externalizing Resources36
-
Ch 5: Building User Interfaces69
-
Ch 6: Intents and Broadcast Receivers68
-
Important Libraries6
-
Ch 7: Using Internet Resources9
