2D Graphics and Custom Views

yellvillepotatocreekSoftware and s/w Development

Dec 2, 2013 (3 years and 10 months ago)

94 views

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

Based on about hardware architecture http://developer.mips.com/2012/04/11/learning
-
about
-
android
-
graphics
-
subsystem/

Review of June Creating
Custom Views

Or 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 website

http://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 draw

9 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 Cheap

Preview in eclipse/ emulator


Android Design preview tool

http://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.c
om/





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?