Presentation is loading. Please wait.

Presentation is loading. Please wait.

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

Similar presentations


Presentation on theme: "Doodlz App Android How to Program ©1992-2013 by Pearson Education, Inc. All Rights Reserved."— Presentation transcript:

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

2

3 Test Drive the Doodlz app ©1992-2013 by Pearson Education, Inc. All Rights Reserved.

4 ©1992-2013 by Pearson Education, Inc. All Rights Reserved.

5

6 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 ©1992-2013 by Pearson Education, Inc. All Rights Reserved.

7 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 ©1992-2013 by Pearson Education, Inc. All Rights Reserved.

8 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) ©1992-2013 by Pearson Education, Inc. All Rights Reserved.

9 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 ©1992-2013 by Pearson Education, Inc. All Rights Reserved.

10 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 ©1992-2013 by Pearson Education, Inc. All Rights Reserved.

11 Building the App’s GUI and Resource Files Ensure Build Target is Android 2.3.3 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 ©1992-2013 by Pearson Education, Inc. All Rights Reserved.

12

13

14 Added manually to main.xml

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

16 ©1992-2013 by Pearson Education, Inc. All Rights Reserved.

17 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.

18 ©1992-2013 by Pearson Education, Inc. All Rights Reserved.

19 Displays sample line in current width and current color.

20 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 ©1992-2013 by Pearson Education, Inc. All Rights Reserved.

21 App’s Java program structure ©1992-2013 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

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

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

24 ©1992-2013 by Pearson Education, Inc. All Rights Reserved.

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39 Note: Do NOT need redColorSeekBarChanged and blueColorSeekBarChanged, etc.

40 ©1992-2013 by Pearson Education, Inc. All Rights Reserved.

41

42

43

44

45

46

47

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

49 ©1992-2013 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.

50 ©1992-2013 by Pearson Education, Inc. All Rights Reserved.

51

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

53 ©1992-2013 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

54 ©1992-2013 by Pearson Education, Inc. All Rights Reserved. Draw lines

55 ©1992-2013 by Pearson Education, Inc. All Rights Reserved.

56

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

58 ©1992-2013 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

59 ©1992-2013 by Pearson Education, Inc. All Rights Reserved.

60

61

62 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 ©1992-2013 by Pearson Education, Inc. All Rights Reserved.

63 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 ©1992-2013 by Pearson Education, Inc. All Rights Reserved.

64 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 ©1992-2013 by Pearson Education, Inc. All Rights Reserved.


Download ppt "Doodlz App Android How to Program ©1992-2013 by Pearson Education, Inc. All Rights Reserved."

Similar presentations


Ads by Google