filtry rich android client.pdf

8/13/2019 Filtry Rich Android Client.pdf

1/56

www.devoxx.com

Filthy Rich Android Clients

Romain GuyUI Toolkit Engineer, AndroidGoogle
http://www.devoxx.com/http://www.devoxx.com/http://www.devoxx.com/http://www.devoxx.com/


2/56

www.devoxx.com

Overall Presentation Goal

Learn how to apply Filthy Rich Clients techniques tothe Android platform.


3/56

www.devoxx.com

Speakers qualifications

Romain works on the Android UI toolkit at Google

Romain co-authored the book Filthy Rich Clients

Romain enjoy writing Filthy Rich Client applications

Romain knows how to use Keynote

3


4/56

www.devoxx.com

Filthy Rich Clients are not specific to any particular

platform or software stack.

The are a set of techniques applicable across manyplatforms and toolkits.

Android is a modern mobile operating system offeringadvanced features for graphical effects.

Lets discover some of these features.


5/56

www.devoxx.com

Architecture

Graphics

Animation

Performance

5

Agenda


6/56

www.devoxx.com

Architecture

Graphics

Animation

Performance

6

Agenda


7/56www.devoxx.com

Glossary

Canvas: 2D drawing context

Drawable: Abstract painter

PixelFlinger: Rasterizer (OpenGL JIT for ARM)

SGL: 2D drawing API (Skia)

Surface: Drawing buffer

SurfaceFlinger: Surface manager

View: UI widget

ViewGroup/Layout: UI widget container

7


8/56www.devoxx.com8

Architecture


9/56www.devoxx.com9

Architecture


10/56www.devoxx.com10

Architecture


11/56www.devoxx.com

How to draw

11

1public classCustomView extendsView{

2 @Override 3 protected voidonDraw(Canvascanvas) {

4 // draw stuff

5 }

6}


12/56www.devoxx.com

How to draw

12

1public classCustomDrawable extendsDrawable{

2 @Override 3 public voiddraw(Canvascanvas) {

4 // draw stuff

5 }

6}


13/56www.devoxx.com13

Redrawing


14/56www.devoxx.com

Drawing sequence

14


15/56

www.devoxx.com

Architecture

Graphics

Animation

Performance

15

Agenda


16/56

www.devoxx.com

DEMO

3D Reflection


17/56

www.devoxx.com

Fundamentals

Paints

Gradients

Transfer modes

3D Transformations

Shadows

17


18/56

www.devoxx.com

About paints

Canvas is mostly stateless

Transformation matrix

Paint contains the state

Opacity, color and color filter

Transfer mode, mask filter and shader

Anti-aliasing, filtering and dithering

Stroke and fill

18


19/56

www.devoxx.com

DEMO

Color filter in Home

Screen transfer mode in Shelves

Faded edges in lists


20/56

www.devoxx.com

Gradients

Shader

Horizontal span of colors

LinearGradient

RadialGradient

SweepGradient

20


21/56


22/56

www.devoxx.com

Transfer modes

In Java2D, AlphaComposite

Does more

Modes

Porter-Duff (SrcOver, Atop, DstOut, etc.)

Color blending (Screen, Darken, Multiply, etc.)

22


23/56

www.devoxx.com

Transfer modes

23

1ShadergradientShader = newLinearGradient(0, 0, 0, 1,

2 0xFF000000, 0, TileMode.CLAMP);

3

4ShaderbitmapShader = newBitmapShader(mBitmap, 5 TileMode.CLAMP, TileMode.CLAMP);

6

7ShadercomposeShader = newComposeShader(

8 bitmapShader, gradientShader,

9 newPorterDuffXfermode(Mode.DST_OUT)); 10

11PaintmPaint = newPaint();

12mPaint.setShader(composeShader);


24/56

www.devoxx.com

3D transformations

2D Canvas transformations

scale(), translate(), rotate()

Canvas uses a 4x4 transformation matrix

3D transformations

Use android.graphics.Camera

24


25/56

www.devoxx.com

3D transformations

25

1CameramCamera = newCamera();

2// Z translation

3mCamera.translate(0.0f, 0.0f, 350.0f);

4// rotation around the Y axis in degrees 5mCamera.rotateY(45);

6

7// in onDraw(Canvas)

8canvas.save();

9canvas.concat(mCamera.getMatrix());

10canvas.drawBitmap(bitmap, 0.0f, 0.0f, null);

11canvas.restore();


26/56

www.devoxx.com

DEMO

3D transition


27/56

www.devoxx.com

Shadows

27

1PaintmShadow = newPaint();

2// radius=10, y-offset=2, color=black

3mShadow.setShadowLayer(10.0f, 0.0f, 2.0f, 4 0xFF000000);

5

6// in onDraw(Canvas)

7canvas.drawBitmap(bitmap, 0.0f, 0.0f, 8 mShadow);


28/56

www.devoxx.com

Architecture

Graphics

Animation

Performance

28

