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 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-DevelopmentGroup/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/scr 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-thosevector-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-renderingpipeline.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
from For Butter or Worse Google IO 2012 Chet Hasse Roman Guy

Image

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-performancecase-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?