VIEW SYSTEM Roberto Beraldi View Users interact with an - - PowerPoint PPT Presentation

VIEW SYSTEM

Roberto Beraldi

View

• Users interact with an application mostly through a

Graphical User Interface (GUI)

• (Other means include: voice, sounds, etc.)
• GUI is a graphical drawing of one or more graphical
• bjects
• Wiews are the basic building block to be drawn
• Each view has a rectangular shape and knows how to

draw itself. In addition, it responds to external events generated by the user, e.g. push a button

• There are a lot of predefined views in the form of widgets

View

• Android Studio has a powerful tool to draw views on

different virtual devices and to help designing GUI

• (Predefined) Views can be defined through an XML file or

programmatically

• Each view has an id (android:id=+id/name)
• This way the view can be retrieved through the method
• findViewById(R.id.name)
• The returned view should be casted to the specific view

View group

• A ViewGroup is a special invisible view that contains other

views (called children)

• Example of view group
• Layouts
• Contains other views organized in different way
• AdapterView
• Used to display Views generated by an Adapter that takes data from

some data source, e.g., an array

• For example ListView and ListAdapter
• RadioGroup

Basic widgets: label

Basic widgets: button

A Button widget allows the simulation of a clicking action on a GUI Demo

Basic widget: images

• ImageView and ImageButton are two Android widgets that

allow embedding of images in your applications.

• Both are image-based widgets analogue to TextView and

Button, respectively.

• Each widget takes an android:src or android:background

attribute (in an XML layout) to specify what picture to use.

• Pictures are usually reference a drawable resource.
• ImageButton, is a subclass of ImageView. It adds the standard

Button behavior for responding to click events.

Images

Basic widgets: EditText

Basic widgets: EditText

• In addition to the standard TextView properties, EditTex

thas many others features such as:

• android:autoText, (true/false) provides automatic spelling

assistance

• android:capitalize, (words/sentences) automatic capitalization
• android:digits, to configure the field to accept only certain digits
• android:singleLine, is the field for single-line / multiple-line input
• android:password, (true/false) controls field’s visibility
• android:numeric, (integer, decimal, signed) controls numeric

format

• android:phonenumber, (true/false) Formatting phone numbers

Basic widgets: EditText

AutoCompletTextView

Common Operation on a view

• 1.Set properties: for example setting the text of a TextView.

Properties that are known at build time can be set in the XML layout files.

• 2.Set focus: The framework will handled moving focus in

response to user input. To force focus to a specific view, call requestFocus().

• 3.Set up listeners: Views allow clients to set listeners that will

be notified when something interesting happens to the view. For example, a Button exposes a listener to notify clients when the button is clicked.

• 4.Set visibility: You can hide or show views using

setVisibility(int).

Example (Simple Tip)

Some example of layouts

Displaying a layout

• Views are organized as a tree
• The root element contains a set of view, some of which can be view

containers

• Displaying a view requires two passages
• Collecting the dimension of the child
• Drawing itself….(each view draws itself on a Canvas, i.e., it

implements the onDraw(Canvas c) method)

• To force a view to draw itself one has to call the invalidate() method

What is an XML layout?

What is an XML layout

• Each XML file contains a tree of elements specifying a

layout of widgets and containers that make up one View.

• The attributes of the XML elements are properties,

describing how a widget should look or how a container should behave.

• Example:
• If a Button element has an attribute value of
• android:textStyle= "bold"
• that means that the text appearing on the face of the button should

be rendered in a boldface font style.

What is an XML layout?

• The root element needs to declare the Android XML namespace

xmlns:android=http://schemas.android.com/apk/res/android

• All other elements will be children of the root and will inherit that

namespace declaration.

• Suppose we add a Button in the layout..
• Because we want to reference this button from our Java code, we need

to give it an identifier via the android:id attribute.

• The remaining attributes are properties of this Button instance:
• android:text indicates the initial text to be displayed on the button face (in this case,

an empty string)

• android:layout_width and android:layout_height tell Android to have the button's

width and height fill the "parent“ container, in this case the entire screen.

Layouts

• Frame, Linear, Relative, Table
• FrameLayout
• FrameLayout is the simplest type of layout object. It's basically a

blank space on your screen that you can later fill with a single

• bject —for example, a picture that you'll swap in and out.
• All child elements of the FrameLayout are pinned to the top left

corner of the screen; you cannot specify a different location for a child view.

• Subsequent child views will simply be drawn over previous ones,

partially or totally obscuring them (unless the newer object is transparent).

Layouts

• Generally, complex UI designs result from the

combination of simpler nested boxes that show their inner pieces using a horizontal or vertical orientation

Linear layout

LinearLayout aligns all children in a single direction — vertically or horizontally depending on the android:orientation attribute. All children are stacked one after the other, so a

• vertical list will only have one child per row, no matter how

wide they are, and a

• horizontal list will only be one row high (the height of the

tallest child, plus padding). A LinearLayout respects margins between children and the gravity(right, center, or left alignment) of each child.

Linear Layout

• LinearLayout is a box model –widgets or child containers

are lined up in a column or row, one after the next.

• To configure a LinearLayout, you have five main areas of

control besides the container's contents:

• orientation,
• fill model,
• weight,
• gravity,
• padding ,
• margin

Linear layout (fill model)

Linear layout (fill model)

Linear layout (fill model)

Linear layout (weight)

Linear layout (gravity)

Linear layout (padding)

Linear layout (padding)

Linear layout (padding)

Table layouts

1.TableLayout positions its children into rows and columns. 2.TableLayout containers do not display border lines. 3.The table will have as many columns as the row with the most cells. 4.A TableRow object defines a single row in the table.

