The so-called predecessors planted trees and later generations took a cool place. Thank you for your contribution.
Original: The effect of cards with concave and convex edges

Firstly, the effect map is shown.

The effect I achieved is different from that of the original blogger. I have concave and convex left and right edges, while the blogger has concave and convex upper and lower edges. In fact, we understand the principle, which edge can achieve this effect.

Realization principle:

How to determine the number of circles drawn:

(This is the experience of the original blogger, and the summary is really good.)

Custom Linear Layout: CouponView

/**
 * Created by Veyron on 2017/2/20.
 * Function: Custom Implementing Edge Concave and Convex Curling Effect
 */

public class CouponView extends LinearLayout {

    private Paint mPaint;       //Paint brush
    private float gap = 8;      //Circle spacing  
    private float radius = 10;  //radius    
    private int circleNum;      //Round quantity
    private float remain;
    private float width;        //View width


    public CouponView(Context context) {
        super(context);
    }

    public CouponView(Context context, AttributeSet attrs) {
        super(context, attrs);
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);//Setting whether to use anti-aliasing function will consume a lot of resources and render graphics slowly.
        mPaint.setDither(true);//Setting whether or not to use image jitter processing will make the rendered image smoother and fuller, and make the image clearer.
        mPaint.setColor(Color.WHITE);
        mPaint.setStyle(Paint.Style.FILL);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        width = w;
        if (remain==0){
            //Calculate the remainder of the non-divisible part
            remain = (int)(h-gap)%(2*radius+gap);
        }
        circleNum = (int) ((h-gap)/(2*radius+gap));  //Calculate the number of circles
    }


    public CouponView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    /**
     * It defines the radius and spacing of circles, initializes these values and obtains the number of circles to be drawn.
     Next you just need to draw the circles one by one.
     * @param canvas
     */
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //Circulation draws concave and convex effect on left and right sides
        for (int i=0;i<circleNum;i++){
            float y = gap+radius+remain/2+((gap+radius*2)*i);//Calculate y-axis coordinates
            canvas.drawCircle(0,y,radius,mPaint);//Draw a circle on the left
            canvas.drawCircle(width,y,radius,mPaint);//Draw a circle on the right
        }
    }
}

Simply draw circles according to the number of circleNum.
Here remain/2 is because, in some cases, the number of drawings that can be calculated is not exactly divisible. This will result in the last spacing on the right being wider than the other spacing.
So we add half of the remaining spacing to the first drawing, even if it's not divisible. At least the width of the first and last spacing can be guaranteed to be the same.

The layout file uses the custom LinearLayout: CouponView

The specific layout depends on the business needs.

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingLeft="16dp"
    android:paddingRight="16dp"
    android:paddingTop="20dp"
    android:paddingBottom="20dp">
    <com.veyron.www.couponview.view.CouponView
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#FF5216"
        android:padding="20dp">
        <ImageView
            android:layout_width="120dp"
            android:layout_height="120dp"
            android:src="@drawable/hanber"
            android:scaleType="centerCrop"/>
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:paddingLeft="16dp">
            <TextView
                android:id="@+id/name"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="26dp"
                android:textColor="#000000"
                android:text="Preferential Hamburg"
                />
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="18dp"
                android:padding="5dp"
                android:text="number:007"
                />
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="20dp"
                android:padding="5dp"
                android:text="Concessional rate:￥18"
                />
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="12dp"
                android:paddingLeft="5dp"
                android:paddingTop="5dp"
                android:text="Closing date:2017-06-09"
                />
        </LinearLayout>
    </com.veyron.www.couponview.view.CouponView>

</FrameLayout>

Source code:

Case Demo

I think so. Welcome to Star ha!!