Drawing Custom Shapes in Android

Did you ever want to create highly-customized user interfaces in Android? Then this is the tutorial for you!

To draw custom shapes, you need to keep iterating until you achieve the beautiful art you want. In this tutorial, you’ll learn how to draw your design on paper first to avoid wasting time via trial and error.

You’ll improve an app called Stars of Science. You’ll learn how to create custom shapes by painting a profile card with a curved custom shape and gradient colors.

Throughout the tutorial, you’ll learn how to:

• Prepare a custom shape on paper before coding.
• Extend the Android View to draw and paint it on the Canvas.
• Draw a curved shape in gradient colors.

The custom shape you’ll create will look like this:

Getting Started

Download the project materials by clicking the Download Materials button at the top or bottom of this tutorial. Launch Android Studio 3.6.1 or later and select Open an existing Android Studio project. Then navigate to and select the starter project folder where you’ll find the files you need to start, along with some widgets.

Your app already has its basic UI set up so you can focus on drawing custom shapes in Android.

Build and run the app. You’ll see the following screen on your mobile phone or Android emulator:

It’s not bad, but the top of the card doesn’t have much pizazz. You’ll change that throughout the tutorial.

Exploring the Project

Take a quick look at the project structure. Expand starsofscience package and check out the folders inside:

Here’s a breakdown of the folders:

• utils contains four files with extension functions you’ll use in your painting journey.
• view contains CircularImageView which you’ll use to display the avatar in a circular shape. The code inside this class is out of the scope of this tutorial.
• starsofscience contains three files:
  • MainActivity.kt is the app’s main and luncher activity.
  • Painter.kt contains paint() which you’ll implement to paint your custom shape. You’ll add all drawing and painting logic to this function.
  • CustomPainter.kt is a custom Android View with a constructor accepting the width and height of your custom shape in addition to a painter object that has all the drawing and painting logic. This CustomPainter overrides onDraw() and delegates all the drawing to the painter by executing canvas?.let(painter::paint).

Now that you know more about the classes you’ll work with take a moment to learn some of the theory behind making beautiful shapes.

Coding Your Shapes

Before diving into drawing with Android Canvas, you need to know which tools you’ll need, how to use them and how to prepare to code your target shape.

Think about drawing in the physical world. To draw a shape, you need to get a pencil and paper and then use your hand to move the pencil across the paper’s surface. Finally, if you want to make it beautiful, you need to get a brush with some paint.

In this section, you’ll start by drawing a shape freehand. Grab a pencil and paper and get ready!

Know Your Canvas

Your canvas acts as the digital version of the piece of paper you draw on. It holds all your drawing elements, including lines, curves, arches, shapes, text and images.

The canvas needs a size, including width and height. Drawing on a canvas without knowing its size can lead to unexpected results.

On your paper, before drawing any shape, define the canvas by drawing a rectangle of any size you want. Any shapes you draw later will be relative to that canvas.

For instance, you might place your shape at the center of the canvas or make its size equal to half of the canvas size.

Now that you have a canvas, it’s time to create a shape.

Defining How to Move Your Pencil

In visual arts, you have to move your pencil properly across the paper’s surface to create your artwork. You’ll use the same mechanism to draw on the canvas.

Before you can draw a shape, you need to consider which functionalities the canvas object needs to have.

For instance, if you want to draw a square, you need to draw four lines. So, you need the drawing line function in your framework. On the other hand, if you want to draw a crescent, you need to draw two curves with the drawing curve function.

Pick up your pencil and draw a circle in the center of the circle that’s a quarter of the width, like this:

Now, to convert that shape on your paper into a shape in Android, you need to consider its coordinates.

Calculating Coordinates

Coordinates are pairs of numbers that define the exact location of a point on a plane.

Before you draw anything, you need to know the main points that make up that shape. For good practice, calculate all the coordinates and dimensions on your paper before writing any code. This saves you coding time and makes you focus on translating that shape from the paper onto your device.

Since you already drew a circle relative to the canvas on your paper, you already calculated two things:

1. The center of the circle: Since your circle is at the center of the canvas, the center of the circle is the center of the canvas. So the x coordinate of the circle’s center is equal to half of the width of the canvas and the y coordinate of the circle’s center is equal to half of the height of the canvas. This means that:
   cx = canvas width / 2
cy = canvas height / 2
2. The radius: Since your circle is a quarter of the canvas width, the diameter of the circle is equal to a quarter of the width of the canvas. The radius is equal to half of the diameter. That means:
   diameter = canvas width / 4
radius = diameter / 2 = canvas width / 8

See, drawing your shapes on paper helps you calculate the points you need to draw your shape relative to the canvas.

It’s efficient to visualize what you need to do before it’s time to translate your ideas into code. Making paper sketches is a prerequisite for your custom drawing! :]