Search code examples
androiddrawingandroid-canvasshapes

Drawing a squircle shape on canvas (Android)


Here is what I'm using to draw a circle shape on to the canvas (and then an icon bitmap on it):

private static Bitmap makeIcon(int radius, int color, Bitmap icon) {
    final Bitmap output = Bitmap.createBitmap(radius, radius, Bitmap.Config.ARGB_8888);
    final Canvas canvas = new Canvas(output);
    final Paint paint = new Paint();
    paint.setAntiAlias(true);
    paint.setColor(color);
    canvas.drawARGB(0, 0, 0, 0);
    if (Build.VERSION.SDK_INT > Build.VERSION_CODES.KITKAT)
        canvas.drawCircle(radius / 2, radius / 2, radius / 2, paint);
    else
        canvas.drawRect(0, 0, radius, radius, paint);
    int cx = (radius - icon.getWidth()) >> 1; // same as (...) / 2
    int cy = (radius - icon.getHeight()) >> 1;
    canvas.drawBitmap(icon, cx, cy, paint);
    icon.recycle();
    return output;
}

But I have no idea on how to draw a squircle shape instead of the circle shape. FYI, here are some examples of icons using the squircle shape:

enter image description here


Solution

  •     @Override
        protected void onDraw(Canvas canvas) {
            super.onDraw(canvas);
            Path squirclePath = getSquirclePaath(150, 250, 400);
            canvas.drawPath(squirclePath, mPaint);
        }
    
        private static Path getSquirclePaath(int left, int top, int radius){
            //Formula: (|x|)^3 + (|y|)^3 = radius^3
            final double radiusToPow = radius * radius * radius;
    
            Path path = new Path();
            path.moveTo(-radius, 0);
            for (int x = -radius ; x <= radius ; x++)
                path.lineTo(x, ((float) Math.cbrt(radiusToPow - Math.abs(x * x * x))));
            for (int x = radius ; x >= -radius ; x--)
                path.lineTo(x, ((float) -Math.cbrt(radiusToPow - Math.abs(x * x * x))));
            path.close();
    
            Matrix matrix = new Matrix();
            matrix.postTranslate(left + radius, top + radius);
            path.transform(matrix);
    
            return path;
        }
    

    Here is a preview:

    enter image description here