10/7/2020 Surface View vs View — the differences | by Elye | Mobile App Development Publication | Medium

You have 1 free story left this month. Sign up and get an extra one for free.

Surface View vs View — the di erences

Elye
Aug 7, 2018 · 6 min read

In this article, I’ll share with you what is SurfaceView and the differences with normal
View in term of implementing it.

Background
We knew we could create animated drawing on a view as per in my tutorial below

Custom Touchable Animated View in Kotlin

If you wanted to draw your own view, and having some animated drawing,
and in Kotlin… hope this would help.
medium.com

https://medium.com/mobile-app-development-publication/surface-view-vs-view-the-differences-b8ad7808dc3c 1/9
10/7/2020 Surface View vs View — the differences | by Elye | Mobile App Development Publication | Medium

However, when we use onDraw to perform all the animation calculation, we are doing
it on the UI thread. If we also need to handle user interaction, this will be a challenge,
as the animation calculation has taken up all the processing time, this will make the
user interaction unresponsive.

I’m providing a simple illustration below, where I put my animated view in a scroll
view, and I explicitly sleep 0.5s for each animation (simulating slow processing).

canvas.drawRect(...)
Thread.sleep(500)
moveRectRight()

When I scroll the view up and down, look at how slow the view response to it.

https://medium.com/mobile-app-development-publication/surface-view-vs-view-the-differences-b8ad7808dc3c 2/9
10/7/2020 Surface View vs View — the differences | by Elye | Mobile App Development Publication | Medium

In knowing that, Google has provided something called SurfaceView that we could use.
It’s there since long but not much mentioned about it lately. But if you really want to do
game programming natively, this is something not to miss.

In SurfaceView , with the same constraint above (0.5s for each animation drawing,
wrapped in a scroll view), I could still scroll it smoothly as below.

Wow, isn’t that good, the computation of animation logic doesn’t interfere the User
Interaction on it.

What’s SurfaceView?
Well, it is documented below, so I’m not writing about that.

SurfaceView | Android Developers

The surface is Z ordered so that it is behind the window holding its
SurfaceView; the SurfaceView punches a hole in its…
https://medium.com/mobile-app-development-publication/surface-view-vs-view-the-differences-b8ad7808dc3c 3/9
10/7/2020 Surface View vs View — the differences | by Elye | Mobile App Development Publication | Medium

developer.android.com

How to implement something with it, you could find two examples below

11.2: Creating a SurfaceView object

Contents: When you create a custom view and override its onDraw()
method, all drawing happens on the UI thread. Drawing…

google-developer-training.gitbooks.io

Miserlou/Android-SDK-Samples
Android-SDK-Samples - GitHub mirror of the Android SDK Samples. API
version 17.
github.com

The differences with normal view

There are several places state about their differences

Di erence between SurfaceView and View?

updated 05/09/2014 OK. We have o cial document now. It talked all I have
mentioned, in a better way. Read more…

stackover ow.com

Android UI Internal : SurfaceView Vs View

Android UI Internal : SurfaceView Vs View SurfaceView is-a View but is for di erent purpose and has
its distinct…

pierrchen.blogspot.com

But they are not to the detail in term of implementing encountered differences. This is
what I’ll be sharing here.

https://medium.com/mobile-app-development-publication/surface-view-vs-view-the-differences-b8ad7808dc3c 4/9
10/7/2020 Surface View vs View — the differences | by Elye | Mobile App Development Publication | Medium

The animation code used

I have a simple drawing that animate the red rectangle from left to right as below

class DrawAnimate(private val height: Int, private val width:

Int) {

private var startPoint = 0f

private val strokePaint = Paint()
.apply { color = Color.RED }
.apply { strokeWidth = 16f }

companion object {
private const val SIZE = 50f
private const val SLEEP = 500L
}

fun draw(canvas: Canvas) {

canvas.drawRect(startPoint, height/2 - SIZE/2,
startPoint + SIZE, height/2 + SIZE/2, strokePaint)
Thread.sleep(SLEEP)
startPoint += SIZE
if (startPoint > width) { startPoint = 0f }

}
}

With the above logic, I add a gradient background to the view.

<com.elyeproj.surfaceviewexplore.<SurfaceView/NormalView>
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/gradient_vertical"
android:minHeight="@dimen/custom_view_height" />

