Create a CardView with a semicircle on top

I am very much into designing a login screen.

Something like this:
How Do I actually cut the card from the top so as to fill the drawable on top of it? Any help would be of great value.

[Source: https://www.uplabs.com/posts/login-android-app/]

A bit update from Ferdous Ahamed's answer. you need to make your image circular.

just add this to your gradle

compile 'de.hdodenhof:circleimageview:2.2.0'

then in your xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#f36121">


    <RelativeLayout
        android:id="@+id/card_container"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="100dp"
        android:layout_marginLeft="24dp"
        android:layout_marginRight="24dp"
        android:layout_centerInParent="true">

        <android.support.v7.widget.CardView
            android:id="@+id/card_login"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="50dp"
            android:foreground="?android:attr/selectableItemBackground"
            card_view:cardBackgroundColor="#ffffff"
            card_view:cardCornerRadius="4dp"
            card_view:cardElevation="0dp"
            card_view:cardUseCompatPadding="false" >

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical"
                android:layout_marginTop="50dp"
                android:padding="24dp">

                <EditText
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:hint="Login"/>

                <EditText
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="16dp"
                    android:hint="Password"
                    android:inputType="textPassword"/>

                <Button
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="16dp"
                    android:text="Sign In"
                    android:background="@android:color/holo_blue_dark"/>

            </LinearLayout>
        </android.support.v7.widget.CardView>


        <de.hdodenhof.circleimageview.CircleImageView
         xmlns:app="http://schemas.android.com/apk/res-auto"
         android:id="@+id/profile_image"
         android:layout_width="96dp"
         android:layout_height="96dp"
         android:src="@drawable/profile"
         app:civ_border_width="2dp"
         app:civ_border_color="#FF000000"/>

    </RelativeLayout>
</RelativeLayout>

all you need to do is use same color. in your parent background and in your imageview use same color for border.

app:civ_border_color="#f36121"

OUTPUT

Refer Github link.