Show Map within a Circle/Round Layout

Question

I have a Requirement Like this(screenshot below), I found no particular solution to build this layout in the stack overflow. Can anyone help me to build this layout

The

Answer 1

Wrap the map fragment inside a FrameLayout along with an ImageView. The Imageview would display a rounded rectangle on top of the map fragment.

   <FrameLayout
    android:layout_width="wrap_content">

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

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/circle" />
</FrameLayout>

and a circle shape can be;

 <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
           android:shape="oval">
        <gradient
            android:angle=""
            android:endColor=""
            android:startColor=""/>
    </shape>

Answer 2

Show map as a circle

I have a ... trick solution for you :))

<RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true">

        <fragment
            android:id="@+id/map"
            android:name="your map"
            android:layout_width="250dp"
            android:layout_height="250dp"
            android:layout_centerInParent="true" />

        <LinearLayout
            android:layout_width="250dp"
            android:layout_height="250dp"
            android:layout_centerInParent="true"
            android:background="@drawable/bg"
            android:gravity="center">

        </LinearLayout>

    </RelativeLayout>

And the magic is the image bg .The color around must be the same color of your background

Red border will work as a timer, as time reduce, red border

You can use this lib to show your circle progress bar