With this when I execute on normal View, it looks as below

https://medium.com/mobile-app-development-publication/surface-view-vs-view-the-differences-b8ad7808dc3c 5/9
10/7/2020 Surface View vs View — the differences | by Elye | Mobile App Development Publication | Medium

However, when I execute on SurfaceView, it looks as below

https://medium.com/mobile-app-development-publication/surface-view-vs-view-the-differences-b8ad7808dc3c 6/9
10/7/2020 Surface View vs View — the differences | by Elye | Mobile App Development Publication | Medium

Can you spot all the differences? They are further elaborated below. Anyway, to test it
out, you could get the code from

elye/demo_android_surfaceview_vs_view
demo_android_surfaceview_vs_view - Demo on Surface View and View on
the same piece of drawing animation.

github.com

The differences to handle in implementation

Having seen the above, let me extract each of the Implementation differences. This
would be helpful if you’re transferring your normal View drawing to SurfaceView.

1. Background color
For normal view, the Background color is actually at the back of the drawing view. So
you could see the red dot in always drawn on top of the green gradient color (which is
the background color)

However for SurfaceView, the Background color (gradient green) is actually in front of
the drawing surface. So whatever that is drawn will be place in front of the surface
canvas. With that if it is not transparent, it will cover over what is drawn (i.e. the red
dot).

So in short, for SurfaceView, don’t put a background color thinking that it will be the
view background.

2. Color of view
For normal view, the color of the view is actually transparent. It is seen white, as it is
the background of the window view, so white is seen.

https://medium.com/mobile-app-development-publication/surface-view-vs-view-the-differences-b8ad7808dc3c 7/9
10/7/2020 Surface View vs View — the differences | by Elye | Mobile App Development Publication | Medium

For surfaceView, it is black in nature, as it is behind the window view. There’s no

background color whatsoever. Read some of the above links for the reason why.

With that, if you would like to have a non black background color, you’ll need to do
some trick to it. One way is as below

Set background color (that you like) to it initially.

When the surface is setup, use canvas.drawColor(YourColorBackground)

Then remove the background color (or set as transparent)

3. Canvas drawing
For normal view, as the canvas is drawn, on every invalidation, it is cleared, so new
rectangle need to be drawn, but the old rectangle doesn’t need to be cleared, as it has
been cleared.

For surfaceView however, the drawn canvas retain what it has been drawn. This is not
that clearly seen initially as there seems to have 3 layers of Canvas

I read there are double buffer of Canvas, but from my experience of program above, there
are 3 canvas layer. If you observe carefully, after the 3 drawing, the previous drawn
canvas resurface, and this continue on until it form the entire new line.

So for surfaceView, every previously drawn canvas, if no longer needed, needs to be

explicitly cleared.

4. Onbackground behavior
This would not be observed from the above GIF shown.

For normal View, when onBackground and back, the drawing is retain and continue on
(with the exception if the Fragment/Activity is destroyed).

For for surfaceView, when onBackground, the surface is Destroyed, and recreated. So
the surface canvas will be reset. Hence this needs to be tackle accordingly.

With the differences stated, hopefully it helps clear out some initial exploration of

https://medium.com/mobile-app-development-publication/surface-view-vs-view-the-differences-b8ad7808dc3c 8/9
10/7/2020 Surface View vs View — the differences | by Elye | Mobile App Development Publication | Medium

using SurfaceView.

There are more to be explored. Below are few to check out.

Android: Speeding up canvas.drawBitmap

If you're developing a game for Android that uses canvas drawing, you're
probably calling Canvas.drawBitmap to draw…
www.independent-software.com

Flickering problems due to double bu er of SurfaceView

If you try the code in last post Link SurfaceView and Background Thread
work together, you can note that the screen…
android-coding.blogspot.com

I hope this post is helpful to you. You could check out my other interesting topics here.

Follow me on medium, Twitter or Facebook for little tips and learning on Android,
Kotlin etc related topics. ~Elye~

Android App Development AndroidDev Mobile App Development Game Development

Google

About Help Legal

Get the Medium app

https://medium.com/mobile-app-development-publication/surface-view-vs-view-the-differences-b8ad7808dc3c 9/9