Tuesday, November 19, 2013

Android: Graphics

In the Android app programming there are essentially two possibilites to create 2D graphcics: On the one hand this can be done with so called DrawableResources or by using a Canvas object.
DrawableResources are geometrical figures, which are defined in a XML file and then shown on the app.
In contrast to that on a Canvas object can be arbitrarily drawn, similiar to the functions of System.Graphics.

First a short example about DrawableResources: We right click on the folder Resources - Drawable and select Add File - XML file. Into this we insert the following code:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="line">
    <stroke android:width="1dp" android:color="#FFFFFF"/>
    <size android:height="50dp" />
</shape>

So first we define, that the file describes a figure (shape), and determine, that we want to represent a line.
This should be 1dp wide and 50dp long, furtheremore have black color. Dp stands for Density-independent Pixels and is a measure unit, which adapts to the physical screen size. The defined figure then can for example be used as a background for a control (my file is called Line.xml):

var TxtLine = new TextView (this);
TxtLine.SetBackgroundResource(Resource.Drawable.Line);

Of course other figures besides line are avaible, on this page of Xamarin there is another example.

Now I want to spend a bit more time on the second described method. A commonly used technique is the creation of a custom View class, in which the drawing is done, and which is then set as a layout for the application.
I will here draw an ellipse, based upon this tutorial by Xamarin.
I simply post the complete code of the class first:

     public class ViewWithOval : View
     {
          private readonly ShapeDrawable Oval;

          public ViewWithOval(Context context) : base (context)
          {
               var paint = new Paint();
               paint.SetARGB(255, 0, 255, 0);

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

               Oval.SetBounds(0, 0, 500, 500);
          }

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

So we create a class named ViewWithOval, and let it inherit from the base class View. In it we save a variable of the type ShapeDrawable, in which we can save an arbitrary drawing figure. In the constructor of the class we determine, that we want to have an oval. Furthermore we set its color to green. Via SetBounds() we set the drawing area, which will be fully used by the oval. So the quadratical area here leads to the drawing of a circle.
Important is the overloading of the function OnDraw(), which is called when the class is redrawn, here we take care of the drawing of the shape.
In this we could for example also draw other objects, e.g. via canvas.DrawText("I draw a string", ...), a string.
In our MainActivity we now only have to set the layout to this new class, which we do in the OnCreate() function with the following command:

SetContentView (new ViewWithOval(this));

The result looks as follows on my cellphone:


No comments:

Post a Comment