When I use a scrollview around my custom view, it no longer displays the custom view. If I use any layouts, the view displays. Any ideas?

Here is .xml with linear layout that works without issues, but cannot scroll.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
    <view class="com.example.project_06_cd_v01.myView"
        android:id="@+id/drawing_area"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</LinearLayout>

Here is the same .xml, but nested within a scrollview

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
<LinearLayout
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
    <view class="com.example.project_06_cd_v01.myView"
        android:id="@+id/drawing_area"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</LinearLayout>
</ScrollView>

And my custom view class.

class myView (context: Context, attrs: AttributeSet? = null) : View(context, attrs){


    var nextX = 75F
    var nextY = 50F
    var personX = 75F
    var personY = 150F
    private var currentBox: Box? = null
    private val boxen = mutableListOf<Box>()

    val forest =  BitmapFactory.decodeResource(getResources(), R.drawable.forest)
    val mountain = BitmapFactory.decodeResource(getResources(), R.drawable.mountain)
    val water =  BitmapFactory.decodeResource(getResources(), R.drawable.water)
    val plain =  BitmapFactory.decodeResource(getResources(), R.drawable.plain)
    val out = BitmapFactory.decodeResource(getResources(), R.drawable.out)
    val person = BitmapFactory.decodeResource(getResources(), R.drawable.person)




    private var myMap = arrayOf(
            arrayOf('M','M','M','M','M','.','~','~','~','~','~','~'),
            arrayOf('M','M','M','M','f','f','~','~','~','~','~','~'),
            arrayOf('M','M','M','f','f','.','~','~','~','~','~','~'),
            arrayOf('M','M','f','f','.','.','~','~','~','~','~','~'),
            arrayOf('M','f','.','.','~','~','~','~','~','~','~','~'),
            arrayOf('M','M','.','.','.','.','~','~','~','~','~','~'),
            arrayOf('M','M','.','.','f','f','~','~','~','~','~','~'),
            arrayOf('M','M','.','.','f','.','~','~','~','~','~','~'),
            arrayOf('M','M','f','f','.','.','~','~','~','~','~','~'),
            arrayOf('f','f','.','.','~','~','~','~','~','~','~','~'))

    override fun onDraw (canvas: Canvas){
        nextY = 150F
        for(array in myMap)
        {
            nextX = 75F
            for(tile in array)
            {
                if(tile == 'f')
                    canvas.drawBitmap(forest, nextX, nextY, null)
                else if(tile == 'M')
                    canvas.drawBitmap(mountain, nextX, nextY, null)
                else if(tile == '.')
                    canvas.drawBitmap(plain, nextX, nextY, null)
                else if(tile == '~')
                    canvas.drawBitmap(water, nextX, nextY, null)
                nextX += 150F
            }
            nextY += 150F
        }
        canvas.drawBitmap(person, personX, personY, null)
    }

    override fun onTouchEvent(event: MotionEvent): Boolean {
        val current = PointF(event.x, event.y)
        var action = ""
        when (event.action) {
            MotionEvent.ACTION_DOWN -> {
                if(current.x > 300 && current.x < 800 && current.y > 150 && current.y < 300)
                {
                    if(personY > 150F)
                    {
                        personY -= 150F
                        invalidate()
                    }
                }
                else if(current.x > 225 && current.x < 800 && current.y > 1500 && current.y < 1650)
                {
                    if (personY < 750F)
                    {
                        personY += 150F
                        invalidate()
                    }
                }
                else if(current.x > 825 && current.x < 950 && current.y > 300 && current.y < 1500)
                {
                    if(personY > 75F)
                    {
                        personX += 150F
                        invalidate()
                    }
                }
                else if(current.x > 75 && current.x < 215 && current.y > 300 && current.y < 1500)
                {
                    if(personY < 750F)
                    {
                        personX -= 150F
                        invalidate()
                    }
                }
            }
        }

        Log.i(TAG, "$action at x=${current.x}, y=${current.y}")

        return true
    }


}

Am I missing something here? Is there something I need to do in the view class for this to work?

Source: Android Questions