Adding custom buttons to the screen

We need to let the user control when to start another drawing and clear the screen of their previous work. We also need the user to be able to decide whether or when to bring the drawing to life. To achieve this, we will add two buttons to the screen, one for each of these tasks.

Add these new properties to the code after the other properties in the LiveDrawingView class:

// These will be used to make simple buttons
private var resetButton: RectF
private var togglePauseButton: RectF

We now have two RectF instances. These objects hold four Float coordinates each, one coordinate for each corner of our two proposed buttons.

We will now add an init block to the LiveDrawingView class and initialize the positions when the LiveDrawingView instance is first created, as follows:

init {
   // Initialize the two buttons
   resetButton = RectF(0f, 0f, 100f, 100f)
   togglePauseButton = RectF(0f, 150f, 100f, 250f)
}

Now we have added actual coordinates for the buttons...