• 5. A row has zero or more cells, each cell is defined by any

kind of other View. 6.A cell may also be a ViewGroup object

Table layout (example)

Relative layout

1.RelativeLayoutlets child views specify their position relative to the parent view or to each other(specified by ID). 2.You can align two elements by right border, or make one below another, centered in the screen, centered left, and so on. 3.Elements are rendered in the order given, so if the first element is centered in the screen, other elements aligning themselves to that element will be aligned relative to screen center. 4.Also, because of this ordering, if using XML to specify this layout, the element that you will reference (in order to position

• ther view objects) must be listed in the XML file before you refer

to it from the other views via its reference ID.

Relative layout

Relative layout

Relative layout

Relative layout

Other view groups

• Other two important ViewGroup are
• Selection widgets
• Radio Group
• Checkbox
• TimePicker
• DatePicker
• AdapterView
• Define a container where a set of data has to be displayed
• Each view of the data is created by an Adapter
• There are predefined adapter
• Custom adapters
• Implements methods like getView(…)

example: checkbox

example: checkbox

Example of checkbox

Example of checkbox

example: radio buttons

Example: radio buttons

Example

Example

Example

FlagQuizGame (demo) *

(*): Credits: Deitel and Deitel, «Android for Programmers: An App-Driven Approach»

Table laoyout 3,6,9 Buttons inserted programmatically ImageView Options

FlagQuizGame (data structure)

• fileNameList:
• List containing the total number of File Name
• File name is Europe-Italy.png
• quizCountryList
• 10 names of country to guess taken at random from the previous

list

• regionMap
• <Name,Boolean> HashMap saying if a region is to be included or

not

• totalNumberOfGuess (int)
• totalCorrectAnswers (int)

FlagQuizGame (Main Methods)

• ResetQuiz
• Reset the counters
• Pick 10 names at random from enabled regions
• loadNextFlag
• Load the first (position 0) flag from fileNameList
• Shuffle fileNameList
• Put the correct answer to the end of such a list
• Prepare the botton in the table
• Replace a button at random with the correct answer
• submitGuess
• Check if the answer is correct
• 2 Menu listeners
• To set up enabled regions
• To set the difficulty level

AdapterView and Adapter

• AdapterView is a special container of views generated by

an Adapter

• There are a set of predefined adapter
• A programmer can define its own adapter

ListView and ListActivity (demo)

GridView (demo)

2D Graphic: extending a View

• User can define its own View to draw specific graphical
• bjects on a Canvas
• Canvas are used to draw a Bitmap
• This is achieved extending the View class
• The system provides the canvas when it calls onDraw(Canvas c) method

implemented by the class that extends View

• This is good for infrequent updates (no additional thread is

required)

• To force draw the app can call invalidate() (on the UI-thread)
• If another thread is created, then the View’s postInvalidate() method

should be called

MotionEvents

• Created when fingers touch the screen or move
• Delivered to the appropriate listener
• In case of complex movements they generate a gesture
• A motion event contains
• Action Code (state change that occurred)
• UP,MOVE,DOWN
• Action values
• Position, time, etc-

Multitouch

• The screen is sensible to multiple touches at the same

time

• Each finger is called a pointer and it receives a unique ID

as long as it is active

• Touch events from different fingers are grouped together

inside a single MotionEvents object

• Each pointer gets an index within the event (may change
• ver time) which is not the same of the pointer ID
• It is used as index to data structure to get specific data

Some Action Code

• ACTION_DOWN
• The first finger touches the screen
• ACTION_POINTER_DOWN
• Another finger touches the screen
• ACTION_POINTER_UP
• One of the finger doesn’t touch the screen anymore
• ACTION_MOVE
• Some finger moves
• ACTION_UP
• The last finger leaves the screen

Some method

• getActionMasked()
• The the action associate to the event
• getAction()
• The action code AND the pointer
• getActionIndex()
• The index of the finger the caused the action
• getPointerCount()
• Number of pointers associated to the event
• getX(..),getY(..)

Example (MotionEvent)

Example (SimpleDraw)

2D Graphic: SurfaceView and animation

• The other option is to extend SurfaceView
• Used for fast movement
• Application gets a reference to a Surface, which is a low-level

drawing area

• In addition, programmer should provide a secondary thread inside

which drawing operations are performed

• The class should implement the SurfaceHolder.Callback

Interface

• Defines lifecycle methods called when the surface changes
• To setup the view getHolder() method must be called. It returns a

SurfaceHolder

• In addition, callbacks methods should be registered using the

addCallback() SurfaceHolder’s method

Surface

• The lifecycle of a Surface is determined by the following 3

methods (called from the GUI thread):

• surfaceCreated(…)
• surfaceChanged(…)
• surfaceDestroyed(..)
• To draw on the surface its required to:
• Acquire a lock on the underlying canvas object
• SurfaceHolder.lockCanvas()
• Draw
• Canvas.drawBitmap()
• Unlock the canvas
• SurfaceHolder.unlockCanvasAndPost()

Example (SurfaceView)

Animation: Property animation

• Programmatically or XML file
• Creates an animation by modifying an object’s property

values over a set period with an Animator

• ObjectAnimator:
• set the value of a property of an object
• Uses an interpolator to determine the amount of animation at a

given time

• Using XML file the android:PropertyName attribute corresponds to

a setName method implemented in the object

Property animation (demo)

Animation: View animation

• Tween animation
• Creates an animation by performing a series of transformations on

a single Image with an Animation

• Resizing, rotation, translation,alpha
• Frame by frame animation
• Shows a sequence of images in order with an AnimationDrawable

TweenAnimation (demo)