Brainscape's Knowledge GenomeTM

Browse over 1 million classes created by top students, professors, publishers, and experts.


See full index

Professional Android > Ch 5: Building User Interfaces > Flashcards

Ch 5: Building User Interfaces Flashcards

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
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
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
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
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
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
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”
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
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);
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

Layouts:

Most Commonly Used Layouts

A

FrameLayout

LinearLayout

RelativeLayout

ConstraintLayout

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
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
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
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
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
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
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
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
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
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”
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
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
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
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
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
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
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
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>
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
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
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

Android Widget Toolbox:

Most Common Controls/Views

(12)

A
  • TextView
  • EditText
  • ImageView
  • VideoView
  • Toolbar
  • ProgressBar
  • RecyclerView
  • ViewPager
  • Button
  • ImageButton
  • CheckBox
  • RadioButton
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
23
Q

Android Widget Toolbox:

Common Controls:

ImageView:

Basic Function

A

A View that shows a single image.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
25
Q

Android Widget Toolbox:

Common Controls:

ProgressBar:

Basic Function

A

A View that shows either an indeterminate progress indicator( a spinning circle),

or a horizontal progress bar.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
26
Q

Android Widget Toolbox:

Common Controls:

RecyclerView:

Basic Function

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
27
Q

Android Widget Toolbox:

Common Controls:

Button:

Basic Function

A

A standard, interactive push button.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
28
Q

Android Widget Toolbox:

Common Controls:

ImageButton:

Basic Function

A

A push button,

for which you can specify a customized background image.

29
Q

Android Widget Toolbox:

Common Controls:

CheckBox

Basic Function

A

A two-state button represented by a checked or unchecked box.

30
Q

Android Widget Toolbox:

Common Controls:

RadioButton:

Basic Function

A

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
Q

Android Widget Toolbox:

Common Controls:

VideoView:

Basic Function

A

Handles all state management and display Surface configuration for playing videos more simply from within your Activity.

32
Q

Android Widget Toolbox:

Common Controls:

ViewPager:

Basic Function

A

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
Q

Recycler View:

Important Components

A
  • 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
Q

Recycler View:

3 Important Layout Managers

A
  • LinearLayoutManager
  • GridLayoutManager
  • StaggeredGridLayoutManager
35
Q

Recycler View:

Layout Managers:

Overview

A
  • 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
Q

Recycler View:

Layout Managers:

LinearLayoutManager

Brief Summary

A

Lays out items in a single vertical or horizontal list

37
Q

Recycler View:

Layout Managers:

GridLayoutManager

Brief Summary

A

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
Q

Recycler View:

Layout Managers:

StaggeredGridLayoutManager

Brief Summary

A

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
Q

Recycler View:

Adapter:

Two Major Roles

A
  • 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
Q

Recycler View:

Adapter:

Overview

A
  • 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
Q

Recycler View:

View Holder

Summary

A

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
Q

Data Binding:

Purpose of the Data Binding library

A

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
Q

How to enable Data Binding

A

Data Binding is an optional library, it must be enabled in the application module’s build.gradle file:

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
Q

Data Binding:

How to apply Data Binding

A
  • Once Data Binding is enabled….
  • Wrap the elements of a layout file in a new <layout> </layout>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
Q

Data Binding:

Create an instance of the

Binding class

A

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
Q

Data Binding:

Three ways to create a Binding class instance

A
  • 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
Q

Data Binding:

Variables :

Basics

A
  • Allows you to add variables that can be used within the layout but set programmatically at runtime
  • Add a <data></data> element within the layout
  • Declare variables within this <data> element using the tag:
    </data><ul>
    <li><strong><variable> <strong>name</strong>="[name]" <strong>type</strong>="[some type]" <strong>/&gt;</strong></variable></strong></li>
    </ul></data>
  • A set[Name] method will be added to the Binding class
  • Variables can be accessed within the layout file using the syntax:
    • @{name.classvariable}
48
Q

Data Binding:

Variables:

Syntax for accessing some property of

a variable in layout file

A

@{myVariable.property}

49
Q

Data Binding:

Variables:

Dealing with null values

A
  • 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
Q

Data Binding:

Variables:

When are variable values bound to the views?

A
  • 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
Q

Creating New Views:

Three Basic Approaches

A

Modify/Extend an Existing View

Create a Composite Control from several components

Create an entirely new Control/View

52
Q

Creating New Views:

Modifying/Extending an Existing View:

Basics

A
  • 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
Q

Creating New Views:

Creating a Composite Control:

Basics

A

Combine several Views

to create atomic, reusable controls that leverage the functionality of several interconnected Views.

54
Q

Creating New Views:

Creating an entirely new Control:

Basics

A

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
Q

Creating New Views:

Modifying an Existing View:

Constructor variations that should be overridden

A
  • 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
Q

Creating New Views:

Modifying an Existing View:

Basic Steps

A
  • 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
Q

Creating New Views:

Modifying an Existing View:

Defining custom attributes

A
  • 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 <declare-styleable></declare-styleable> tag, specifying an associated view for the name, then add <attr></attr> tags to declare each attribute
58
Q

Creating New Views:

Creating Compound Controls:

Basic Steps

A
  • 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
Q

Creating New Views:

Creating Custom Views:

Important Steps

A
  • Creating a Visual Interface
    • Sizing the Control
    • Drawing the Control
  • Implementing Behavior:
    • Handling User Interaction Events
    • Supporting Accessibility
60
Q

Creating New Views:

Creating Custom Views:

Base Classes:

Two Base classes

A

View

SurfaceView

61
Q

Creating New Views:

Creating Custom Views:

Base Classes:

View class

A

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
Q

Creating New Views:

Creating Custom Views:

Base Classes:

SurfaceView class

A

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
Q

Creating New Views:

Creating Custom Views:

Visual Interface:

Default visual interface

A

The base View class presents an empty 100x100 pixel square.

64
Q

Creating New Views:

Creating Custom Views:

Visual Interface:

Methods that need to be overridden

A
  • 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
Q

Creating New Views:

Creating Custom Views:

Visual Interface:

onMeasure():

Using the boundary parameters

A

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
Q

Creating New Views:

Creating Custom Views:

Visual Interface:

Drawing the control:

Basics

A
  • 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
Q

Creating New Views:

Creating Custom Views:

Handling User Interaction Events:

Common UI events to handle

A
  • 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
Q

Creating New Views:

Creating Custom Views:

Supporting Accessibility:

Overview

A
  • 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
Q

Creating New Views:

Creating Custom Views:

Supporting Accessibility:

Checklist

A
  • 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 (10 decks)

Brainscape helps you reach your goals faster, through stronger study habits.
© 2024 Bold Learning Solutions. Terms and Conditions