Monday, November 3, 2014

Coursera Graphics, Touch, Multimedia (week 6)

Graphics Part 1 Presentation and Slides

2D graphics, Static and Dynamic changing elements

ImageView , Canvas
Animate - Size, position, fading

Property animation

2D on display
  • Draw graphic to view (simple)
  • Canvas  (more powerful flexible) more complex, update it frequently
Drawable class
  • Bitmap, colors,
  • ShapeDrawable
  • BitMapDrawbable
  • ColorDrawable
Attach it ImageView

XML or programmatically

  • Simple image
  • Bubble Activity
XMLfile says relative with ImageView 250dp, centered
  • BubbleActivity
  • Set ContentView
  • Layout only outermost nothing inside
  • setImageDrawable
  • Layout properties
  • Dimens.xml file
  • RalativeLayout with rule
  • Sets props on imageview

  • Simple shapes
  • Subclass of Shape such as PathShape, RectShape, OvalShape
  • Cyan color and magenta colored, overlap, intersect has different color
  • ShapeDrawACtivity
XML file RelativeLayout w 2 imageviews, 250dp
Android.src in res/drawable directory

  • shapeDrawActivity
  • Relative layout
  • Width,height,padding
  • ShapeDrawable
  • Color, height, transparency
  • Sets padding
  • Aligns it programmatically
Drawing with canvas
Bitmap:matrix of pixels
Canvas- drawing to bitmap
Drawing primitive - Rect,Path,Text,BitMap
Paint object - colors, styles

Paint class - set syle parameters w thickness size, color, anti-aliasing (smooth out)

4 rectangles - difft size style, difft border width, style, background color

setContentView with XML file
LinearLayout - 4 children TexView
Color, Size,typeface
Background xml file in res/drawable where shape is rectangle with solid color

Paint affects Text Size LineWidth

Graphics Part 2 Presentation

Drawing with Canvas - underlying bitmap

generic view (less frequent to onDraw() method) or SurfaceView (frequent update)

CustomSurfaceView sublclass , GraphicCanvasBubble application - draw view and then infrequent updates to view, thread that wakes up moves view and redraws it
postInvalidate() - thinks must be redrawn, canvas draw method

CanvaswithSurfaceView - separate non UI thread, surface dedicated drawing area, extend SurfaceView implement SurfaceHolder.callback method
Setup surface view (surfaceView.getHolder() method to get SurfaceHolder, register for callbacks with addCallback method - surfaceCreated() method , surfaceChanged() method - size changed , surfaceDestroyed() method, create thread for drawing - get lock to canvas method , drawBitmap, unlock canvas ).


Graphics Part 3 Presentation

Simple kind animation so far changed properties, Size, position, etc


Left most cyan, fades into magenta
TransitionDrawable from shape_transition.xml
Transition contains 2 items
setImageDrawable on ImageView


Animates series of drawables
Splash screen, with images counting down  to final image
view_animation .xml
animation-list with item inside it
Sets imageView as background
onWindowFocusChanged method

- create animations which transformations made to contents of view
Bubble view, animate changes to bubble
Transformations fade in, rotate, move, change size, fade out
Some are at uniform pace while other do not
view_animation.xml in res/anim dir
Alpha , rotate, translate, scale,
onWindowFocusChanged method

Property Animation

More than property change son views here
Changing general propertiy changes over given time
ValueAnimator - time interpolator
Changes as function of time
AnimateUpdateListener - every anim change this is called
TypeEvaluator interface - class a property value at given pt in time

Aniimate color red rectangle appears and will change color , slowly turns blue

Starting and ending points of animation

Creates button starts animation

ValueAnimator object - ofObject method

onAnimationUpdate method

Calls start for animation

Same as graphics tween
ViewPropertyAnimator class

Property Animation system, if you need to animate your own custom classes, which one of the following classes would implement in order to compute the specific property values being animated - Type interpolator

Touch and Gestures Part1 Presentation and Slides

