Draw 2D Graphics In Xamarin Android App Using Visual Studio 2015

Introduction

Xamarin is a platform to develop cross-platform and multi-platform apps (for example, Windows phone, Android, iOS).

In Xamarin platform, the code sharing concept is used. In Xamarin Studio, Visual Studio is also available.

2D Graphics is called to draw the oval, circle, and line in Xamarin Android app.

Prerequisites

• Visual Studio 2015 Update 3.

The steps, mentioned below, are required to be followed in order to draw 2D graphics in Xamarin Android app, using Visual Studio 2015.

Step 1

Click File--> select New--> select Project. The project needs to be clicked after opening all the types of projects in Visual Studio or click (Ctrl+Shift+N).



Step 2

After opening the New Project, select Installed-->Templates-->Visual C#-->Android-->choose the Blank app (Android).

Now, give your Android app a name (Ex:sample) and give the path of your project. Afterwards, click OK.



Step 3

In this step, delete the Main.axml file. In this app, you do not require Main.axml file.

Now, Go to Solution Explorer-->Resource-->Layout-->Main.axml-->Right click-->Delete.

Step 4

In this step, add one Class file and it's name is MyOvealShape.cs.

Go to Solution Explorer-->Resource-->Right click-->Add-->New Item (Ctrl+shift+A).



Step 5

Now, select the class file, give the name MyOvelShape.cs and click add.



Step 6

In this step, add Namespace in MyOvelShape.cs class file, as mentioned below.

MyOvalShape.cs

using Android.Graphics;
using Android.Graphics.Drawables;
using Android.Graphics.Drawables.Shapes;

Step 7

Now, write the code, shown below from MyOvalShape.cs page.

Add one sub class, where name is called View

public class MyOvalShape: View {
        private readonly ShapeDrawable _shape;
        public MyOvalShape(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);
        }

Step 8

In this step, go to the MainActivity.cs page, add one variable and write the code, shown below from OnCreate() method.

MainActivity.cs

public class MainActivity: Activity {
    int count = 1;
    protected override void OnCreate(Bundle bundle) {
        base.OnCreate(bundle);
        SetContentView(new MyOvalShape(this));
    }
}

Step 9

If you have an Android Virtual device, run the app on it, else connect your Android phone and run the app on it.

Simply connect your phone and go to Visual Studio. The connected phone will show up in the Run menu

(Ex:LENOVO A6020a40(Android 5.1-API 22)). Click the Run option.



Output

After a few seconds, the app will start running on your phone.

You will see the 2D circle drawing is successful.



Summary

This was the process to draw 2D Graphics in Xamarin Android app, using Visual Studio 2015.