Android Draw the custom view as in google pay

Question

This question has already been asked and an answer has been accepted here but the accepted answer is not what I am looking for. I want to use a customview in which the notch takes the width + some margin of the view which it is going over, like the pay icon in the above image. While looking into the bottomappbar which houses a fab like this I saw a class called the edge treatment class I guess that can be used as well. I am not posting my customview code rightnow as all I could draw is a rectangle.

Answer 1

You need to draw the curves using Cubic Bézier Curve. A good article to know how to draw such curves is written by Bartosz Ciechanowski, here.

I have developed a View to draw a shape like google pay which inherits from FrameLayout. The source code is available on its github repository (but not documented yet!). However, add the following lines to your app level build.gradle file:

repositories {
    jcenter()
}

dependencies {
    implementation 'com.aminography:beziercurvebulgelayout:1.0.2'
}

Then you can use it in xml layout files as following:

<com.aminography.view.BezierCurveBulgeLayout
    android:id="@+id/bulgeLayout"
    android:layout_width="match_parent"
    android:layout_height="56dp"
    app:bulgeType="bulge"
    app:bulgeColor="@color/colorPrimary"
    app:curveWidth="32dp"
    app:flatWidth="56dp"
    app:flatHeight="24dp">

    <android.support.v7.widget.AppCompatImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:src="@android:drawable/ic_menu_compass"/>

</com.aminography.view.BezierCurveBulgeLayout>

.

Its shape and color is customizable to achieve the target shape by changing below attributes: