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
