Google Maps with blur layer

Question

I am starting a new android app and I will use Google Maps, I am designer also and searching for inspiration I have found this screenshot: http://cdn1.appleinsider.com/Maps.071213.2.jpg
I really like the left screen and specially the blur layer in the botton of the image(the layer with info icon).

I´m reading something about how to blurred with android but all is using pictures, Bitmap, ImageView nothing with maps. So my questions is:
Can I make something similar (to the iOS screenshot) on android and how?
Thank you.

I think you can set the Bitmap as a background for the bottom layer. In that way you can follow examples online about blur + transparent for Bitmap http://stackoverflow.com/questions/6795483/create-blurry-transparent-background-effect and http://stackoverflow.com/questions/13406060/android-how-to-blur-glass-frost-current-activity might help — JustWe, Jun 19 '14 at 23:15
@Demetria The thing which you want to implement is a 3D google map in which you can see buildings. — Piyush, Jun 20 '14 at 06:58
@PiYusHGuPtA No I don´t , I will use "normal" maps (2D), I want to know if I can do, on android, the blur/glass(effect) for the buttom layer. — JoCuTo, Jun 20 '14 at 07:08
@PiYusHGuPtA It will be on my project a layer/layout with two icons inside, but I like that design effect — JoCuTo, Jun 20 '14 at 07:13
@Demetria You can use `GoogleMap.setBuildingsEnabled(false)`. For more info http://android-developers.blogspot.in/2012/12/new-google-maps-android-api-now-part-of.html — Piyush, Jun 20 '14 at 07:14
@PiYusHGuPtA, thanks, I mean , Do you see the info circle icon? on bottom-right, that icon is inside of one layer with blur effect, I want to make that layer. — JoCuTo, Jun 20 '14 at 07:20
@Demetria For that you need to make one relative layout with 50 width and put all icons in it and set blur background for that layout and also blur icons will be make designer. — Piyush, Jun 20 '14 at 07:21
yes, thanks so much @PiYusHGuPtA. but How Can I set blur background for the layout? — JoCuTo, Jun 20 '14 at 08:12
@Demetria Designer will make that background image or you can set alpha property for your layout after set background it. — Piyush, Jun 20 '14 at 08:58
@PiYusHGuPtA thanks, It is not an image as background is real time blur effect, I´m trying whit alpha property but it´s not the same. — JoCuTo, Jun 20 '14 at 09:20
@Demetria If you want to apply blue effect then you need to apply blur effect for bitmap of map pro grammatically. — Piyush, Jun 20 '14 at 09:24
@PiYusHGuPtA I think that is very difficult for me current android level :-( — JoCuTo, Jun 20 '14 at 09:56
@PiYusHGuPtA after ended my developer studies(3 years), 6 months working with android — JoCuTo, Jun 20 '14 at 10:09
@Demetria Oh. Okay. So are you currently working with android? — Piyush, Jun 20 '14 at 10:10
@Demetria Wel come. I am also working with android since 2 years. — Piyush, Jun 20 '14 at 10:47
@PiYusHGuPtA I don´t know, I´m reading that I can't not make a bitmap with google maps V2 — JoCuTo, Jun 20 '14 at 12:26

score 7 · Accepted Answer · answered Oct 13 '16 at 14:36

If anyone else is having problems with this, you gotta use the Blurry library.

But since the MapView is a surface view, it doesn't work properly with google maps, so you have to capture the MapView's image into an ImageView and then call to Blurry, like this:

mGoogleMap.snapshot(new GoogleMap.SnapshotReadyCallback() {
                @Override
                public void onSnapshotReady(Bitmap bitmap) {
                    blurView.setVisibility(View.VISIBLE);
                    blurView.setImageBitmap(bitmap);

                    Blurry.with(getContext())
                            .radius(15)
                            .sampling(2)
                            .onto(mRootLayout);

                    mAddressBarLayout.expand();

                }
            });

as you can imagine, the ImageView is placed on the MapView but it's hidden at first:

<android.support.design.widget.CoordinatorLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:animateLayoutChanges="true"
        android:orientation="vertical">

            <com.google.android.gms.maps.MapView
                android:id="@+id/map_fragment_mv"
                android:layout_width="match_parent"
                android:layout_height="match_parent"/>

            <ImageView
                android:id="@+id/blur_view"
                android:visibility="visible"
                android:layout_width="match_parent"
                android:layout_height="match_parent"/>

        </android.support.design.widget.CoordinatorLayout>

Hope this helps someone.

Helped me, Thanks! I used the method with `.from(bitmap).into(blurView);` instead to put the blurred image on the imageview so I could make it invisible later. — George, Mar 07 '18 at 23:41

Google Maps with blur layer

1 Answers1