Moving MapFragment (SurfaceView) causes black background flickering

Question

I'm trying to implement new Android Google Maps API (v2). However it doesn't seem to go well with SlidingMenu. As you may know, MapFragment implementation is based on SurfaceView. The problem is that the SurfaceView doesn't like moving it around - I mean placing it in movable views:

• ViewPager,
• ScrollView,
• ListView,
• or the aforementioned SlidingMenu.

When you move it, it leaves a black hole in the place where its pixels originally layed. It looks something like this.

This problem can be partially solved by specifying a transparent background on the SurfaceView or even placing a transparent View over it. I just can't figure if only for me the results are unacceptable, or if I have a different problem which makes it look how it looks.

To see how it looks, please watch THIS VIDEO.

(sorry for the quality, but the problem can be seen easily anyway)

When a normal listview (the orange screen) is pulled away while opening SlidingMenu, the animation is smooth and nice. But as soon as the MapFragment appears, there's some weird refreshing/flickering/synchronization issue on the map.

Tested on HTC One S and Samsung Galaxy ACE.

---

My super-duper-crazy idea of solving it: each time the opening animation starts, take a screenshot of the MapFragment (it should be possible with SurfaceView) and lay it over for the duration of the animation. But I really don't know how to do it... Taking screenshot of a map isn't possible, but maybe someone will get inspired by this.

Or maybe disable redrawing the map some other way, I don't know.

---

UPDATE:

Found this.

It appears that SurfaceView can be changed to TextureView to remove those limitations. But since MapFragment is based on SurfaceView, I don't know if it can be achieved.

Another update It appears that this issue has been resolved on devices 4.1+. They just used TextureView. but on lower versions we still have to use workarounds.

Solution 1

Of course the proper solution will be for Google to fix the problem (see Android Maps V2 issue 4639: http://code.google.com/p/gmaps-api-issues/issues/detail?id=4639).

However, one of my coworkers suggested simply extending the map beyond its container. If we extend the map fragment beyond the visible region of its container, like so:

android:layout_marginLeft="-40dp"
android:layout_marginRight="-40dp"

we can reduce/eliminate the flickering. Newer devices (e.g. Galaxy Nexus) show no flickering after this hack, and older devices (e.g. LG Optimus V) show reduced flickering. We have to extend margins on both sides so that info windows are centered when they're selected.

---

Update: This issue was fixed by Google on Aug. 28, but I'm guessing it still has to be rolled into a release.

Solution 2

Here's a crazy idea, don't move the MapView ;-)

That is, create a MapView full screen width behind your app in a FrameLayout. Then lay your views on top, and punch a hole through to the MapView in the position you need to display it. When moving you'll need to update the map position to stay in sync so the user keeps seeing the same section of the map, but that should update better than moving a surface view around.

Solution 3

add android:hardwareAccelerated="true" in your manifest file.

eg: <application android:name=".Sample" android:hardwareAccelerated="true" />

Solution 4

Well, Quoting Dianne Hackborn (an Android framework engineer)

The surface view is actually BEHIND your window, and a hole punched in the window for you to see it. You thus can put things on top of it in your window, but nothing in your window can appear behind it. Original post

This architecture is part of why you see these flickers.

Some flickering sometimes appear due to double buffers: Android coding blog explains further.

You can also try and subclass the SurfaceView to try and draw the background differently. I haven't seen an example of this that doesn't change the z-index to be that of the top. Check out this SO post

Otherwise, I recommend only getting the SurfaceHolder after your view is focused (try and make a temporary view until then) and removing the SurfaceView whilst not in focus and on screen.

Solution 5

In my scenario, I had an initial Fragment, which on a button click swapped in a second fragment with a MapFragment inside it. I noticed that this flicker only occurred the first time you would swap the fragment - popping the back stack, and swapping in another fragment of the same type did not cause a flicker.

So figuring it had something to do with adding an initial SurfaceView to the window, I tried adding an empty instance of a SurfaceView to my initially loaded fragment, behind it's main view. And bingo, no more flicker when animating in the next fragment!

I know it's not the cleanest solution, but it works. The Google MapFragment (or SupportMapFragment in my case) still works fine, as the unused SurfaceView is in the previous fragment.

I should add I am using the v2 API.

Update @VenomVendor

I add the empty SurfaceView to the first fragment to be shown, at index 0 - behind the main view. In my case, the Home fragment is the previous fragment to one that contains the Google Maps fragment, not sure if that matters:

import android.view.SurfaceHolder;
import android.view.SurfaceView;

