How to display a Canvas inbetween two other widgets?

Question

I am designing a screen which will have buttons at the top of the screen, a canvas in the middle, and some more buttons at the bottom of the screen. Here's my current layout:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <Button
        android:text="Button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/button1" />
    <View
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/iv_view1"
        android:layout_marginBottom="0.0dp" />
    <Button
        android:text="Button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/button2" />
</LinearLayout>

In my main activity, I tried this:

protected override void OnCreate(Bundle savedInstanceState)
{
    base.OnCreate(savedInstanceState);
    SetContentView(Resource.Layout.Main);
    var view = FindViewById<View>(Resource.Id.iv_view1);
    var canvasView = new MyCanvas(this.BaseContext);
    view = canvasView;
}

However, result is not as expected. Only the top button is displayed, and the image I draw onto the canvas is not shown. The problem is not with the canvas as I have tested that in isolation as a full screen view, and it works. Here's my canvas code just in case:

public class MyCanvas : View
{
    private readonly ShapeDrawable _shape;

    public MyCanvas(Context context) : base(context)
    {
        var paint = new Paint();
        paint.SetARGB(255, 200, 255, 0);
        paint.SetStyle(Paint.Style.Stroke);
        paint.StrokeWidth = 4;

        _shape = new ShapeDrawable(new OvalShape());
        _shape.Paint.Set(paint);

        _shape.SetBounds(20, 20, 300, 200);
    }

    protected override void OnDraw(Canvas canvas)
    {
        _shape.Draw(canvas);
    }
}

Answer 1

Modify your MyCanvas like this :

public class MyCanvas : View
{
    private  ShapeDrawable _shape;

    public MyCanvas(Context context) : this (context, null)
    {
    }

    public MyCanvas(Context context, IAttributeSet attrs) : this (context, attrs, 0)
    {
    }

    public MyCanvas(Context context, IAttributeSet attrs, int defStyle) : base (context, attrs, defStyle)
    {
        Init();
    }

    public void Init() 
    {
        var paint = new Paint();
        paint.SetARGB(255, 200, 255, 0);
        paint.SetStyle(Paint.Style.Stroke);
        paint.StrokeWidth = 4;

        _shape = new ShapeDrawable(new OvalShape());
        _shape.Paint.Set(paint);

        _shape.SetBounds(20, 20, 300, 200);
    }

    protected override void OnDraw(Canvas canvas)
    {
        _shape.Draw(canvas);
    }
}

Then you could use it in your axml file like common views, for example :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
  <Button
      android:text="Button"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:id="@+id/button1" />

   <!-- Replace Your_MyCanvas_Namespace with the namespace of your MyCanvas class -->
  <Your_MyCanvas_Namespace.MyCanvas
      android:layout_width="wrap_content"
      android:layout_height="100dp"
      android:id="@+id/iv_view1"
       />

  <Button
      android:text="Button"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:id="@+id/button2" />
</LinearLayout>

In your MainActivity :

MyCanvas myCanvas = FindViewById<MyCanvas>(Resource.Id.iv_view1);

Effect :