2D Graphics and Custom Views
Or I want to make something pretty and interactive
MCS: Texas A&M simulation and graphics
Software engineer here at Valtech
Overview
Android View and Graphics Architecture Quick review of Creating Custom Components
Handling Multiple Screen Sizes
Improving Performance
Architecture of Views and Android Graphics
What's going on under the covers?
View Basics
Image from Android Developers website http://developer.android.com/guide/topics/ui/overview.html
View Group to the Screen
Invalidate
Draw When onDraw is
called
-Walks down view tree drawing invalid views
-Draws front to back
From App to Surface
Surface to Screen
Review of June Creating Custom ViewsOr what do you remember from last time?
June Meet-up Recording: Custom UI Controls by Luke Wallace
on the Dallas Android Developers meet-up site under pages/recording of past meetings
http://www.meetup.com/Dallas-Android-Development-Group/pages/Recordings_Of_Past_Meetings/
or on our youtube channel at http://www.youtube.com/user/DallasAndroidDevelop?feature=watch
Extend a View object an Override OnMeasure OnDraw Invalidate when you need to update
Also might want to look into onSizeChanged onAttach
Resources of different densities
Nine patches Vector Graphics Canvas and Paint
Huge-cube by MI-wikier
Standard Approach
Different Resources for different screen sizes and densities
-specify dps or wrap content layout not pixels
-Don't want resource scaled? Use nodpi
From Android Developer websitehttp://developer.android.com/guide/practices/screens_support.html
Nine Patches
-Grow an image by reproducing sections of it
-draw9patch available in android sdk
Image from android developers draw9 patch documentation
Are SVG usable on Android?
Why not do everything using SVG files?
Library called SVG-Android
Open source
Library is 16.4 kb
It isn't usable in icons
Source: http://code.google.com/p/svg-android/
Image is part of SVG-Android landing page
in between pixels problem
Different sizes might need to be structurally different
image from http://www.pushing-pixels.org/2011/11/04/about-those-vector-icons.html
there is also an interesting article
Canvas What to draw
Paint How to draw it
Good overview of Android 2D pipeline at http://www.xenomachina.com/2011/05/androids-2d-canvas-rendering-pipeline.html
These made with Canvas/Paints
From MindTheRobot www.mindtherobot.com
Look under Thermometer and AnalogDial – includes source
Test Different Screens CheapPreview in eclipse/ emulator
Android Design preview toolhttp://code.google.com/p/android-ui-utils/
ADB shell am display-size 1023X768 -bluetooth keyboard
Getting Graphics to Manipulate
Work on Personal Projects?Art training?
See what's free Look whats on
Android Developers
Wikimedia Commons
licensing different densities
Remember you don't have to use the whole thing!
Good for textures Combine parts of
images
Use Free Tools GIMP Inkscape
Remember you can take pictures
http://www.guru.com/
Tips Tools Surface/Texture View
Other Tips to Improve Performance-don't use new in onDraw!-use cliprect on invisible areas-turn on hardware aceleration-avoid to much overdraw-get heavy processing off of main UI thread-Recyle your bitmaps when done-Avoid blending as much as possible
Invalidate with Hardware Acceleration
This Image Modified from Google IO 2011 Accelerated Android Rendering Roman Guy and
Chet Hasse
Use four-parameter variant of invalidate() rather than the version that takes no parameters
Image from For Butter or Worse Google IO 2012 Chet Hasse Roman Guy
Hardware Acceleration
-Must have GPU
-Doesn't support everything
-easy to turn on
Tools
lint
Developer Options Show Overdraw
Profile GPU rendering
HierarchyViewer
Image from developer.android.com on hierarchy viewer
Using Profile GPU Rendering Set using developer options settings on your phone 4.2
1) adb shell dumpsys gfxinfo com.your.app from terminal
2) Kill your app
3) look for section profile data in ms
4) chart in excel
http://www.curious-creature.org/2012/12/01/android-performance-case-study/
Surface/Texture Views
-More responsive, don't wait for view update-heavy weight -manage calling onDraw yourself-lock the surface do work unlock
Thank you.Questions?
Top Related