Android Google Map circle shape

Question

I need to show google map in the circle shape like on picture below.

Map in circle

The solution I'm using right now looks like this:

 <packagename.views.SquareWidthRelativeLayout
                android:id="@+id/map_wrapper"
                android:layout_width="match_parent"
                android:layout_height="match_parent">

                <fragment
                    android:id="@+id/map_fragment"
                    android:name="com.google.android.gms.maps.SupportMapFragment"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"/>

                <RelativeLayout
                    android:id="@+id/map_button"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@drawable/map_round_border"
                    android:clickable="true"
                    android:focusable="true"></RelativeLayout>

            </packagename.views.SquareWidthRelativeLayout>

So in fact I just overlayed it with new layer of relative layout with drawable circle shape png. This solutions works fine and looks OK. Unfortunately now I have to show background image below whole layout. So my solution won't work in this case, because it has white background image that will overlay above main background.

Is there any other solution how to achieve this result without using drawable overlay layer?

score 0 · Answer 1 · edited May 23 '17 at 11:51

0

Create a custom view - a Circle. Use it as a child view. Here's a tutorial to do so. Put map fragment inside this view.

Then put ImageView before this custom view inside RelativeLayout as explained in this answer.

edited May 23 '17 at 11:51

Community

1
1

answered Apr 08 '15 at 00:44

Kay_N

987
5
12

Hello, thank you for your suggestion. Unfortunately I'm not able to put the map fragment inside this circle view. I'll be very glad if you have any tip how to do it. – Stepan Sanda Apr 08 '15 at 17:38
Sure, you can find it here: https://code.google.com/p/gmaps-api-issues/issues/detail?id=5064. If you still have some difficulties let me know. – Kay_N Apr 08 '15 at 17:48
This is nesting and if you want to understand the whole concept in detail, go all the way to the bottom here: https://github.com/codepath/android_guides/wiki/Creating-and-Using-Fragments – Kay_N Apr 08 '15 at 17:58
This is more of a comment on how they could research to do the solution. It is not an answer. It also not self sustaining requiring external links that might not last. – StarWind0 May 25 '18 at 17:53

Virendra Kachhi · Answer 2 · 2018-07-13T08:26:25.923

May be help for you. It working fine. In this png circle is transperent.

<RelativeLayout
        android:layout_width="250dp"
        android:layout_height="250dp"
        android:layout_centerInParent="true">

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

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@drawable/back" />

    </RelativeLayout>

Android Google Map circle shape

2 Answers2

Linked