Agenda


29/56

www.devoxx.com

Animation

Why?

Better visual feedback

UI appears more responsive

How?

Animation

LayoutAnimation

29


30/56

www.devoxx.com

Bring life to your application

Life is restless

Transitions, highlights, progress, motion, etc.

Animate changes

Adding/removing views

Keep animations short and simple

30


31/56

www.devoxx.com

Animation features

Start delay

Start time

Duration

Repeat mode

Repeat count

Interpolation

Fill before/after

Defined in XML or code

31


32/56

www.devoxx.com

Inside animations

Subclass of Animation

Tied to a View

View.setAnimation()/startAnimation()

Not driven by a timer

But time driven

Driven by the drawing code

View.getDrawingTime()

32


33/56

www.devoxx.com

Inside animations

Fixed set of animated properties

AlphaAnimation

RotateAnimation

ScaleAnimation

TranslateAnimation

View itself is not animated

Only a bitmap copy is

Drawing cache API

33


34/56

www.devoxx.com

DEMO

Animation in Home

Animation in Shelves


35/56

www.devoxx.com

Defining the animation

35

res/anim/slide_in.xml

1

2

6

10
http://schemas.android.com/apk/res/androidhttp://schemas.android.com/apk/res/androidhttp://www.devoxx.com/http://www.devoxx.com/http://www.devoxx.com/http://www.devoxx.com/


36/56

www.devoxx.com

Playing the animation

36

1Animationanimation; 2animation = AnimationUtils.loadAnimation(

3 context, R.anim.slide_in);

4view.startAnimation(animation);


37/56

www.devoxx.com

Layout animations

Apply to a ViewGroups children

One animation

Each child has the same animation

Each child has a different start delay

Layout animation controller

Defines the start delay for each child

Based on the index, position, column, row, etc.

37


38/56

www.devoxx.com

DEMO

Layout animations


39/56

www.devoxx.com

Defining the layout animation

39

res/anim/layout_fade

1


40/56

www.devoxx.com

Playing the layout animation

40

1


41/56

www.devoxx.com

Transitions

Long operations

Long-press for contextual actions

Changes

Avoid jarring effect

TransitionDrawable

Contains 2 drawables

Fade between them

41


42/56

www.devoxx.com

Defining a transition

42

res/drawable/transition

1

2

3

4


43/56

www.devoxx.com

Playing a transition

43

1TransitionDrawabledrawable;

2drawable = getDrawable(R.drawable.transition);

3view.setBackgroundDrawable(drawable);

4drawable.startTransition(1000);


44/56

www.devoxx.com

DEMO

Transition in Home

Transition in Shelves


45/56

www.devoxx.com

Architecture

Graphics

Animation

Performance

45

Agenda


46/56

www.devoxx.com

Performance

G1 hardware

~384 Mhz CPU

16 MB of RAM per process

ATI Imageon GPU

Interpreted VM

Simple Garbage Collector

SGL is not hardware accelerated

Native code is not supported (yet)

46


47/56

www.devoxx.com

General optimizations

Do not allocate at drawing time

Avoid method calls

Especially interface calls

Avoid invalidate()

Invalidate only what you need

invalidate(left, top, right, bottom)

Flatten the view hierarchy

47


48/56

www.devoxx.com

DEMO

HierarchyViewer

DDMS


49/56

www.devoxx.com

Bitmaps

Drawable stretch bitmaps

Size your bitmap accordingly

Bitmap.createScaledBitmap()

BitmapFactory.Options.inSampleSize

Dithering at drawing time is costly

Pre-dither bitmaps (Photoshop plugin)

BitmapFactory.Options.inDither

49


50/56

www.devoxx.com

Backgrounds

Remove unnecessary backgrounds

No opaque view optimization

getWindow().setBackgroundDrawable(null)

For instance: Home, Google Maps, Shelves

Prefer ColorDrawable

50


51/56

www.devoxx.com

DEMO

Home

Maps

Shelves


52/56

www.devoxx.com

Drawing cache

Intermediate bitmap

Special API

View.setDrawingCacheEnabled()

View.buildDrawingCache()

View.getDrawingCache()

Sometimes managed automatically

ViewGroup (animations)

ListView (scrolling)

52


53/56

www.devoxx.com

DEMO

Home

ListView


54/56

www.devoxx.com

Concluding statement

Filthy Rich Clients are possible on todays mobiledevices. Powerful APIs and hardware open new

possibilities that have barely been explored.


55/56

www.devoxx.com

Q&A

[email protected]
mailto:[email protected]:[email protected]://www.devoxx.com/http://www.devoxx.com/http://www.devoxx.com/http://www.devoxx.com/


56/56

Thanks for your attention!

http://www.android.comhttp://source.android.comhttp://code.google.com/android
http://code.google.com/androidhttp://code.google.com/androidhttp://source.android.com/http://source.android.com/http://www.android.com/http://www.android.com/

filtry rich android client.pdf

Documents