Doodlz App Android How to Program © by Pearson Education, Inc. All Rights Reserved.

Test Drive the Doodlz app © by Pearson Education, Inc. All Rights Reserved.

© by Pearson Education, Inc. All Rights Reserved.

Technologies Overview No Android 3.0+ features in this app, but we specify in the manifest that we target 3.0SDK, so we get 3.0’s look-and-feel ▫Holographic theme Use SensorManager to Listen for Accelerometer Events ▫Detects movement of device ▫User will shake device to erase drawing ▫Other sensors: gravity, gyroscope, light, linear acceleration, magnetic field, pressure, proximity, rotation vector and temperature ▫To listen for sensor events, you et a reference to system’s SensorManager service ▫Classes and interfaces for processing sensor events are in package android.hardware © by Pearson Education, Inc. All Rights Reserved.

Technologies Overview Create Custom Dialogs ▫AlertDialogs display only simple Strings and Buttons ▫Class Dialog displays custom GUIs (eg SeekBars) AtomicBoolean ▫Sensor events are handled in separate thread of excution from GUI events  so possible shake event handler could try to display confirmation dialog, when another dialog is on screen ▫AtomicBoolean manages a Boolean in a thread- safe manner, so it can be accessed by multiple threads © by Pearson Education, Inc. All Rights Reserved.

Technologies Overview Custom Colors ▫Specify alpha, red, green, blue components of colors using SeekBars in a Dialog ▫Class Color provides methods for assembling a color and for obtaining components values from a Color Drawing Lines and Paths ▫Drawing on a bitmap here ▫Associating a canvas with a bitmap, use Canvas to draw on the Bitmap (which can be displayed and saved) © by Pearson Education, Inc. All Rights Reserved.

Technologies Overview Processing Touch events ▫Touch, Drag, or Lift with one or more fingers ▫Information for each finger stored in Path object  Consists of line segments ▫Using View method onTouchEvent which receives a MotionEvent  Need type of touch event and ID of finger Saving Drawing to device’s Gallery ▫ContentResolver enables app to read and store data ▫Uses OutputStream © by Pearson Education, Inc. All Rights Reserved.

Technologies Overview Using Toasts to display a message for a short time ▫Used to display minor error messages or informational messages briefly ▫Used in this app to let user know image was successfully saved to the gallery © by Pearson Education, Inc. All Rights Reserved.

Building the App’s GUI and Resource Files Ensure Build Target is Android Min SDK Version: 8 In AndroidManifest.xml, set android:targetSdkVersion attribute to “11”, which represents Android 3.0 SDK ▫So will run on 2.3.3, but if device is a Tablet, it will have the holographic theme seen on tablets Delete and replace main.xml ▫Only component is custom View class, DoodleView © by Pearson Education, Inc. All Rights Reserved.

Added manually to main.xml

© by Pearson Education, Inc. All Rights Reserved. Maximum value of SeekBar is 255

© by Pearson Education, Inc. All Rights Reserved.

LinearLayout has white background and contains a View to display the current drawing color. The white enables the color to display accurately when the user makes the color semitransparent with alphaSeekBar.

© by Pearson Education, Inc. All Rights Reserved.

Displays sample line in current width and current color.

Building the App Two classes Doodlz (the Activity subclass) ▫Provides the app’s menu, dialogs and accelerometer event handling DoodleView (View subclass) ▫Processes user’s touches and draws the corresponding lines © by Pearson Education, Inc. All Rights Reserved.

App’s Java program structure © by Pearson Education, Inc. All Rights Reserved. onCreate +enableAccer onPause +disableAccer registerListener onSensorChanged +clear Builder positive Button onClick onCreateOptionsMenu onOptionsItemSelected showColorDialogshowLineWidthDialog +setDrawingColor +saveImage+getDrawingColor colorSeekBar. onProgressChanged setColorButtonListener onClick +getLineWidth+setLineWidth

App’s Java program structure © by Pearson Education, Inc. All Rights Reserved. onCreate onOptionsItemSelected showLineWidthDialog +clear +setDrawingColor +saveImage+getDrawingColor +getLineWidth+setLineWidth widthSeekBar. onProgressChanged setLineWidthListener onClick

DoodleView – subclass of View © by Pearson Education, Inc. All Rights Reserved. +clear +setDrawingColor +saveImage +getDrawingColor +getLineWidth +setLineWidth DoodleViewonSizeChangedonDrawonTouchEvent +touchStarted +touchEnded +touchMoved

© by Pearson Education, Inc. All Rights Reserved.

Note: Do NOT need redColorSeekBarChanged and blueColorSeekBarChanged, etc.

© by Pearson Education, Inc. All Rights Reserved.

Paint is like a “paint brush” - it has a color, style, size, etc.

© by Pearson Education, Inc. All Rights Reserved. DoodleView’s size not determined until it’s inflated and added to Doodlz activity’s View hiearchy; therefore cannot determine size of drawing Bitmap in onCreate.

© by Pearson Education, Inc. All Rights Reserved.

System automatically determines when the View’s onDraw method should be called.

© by Pearson Education, Inc. All Rights Reserved. Not index of the finger, but the index at which finger’s information is located in this MotionEvent object. Index of finger New finger: first finger New finger: others Removed finger

© by Pearson Education, Inc. All Rights Reserved. Draw lines

© by Pearson Education, Inc. All Rights Reserved.

Contains touch info for multiple moves on screen if they occur at same time

© by Pearson Education, Inc. All Rights Reserved. Some devices sensitive enough to generate MotionEvent even if user attempts to hold finger motionless Adding geometric quadratic Bezier curve

© by Pearson Education, Inc. All Rights Reserved.

Saving Image Possible image won’t appear in Gallery until device scans for new media In AVD’s development tools, touch MediaScanner option, then the new image will appear in the Gallery © by Pearson Education, Inc. All Rights Reserved.

Wrap up Enabled a pre-Android 3.0 device to use Android 3.0’s holographic user interface components Processed sensor events (accelerator) by register SensorEventListener with SensorManager service Displayed custom dialogs with complex GUIs Used thread-safe AtomicBoolean to prevent multiple dialogs from displaying Created custom colors Drew onto Bitmaps using Canvas objects Saved Bitmap as an image to Gallery © by Pearson Education, Inc. All Rights Reserved.

Wrap up Stored information on each finger drag in a Path object Overrode onTouchEvent and used the MotionEvent parameter to get type of touch event and ID of finger that generated it Got an OutputStream from a ContentResolver Used a Toast to display a brief message – be able to write code to do this on Quiz © by Pearson Education, Inc. All Rights Reserved.