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?