Draw Polygon 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.

Prerequisites

• Visual Studio 2015 Update 3.

The steps, given below, are required to be followed in order to Draw Polygon Graphics in the 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

Next, go to the Solution Explorer and select Resource-->Layout-->double click to open main.axml page. There, you can select either Source mode to write the code or Design mode to design your app.



Step 4

After opening it, the main.axml file will open the main page designer. In this page, you can design this page.



Step 5

In this step, add one Class file called FilledPolygon.cs.

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



Step 6

Now, select the Class file and give name FilledPolygon.cs, and click Add.



Step 7

After creating the FilledPolygon.cs file, add the following Namespace inside the namespace and create one subclass called View.

FilledPolygon.cs

namespace polygon {
    using Android.Content;
    using Android.Graphics;
    using Android.Views;
    class FilledPolygon: View {}
}

Step 8

Now, write the following code in FilledPolygon.cs page.

FilledPolygon.cs

class FilledPolygon: View {
    private readonly PointF[] _points = new [] {
        new PointF(100, 100),
            new PointF(200, 200),
            new PointF(200, 500),
            new PointF(600, 600),
            new PointF(400, 200),
            new PointF(100, 100)
    };
    public FilledPolygon(Context context): base(context) {}
    protected override void OnDraw(Canvas canvas) {
        base.OnDraw(canvas);
        var path = new Path();
        path.MoveTo(_points[0].X, _points[0].Y);
        for (var i = 1; i < _points.Length; i++) {
            path.LineTo(_points[i].X, _points[i].Y);
        }
        var paint = new Paint {
            Color = Color.White
        };
        paint.SetStyle(Paint.Style.Fill);
        canvas.DrawPath(path, paint);
    }
}

Step 9

Next go to the MainActivity.cs page from Solution Explorer. write the following namespace inside the namespace. and write the contentview code between the OnCreate() Method.

MainActivity.cs

namespace polygon {
    using Android.App;
    using Android.OS;
    using Android.Widget;
    [Activity(Label = "polygon", MainLauncher = true, Icon = "@drawable/icon")]
    public class MainActivity: Activity {
        protected override void OnCreate(Bundle bundle) {
            base.OnCreate(bundle);
            // Set our view from the "main" layout resource
            SetContentView(Resource.Layout.Main);
            SetContentView(new FilledPolygon(this));
        }
    }
}

Step 10

If you have Android Virtual device, run the app on it. Else, connect your Android phone and run the app in that.

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 Polygon Graphics is running.



Summary

So, this was the process of drawing Polygon Graphics in Xamarin Android app, using Visual Studio 2015.