How to create a 'wave' style layout using Android Canvas

Question

I have been trying to create a custom view similar to that shown below in which the white 'wave' view contains an extended 'inverse rounded corner' in the top right and a rounded corner in the bottom left.

I had attempted to achieve this using the Material Shape themeing but this doesn't seem to support the 'inverse' rounded corner.

To achieve this, I have been using a View and custom drawing within its Canvas, but have not been able to get it working, as I am unsure how to achieve the inverse rounded corner effect.

Any help or guidance would be greatly appreciated

class TestView @JvmOverloads constructor(
    context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
) : View(context, attrs, defStyleAttr) {

    private var mPath = Path()

    override fun onDraw(canvas: Canvas?) {
        super.onDraw(canvas)

        val h = height.toFloat()
        val h2 = height.toFloat() / 2f
        val w = width.toFloat()
        val w2 = width.toFloat() / 2f

        mPath.reset()
        mPath.addArc(w2, 0f, w, h2, 0f, 90f)
        mPath.addArc(0f, h2, w2, h, 180f, 90f)
        mPath.lineTo(w, h2)
        mPath.lineTo(w, h)
        mPath.lineTo(0f, h)
        mPath.close()

        mPath.fillType = Path.FillType.WINDING
        canvas?.clipPath(mPath)
        canvas?.drawColor(Color.DKGRAY)
    }
}

score 0 · Accepted Answer · answered Oct 01 '19 at 21:09

I solved this by using Bezier curves and adapting the answer found in this SO question

The code I used to achieve this was as follows:

class SweepView @JvmOverloads constructor(
    context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
) : View(context, attrs, defStyleAttr) {

    private val paint = Paint().apply {
        color = Color.RED
        isAntiAlias = true
        style = Paint.Style.FILL
    }

    private val path = Path()

    override fun onDraw(canvas: Canvas?) {

        val h = height.toFloat()
        val halfH = h / 2f
        val w = width.toFloat()
        val delta = width / 3f

        path.reset()
        path.moveTo(0f, h)
        path.cubicTo(0f, halfH, 0f, halfH, delta, halfH)
        path.lineTo(w - delta, halfH)
        path.cubicTo(w, halfH, w, halfH, w, 0f)
        path.lineTo(w, h)
        path.close()

        canvas?.drawPath(path, paint)
    }

}

How to create a 'wave' style layout using Android Canvas

1 Answers1