Lectures‎ > ‎Week 2: June 6-June 12‎ > ‎

03-Android and 2D Graphics

Homework in preparation for this lecture

  1. Read HA: Chapter 4
    1. Type in (don't copy) all the additional code to the Soduko application
    2. Lay out the game board, handle input, hints, etc.
    3. Get it to work in the emulator, and get it to work in an Android device
    4. Deliverables: 
      1. Check your code into github
      2. Do a screencast of you running the latest version of the app
      3. Include in the screencast a verbal description of the interesting/important parts as you show the code in Eclipse
      4. Add links to both into your Homework Log
  2. XML
    1. Learn XML. Do this basic XML Tutorial
    2. Create an XML document that represents a student's transcript for 4 years of college, with a good amount of detail. You will invent the tags in a way that is meaningful to you.
    3. Deliverable: Post the result as a blog post
  3. Game design from yesterday
    1. Yesterday we formed 4 teams and they invented a game
    2. Deliverable: a joint blog post describing the new game

2D Graphics


  • Learning Objectives
    • understand how to create interactive 2D Graphics
    • learn how to draw on a screen, using a Model/View/Controller model (see Lunar Lander)
    • learn how to control the View with simple user interaction (onDraw, invalidate, e.g. FingerPaint)
    • learn how to add animation effects using a handler (e.g TouchPaint)
  • Walk through several examples including
    • LunarLander (showing how to use a SurfaceView for Game Animations)
    • APIdemo (showing  a wide variety of Graphics demos including TouchPaint and FingerPaint)
  • How would we implement the MazeGame as a 2D game on an Android device?
    • brainstorm on the possible structures using the Sudoku example as one model
    • discuss merits and drawbacks of different approaches
  • Create Eclipse projects for APIdemo and LunarLander from google SDK download samples folder
  • Spend 10 minutes flipping through APIdemo looking for examples that could be used in your projects
  • Report back to the group and give demos ...

Fundamental Packages/Classes for 2D Graphics
  • android.view.View
    • http://developer.android.com/reference/android/view/View.html
    • This class represents the basic building block for user interface components. A View occupies a rectangular area on the screen and is responsible for drawing and event handling. View is the base class for widgets, which are used to create interactive UI components (buttons, text fields, etc.). The ViewGroup subclass is the base class for layouts, which are invisible containers that hold other Views (or other ViewGroups) and define their layout properties.
    • Algorithm for drawing a View: http://developer.android.com/guide/topics/ui/how-android-draws.html
  • android.graphics.drawable.Drawable
    • http://developer.android.com/reference/android/graphics/drawable/package-summary.html 
    • Provides classes to manage a variety of visual elements that are intended for display only, such as bitmaps and gradients. These elements are often used by widgets as background images or simply as indicators (for example, a volume level indicator). 
    • You can create most of these drawables using XML, as described in Drawable Resources.
  • android.graphics.Canvas
    • http://developer.android.com/reference/android/graphics/Canvas.html
    • The Canvas class holds the "draw" calls. To draw something, you need 4 basic components: A Bitmap to hold the pixels, a Canvas to host the draw calls (writing into the bitmap), a drawing primitive (e.g. Rect, Path, text, Bitmap), and a paint (to describe the colors and styles for the drawing).
    • Semantics
      • onDraw method is called when the OS wants to refresh the screen
  • android.graphics.BitMap
    • http://developer.android.com/reference/android/graphics/Bitmap.html
  • android.graphics.Paint
    • http://developer.android.com/reference/android/graphics/Paint.html
  • android.graphics.Path
    • http://developer.android.com/reference/android/graphics/Path.html
  • android.os.Handler  (used to send messages to a thread with a delay, possibly its own thread)
    • http://developer.android.com/reference/android/os/Handler.html
  • android.view.SurfaceView
    • http://developer.android.com/reference/android/view/SurfaceView.html
  • android.view.SurfaceHolder
    • http://developer.android.com/reference/android/view/SurfaceHolder.html

Kinds of 2d Graphics
  • maps, charts, photos, static content (best represented as bitmaps and resources ...)
    • http://developer.android.com/guide/topics/graphics/2d-graphics.html
  • graphs and simple static line drawings (use Canvas class and invalidate sections that need redrawing)
    • FingerPaint
    • use of inner class to create a custom view
    • customization of Paint object and use of filters
    • MyView
      • override onSizeChanged (can create a new canvas ...)
      • override onDraw  to actually draw the view using the underlying model (mixed up in this class :(  )
      • use of "private"
      • override onTouchEvent to handle finger paint actions
      • override onCreateOptions, onPrepareOptions, onOptionItemSelected to handle menus
  • animation with lingering effects (use canvas with a handler to update the effects periodically)
    • TouchPaint
    • use of inner class to create a customized view
    • use of a Bundle to store savedInstanceState
    • menu handling by onCreateOptions, etc.
    • use of Handler to implement an animation effect on the model ... send,  catch/resend
    • use of onTrackBallEvent and  onTouchEvent
    • use of MotionEvent history to handle several events ...
    • use of Pressure sensor
  • game style animation (use canvas with a simulation thread)
    • LunarLander
    • Model/View/Controller approach
    • LunarThread handles model runs continuously ..
      • look over run method with synchronization and use of surfaceholder ...
      • fancy savestate
      • main view passing keypress info to thread ...

Videos from Class