MotionEvent - actioncode is type of motion, time, which device came from, how hard pressed

FingerTouchEvent - touch screen

MultiTouch Device

- emit one movement trace per touch source

- each touch source pointer - unique id, group multiple pointer per motion event, group has index
- getsure event - ACTION_DOWN - started touch screen, ACTION_POINTER_DOWN, ACTION_POINTER_UP - one of fingers has stopped touching screen, ACTION_MOVE - fingers have changed position, ACTION_UP - fingers touching have stopped touching it, ACTION_CANCEL - premature cancelled gesture

rules - touch go down one time, in groups
getActionMasked() - action code w motion event
getActionIndex() - index of pointer associated with action code
getPointerId(id pointerIndex) given index stable id of pointer associated with that index
getPointerCount - number of pointers associated w moytion event
getX(pointerIndex) getY(pointerIndex) - coordinates of pointer stored at current index
findPointerIndex(int pointerId) index associated with current pointer id

Handling Touch Events on View

onTouchEvent method - process motion event
register to receive OnTouchListener
onTouch() called a touch event occurs, called before it delivers event to touched view, returns true if it consumes event, false otherwise

multiple touches combined to form a more complex gesture - double tap is example.

TouchIndicateTouchLocation app - draws circle where user touches screen


OnTouch() - looks at actioncode


Touch and Gestures Part2 Presentation

GestureDetecture - common gestures, single tap, double tap, drag

- OnGestureListener
OnTouchEvent - touched , must be overridden

TouchGestureViewFlipper app
right to left fling gesture

ViewFlipper class in activity
new GestureDetecture


onFling() - checks velocity

fling, scroll, long press

GestureBuilder Application comes with sdk

GestureLibraries class

GestureOverlayView  class - it intercepts user gestures invokes gestures

/mnt/sdcard/gestures  to /res/raw

TouchGestures app - swiping with View

Gray with green square in middle

checkmark yes gesture or no gesture like a circle

OnGesturePerformedListener method

GestureOverlayView - intercept user gestures


onGetsurePerformed method calls recognize method

Multimedia Part1 Presentation and Slides

Rich multimedia content - audio,image, movies

encoding/decoding formats

AudioManager  class- volume, system sound effects, ringer


load and play affects , manage volume, manage peripherals

SoundPool class - audio samples

AudioVideoAudioManager app -up down button, play button of bubble sound

AudioManager reference , playSoundEffect method

SoundPool object


RingtoneManager  - audio clips phone call, email, etc


Ringtone,Notification, or Alarm

in settings , can change ringtones



What data types can be used to identify a Ringtone when attempting to retrieve a Ringtone using one of the RingtoneManager.getRingtone() methods? Its an int or URI

Multimedia Part2 Presentation

MediaPlayer - audio and video in app and control playback with state machine

MediaPlayer class - allow apps to attach listeners, allow apps to set media stream to play backusers control media playback,

setDataSource - which stream play
prepare() - syncronous
start() start playback
release() - release resource

VideoView - subclass of SurfaceView video from multiple sources

AudioVideoVideoPlay app - trip to moon



pass in URI in res/raw directory

setOnPreparedListener method

MediaRecorder  - record auio and video ,state machine


AudioVideoAudioRecording app
two toggle buttons recording , playback




Before MediaRecorder.start()
-setAUdioSOurce(), setOutputFile(), setOutputFormat()


Camera service, manage settings , start/stop preview, camera permissions

uses-permission    android.permission.CAMERA


get camera instance,

set camera parms
setup preview
start preview
take picture process data
release camera

AudioVideoCamera app

Camera class - call open()
SurfaceView() and adds callback
- created withSurfaceHolder
stopPreview() method
takePicture() method

Suppose your application wants to use the Camera. Which of the following actions will it likely need to perform?Get the Camera instance. Set Camera parameters. Set up the Preview display. Start the Preview. Take a picture. Release the Camera instance.

No comments:

Post a Comment