Android Google Map circle shape

Question

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

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?

Answer 1

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.

Answer 2

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>