public class HomeFragment extends FragmentBase {
private SurfaceView sview;

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    View view = inflater.inflate(R.layout.fragment_home, container, false);

    //this fixes google maps surface view black screen animation issue
    sview = new SurfaceView(getActivity());
    sview.setZOrderOnTop(true);    // necessary
    SurfaceHolder holder = sview.getHolder();
    holder.setFormat(PixelFormat.TRANSPARENT);

    container.addView(sview, 0);
    ...
}

View more solutions

Comments

[Michał Klimczak]

That's interesting but would be terrible to implement, especially in a viewpager or something where you need multiple MapFragments and each displays different map. And SlidingMenu moves the whole "above" view aside, so that would mean I'd have to entirely change the way the library works. Otherwise, very interesting, so +1 :)

[Ryan]

Completely agree it would be hard / not wise to implement as a generic solution, but could just work for a specific one off use case. Hopefully, it may help nudge someone more intelligent to consider a better solution ;-)

[qubz]

Here's hoping for a much simpler solution. I imagine using a map with a sliding menu will grow in demand and become more than just a one off use case.

[Michał Klimczak]

Strange thing is, when you setZOrderOnTop(true), the flicker doesn't disappear. It's not black anymore, it becomes white. But it's still there. There surely is some problem with performance or synchronization, because the black background doesn't remain there, it only flickers for a fraction of second. If I could synchronize the frames of SlidingMenu animation with refreshing of SurfaceView, it would probably disappear...

[Ben Max Rubinstein]

It's true, but that actually only allows you to avoid the high visibility of the issue, by making sure the SurfaceView's background color is the same as the color of it's container's background. I don't think that you should try and synchronise frame rates or other possibly complicated properties, as such a behaviour even exists in the slowest movements controlled by your hand. As I mentioned, you could draw programatically inside your canvas, by subclassing the SurfaceView, but that majorly degrades it's performance.

[Michał Klimczak]

I don't think I follow. What would "drawing inside canvas" change? I thought that MapFragment is drawing inside canvas, but it's not fast enough. If you mean changing the background so it matches the foreground map (black flicker appears in the place where map should be, not in the place of the SlidingMenu), then I doubt it's possible, because the map isn't a solid background, I would have to take a screenshot or something like this.

[Michał Klimczak]

But you're using the deprecated Map API v1 and it has nothing to do with the SurfaceView and my question. I know what you're talking about, I had the same problem when I tried to instantiate multiple MapViews, but it's not an answer to my question, unfortunately.

[Scott]

This is using Map API v2. "com.google.android.gms.maps.MapView". The GMS bit is v2.

[Scott]

Maybe I'll explain a little more. I think the flicker you are experiencing is not because of the movement of the Map. I have the map on a ViewPager and it's more than happy to slide around. There is a black edge when it moves quickly but not the flicker you are talking about. In my testing the flicker was due to resource loading which I found could be avoided by effectively pre-caching the Maps data when loading the activity.

[Michał Klimczak]

"There is a black edge when it moves quickly but not the flicker you are talking about" - isn't it the same thing? Did you see the video in the question? How it differs in your ViewPager? Sorry for misreading your answer and that "v1" comment.

[Scott]

Ah right, so you are just moving the MapView so fast that it appears to flash, the same effect as the screen flash you get from late loading the MapView on a fragment. Yeah you are right, I'm addressing a slightly different but similar looking problem.

[qubz]

This is not a solution to the problem at hand.

[Michał Klimczak]

It works to prevent the "black hole" problem, but not the problem I describe. See this part of my question: "This problem can be partially solved by specifying a transparent background on the SurfaceView or even placing a transparent View over it..."

[Acheese]

Oh~ sry that i didn't notice that 8-)

[Michał Klimczak]

This is very interesting, I'll try it for sure

[James Wald]

I had a mapview inside a viewpager inside a dialog. Solved by putting the map behind the view pager and making the viewpager's first item a transparent placeholder (map gestures are disabled).

[Michał Klimczak]

Map v2 doesn't work without hardware acceleration, if I remember correctly.

[Michał Klimczak]

Wow, finally! This looks promising

[Michał Klimczak]

This is what joecks noticed few days ago, but thanks for the code.

[GLee]

Just fyi, I had to add `android:layout_gravity="center"' to make this work. Great suggestion, thanks!

[Rat-a-tat-a-tat Ratatouille]

Sir, this didnt work for me, is there any other workaround?? Please help

[Daniel Schuler]

This should be fixed in the current Google Maps API. Have you tried upgrading your Google Play services library? That would be in $SDK_PATH/extras/google/google_play_services/libproject/goog‌​le-play-services_lib